登录  /  注册
博主信息
博文 128
粉丝 9
评论 5
访问量 231066
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
【JS基础入门】JavaScript原生Ajax请求与响应处理方式及JSON数据格式、FormData方法的使用详解
 一纸荒凉* Armani
原创
2728人浏览过

JSON数据格式

  1. JSON 是什么?
    在 JS 语言中,一切都是对象。因此,任何支持的类型都可以通过 JSON 来表示,例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型
  • JSON: JavaScript Object Notation(JS 对象表示法)
  • JSON 独立于任何编程语言, 几乎所有编程语言都提供了访问 JSON 数据的 API 接口
  • JSON 是一种语法,用来序列化其它语言创建的数据类型
  • JSON 仅支持 6 种数据类型:对象,数组,数值,字符串,布尔值,null
  • JSON 只是借用了 JS 中的一些数据表示语法,与 JS 并无关系
  1. JSON 数据类型
序号 类型 描述
1 简单值 数值,字符串,布尔,null
1 复合值 对象,数组
  1. JS 解析 JSON 的 API
序号 方法 描述
1 JSON.stringify() 将 JS 对象,序列化为 JSON 字符串
2 JSON.parse() 将 JSON 字符串,解析为 JS 对象

要实现从对象转换为 JSON 字符串,使用 JSON.stringify() 方法:
要实现从 JSON 转换为对象,使用 JSON.parse() 方法:

JSON 键值对是用来保存 JS 对象的一种方式,和 JS 对象的写法也大同小异,键/值对组合中的键名写在前面并用双引号 “” 包裹,使用冒号 : 分隔,然后紧接着值

data.json

  1. {
  2. "name":"zhansan",
  3. "age":12,
  4. "lover":["coding","swimming","singing"],
  5. "friend":{
  6. "high":"180cm",
  7. "weight":"80kg",
  8. "lover":["swimming","singing","dancing"],
  9. "friend":{}
  10. }
  11. }

JSON方法

JavaScript中JSON对象与JSON字符串相互转换

  1. var obj = new Object();
  2. obj.Name = "八戒"
  3. obj.Age = 500;
  4. //通过字面量的形式来定义对象
  5. var obj1 = { "Name": "八戒", "Age": "500" };
  6. var arr = [{ "Name": "八戒", "Age": "500" }, { "Name": "八戒1", "Age": "1000" }];
  7. //JSON格式:将json的字面量表示形式,当做字符串存放,则为json格式字符串
  8. var str = '{ "Name": "八戒", "Age": "500" }';
  9. var jsonstrarr = '[{ "Name": "八戒", "Age": "500" }, { "Name": "八戒1", "Age": "1000" }];';
  10. //将json字符串转换成js对象(数组)
  11. var resobj = JSON.parse(str);
  12. alert(resobj.Name);

JS对象转换成为JSON

JSON.stringify()

  1. var data = {
  2. name:"zhansan",
  3. age:12,
  4. lover:["coding","swimming","singing"],
  5. friend:{
  6. high:"180cm",
  7. weight:"80kg",
  8. lover:["swimming","singing","dancing"],
  9. friend:{}
  10. }
  11. };
  12. var arr = [
  13. {id: 1,name: "admin",age: 18},
  14. {id: 2,name: "php",age: 26},
  15. {id: 3,name: "js",age: 15},
  16. {id: 3,name: "ajax",age: 3},
  17. ];
  18. var json_data = JSON.stringify(data);
  19. console.log(json_data);
  20. console.log(JSON.stringify(arr));

JSON.stringify()第二个参数是个可选参数,被称为replacer。这个参数可以是数组或者函数。它提供了一个过滤机制制定了应该或者不应该包含哪些属性

  1. const obj = {
  2. a: 0,
  3. b: 1,
  4. c: [0, 1, 2]
  5. }
  6. JSON.stringify(obj,['a', 'c']) // "{"a":0,"c":[0,1,2]}"
  7. JSON.stringify(obj,(key,value)=>{
  8. if(key !== 'b'){
  9. return value
  10. }
  11. })
  12. // "{"a":0,"c":[1,2,3]}"

第三个可选的参数也可以传递给JSON.stringify(),被称为space,被用作缩进,是为了使得输出有格式更加漂亮。

  1. const a = {
  2. b: 42,
  3. c: "42",
  4. d: [1,2,3]
  5. };
  6. JSON.stringify( a, null, 3 );
  7. // "{
  8. // "b": 42,
  9. // "c": "42",
  10. // "d": [
  11. // 1,
  12. // 2,
  13. // 3
  14. // ]
  15. // }"
  16. JSON.stringify( a, null, "-----" );
  17. // "{
  18. // -----"b": 42,
  19. // -----"c": "42",
  20. // -----"d": [
  21. // ----------1,
  22. // ----------2,
  23. // ----------3
  24. // -----]
  25. // }"

JSON转换为JS对象

JSON.parse()

  1. var resobj = JSON.parse(str);

FormData方法

将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率。

一、创建formData对象

1、创建一个空对象:

  1. //通过FormData构造函数创建一个空对象
  2. var formdata=new FormData();
  3. //可以通过append()方法来追加数据
  4. formdata.append("name","laotie");
  5. //通过get方法对值进行读取
  6. console.log(formdata.get("name"));//laotie
  7. //通过set方法对值进行设置
  8. formdata.set("name","laoliu");
  9. console.log(formdata.get("name"));//laoliu

2、通过表单对formData进行初始化

  1. <form id="advForm">
  2. <p>广告名称:<input type="text" name="advName" value="xixi"></p>
  3. <p>广告类别:<select name="advType">
  4. <option value="1">轮播图</option>
  5. <option value="2">轮播图底部广告</option>
  6. <option value="3">热门回收广告</option>
  7. <option value="4">优品精选广告</option>
  8. </select></p>
  9. <p><input type="button" id="btn" value="添加"></p>
  10. </form>

通过表单元素作为参数,实现对formData的初始化:

  1. //获得表单按钮元素
  2. var btn=document.querySelector("#btn");
  3. //为按钮添加点击事件
  4. btn.onclick=function(){
  5. //根据ID获得页面当中的form表单元素
  6. var form=document.querySelector("#advForm");
  7. //将获得的表单元素作为参数,对formData进行初始化
  8. var formdata=new FormData(form);
  9. //通过get方法获得name为advName元素的value值
  10. console.log(formdata.get("advName"));//xixi
  11. //通过get方法获得name为advType元素的value值
  12. console.log(formdata.get("advType"));//1
  13. }

二、formData操作方法

1、通过get(key)与getAll(key)来获取相对应的值

  1. // 获取key为age的第一个值
  2. formdata.get("age");
  3. // 获取key为age的所有值,返回值为数组类型
  4. formdata.getAll("age");

2、通过append(key,value)在数据末尾追加数据

  1. //通过FormData构造函数创建一个空对象
  2. var formdata=new FormData();
  3. //通过append()方法在末尾追加key为name值为laoliu的数据
  4. formdata.append("name","laoliu");
  5. //通过append()方法在末尾追加key为name值为laoli的数据
  6. formdata.append("name","laoli");
  7. //通过append()方法在末尾追加key为name值为laotie的数据
  8. formdata.append("name","laotie");
  9. //通过get方法读取key为name的第一个值
  10. console.log(formdata.get("name"));//laoliu
  11. //通过getAll方法读取key为name的所有值
  12. console.log(formdata.getAll("name"));//["laoliu", "laoli", "laotie"]

3、通过set(key, value)来设置修改数据

key的值不存在,会添加一条数据

  1. //通过FormData构造函数创建一个空对象
  2. var formdata=new FormData();
  3. //如果key的值不存在会为数据添加一个key为name值为laoliu的数据
  4. formdata.set("name","laoli");
  5. //通过get方法读取key为name的第一个值
  6. console.log(formdata.get("name"));//laoli

key的值存在,会修改对应的value值

  1. //通过FormData构造函数创建一个空对象
  2. var formdata=new FormData();
  3. //通过append()方法在末尾追加key为name值为laoliu的数据
  4. formdata.append("name","laoliu");
  5. //通过append()方法在末尾追加key为name值为laoliu2的数据
  6. formdata.append("name","laoliu2");
  7. //通过get方法读取key为name的第一个值
  8. console.log(formdata.get("name"));//laoliu
  9. //通过getAll方法读取key为name的所有值
  10. console.log(formdata.getAll("name"));//["laoliu", "laoliu2"]
  11. //将存在的key为name的值修改为laoli
  12. formdata.set("name","laoli");
  13. //通过get方法读取key为name的第一个值
  14. console.log(formdata.get("name"));//laoli
  15. //通过getAll方法读取key为name的所有值
  16. console.log(formdata.getAll("name"));//["laoli"]

4、通过has(key)来判断是否存在对应的key值

  1. //通过FormData构造函数创建一个空对象
  2. var formdata=new FormData();
  3. //通过append()方法在末尾追加key为name值为laoliu的数据
  4. formdata.append("name","laoliu");
  5. //判断是否包含key为name的数据
  6. console.log(formdata.has("name"));//true
  7. //判断是否包含key为age的数据
  8. console.log(formdata.has("age"));//false

5、通过delete(key)可以删除数据

  1. //通过FormData构造函数创建一个空对象
  2. var formdata=new FormData();
  3. //通过append()方法在末尾追加key为name值为laoliu的数据
  4. formdata.append("name","laoliu");
  5. console.log(formdata.get("name"));//laoliu
  6. //删除key为name的值
  7. formdata.delete("name");
  8. console.log(formdata.get("name"));//null

三、通过XMLHttpRequest发送数据

创建表单:

  1. <form id="advForm">
  2. <p>广告名称:<input type="text" name="advName" value="xixi"></p>
  3. <p>广告类别:<select name="advType">
  4. <option value="1">轮播图</option>
  5. <option value="2">轮播图底部广告</option>
  6. <option value="3">热门回收广告</option>
  7. <option value="4">优品精选广告</option>
  8. </select></p>
  9. <p>广告图片:<input type="file" name="advPic"></p>
  10. <p>广告地址:<input type="text" name="advUrl"></p>
  11. <p>广告排序:<input type="text" name="orderBy"></p>
  12. <p><input type="button" id="btn" value="添加"></p>
  13. </form>

发送数据:

  1. var btn=document.querySelector("#btn");
  2. btn.onclick=function(){
  3. var formdata=new FormData(document.getElementById("advForm"));
  4. var xhr=new XMLHttpRequest();
  5. xhr.open("post","http://127.0.0.1/adv");
  6. xhr.send(formdata);
  7. xhr.onload=function(){
  8. if(xhr.status==200){
  9. //...
  10. }
  11. }
  12. }

AJax请求

一、Ajax定义

1、什么是Ajax
Ajax:即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容,必需重载整个网页面。

2、同步与异步的区别
同步提交:当用户发送请求时,当前页面不可以使用,服务器响应页面到客户端,响应完成,用户才可以使用页面。
异步提交:当用户发送请求时,当前页面还可以继续使用,当异步请求的数据响应给页面,页面把数据显示出来 。

3、ajax的工作原理
客户端发送请求,请求交给xhr,xhr把请求提交给服务,服务器进行业务处理,服务器响应数据交给xhr对象,xhr对象接收数据,由javascript把数据写到页面上,如下图所示:

二、实现AJAX的基本步骤

要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:

  1. 创建XMLHttpRequest对象,即创建一个异步调用对象.
  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
  3. 设置响应HTTP请求状态变化的函数.
  4. 发送HTTP请求.
  5. 获取异步调用返回的数据.
  6. 使用JavaScript和DOM实现局部刷新.

1、创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();

2、创建HTTP请求
创建了XMLHttpRequest对象之后,必须为XMLHttpRequest对象创建HTTP请求,用于说明XMLHttpRequest对象要从哪里获取数据。通常可以是网站中的数据,也可以是本地中其他文件中的数据。

创建HTTP请求可以使用XMLHttpRequest对象的open()方法,其语法代码如下所示:
xhr.open(method,URL,flag,name,password);

代码中的参数解释如下所示:

  • method:该参数用于指定HTTP的请求方法,一共有get、post、head、put、delete五种方法,常用的方法为get和post。
  • URL:该参数用于指定HTTP请求的URL地址,可以是绝对URL,也可以是相对URL。
  • flag:该参数为可选,参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步、false表示同步,默认为true。
  • name:该参数为可选参数,用于输入用户名。如果服务器需要验证,则必须使用该参数。
  • password:该参数为可选,用于输入密码。若服务器需要验证,则必须使用该参数。

xhr.open("get","./ajax.htm",true);

3、处理 xhr 响应: xhr.onload = (...) => {...}

4、发送 xhr 请求: xhr.send(...)

xhr 对象常用属性

序号 方法 描述
1 responseType 设置响应类型
2 response 响应正文

xhr 对象常用方法

序号 方法 描述
1 open(type,url) 配置请求参数
2 send(data/null) 发送请求

xhr 对象常用事件

序号 事件 描述
1 load() 请求成功
2 error() 请求失败

http请求类型:
GET :向指定资源请求数据,一般用来获取,查询资源信息
POST:向指定资源提交数据进行处理请求(例如提交表单或者上传文件)

get / post 区别如下几点:

  • get 是 url 传参,post 是request body请求体传参
  • get 回退无影响, post 回退会重复提交
  • get 生成的 url 可做书签,post 不可以
  • get 只能对 url 进行编码, post 支持多种编码
  • get 请求参数会保留在历史记录中, post 参数不保留
  • get 参数长度受限,post 无限制
  • get 只接受 ascii 码字符,post 无限制
  • get,post 底层实现是一致的,都是基于 http 协议
  • get 也可以带上 request body, post 也可以带上 url 参数
  • get 产生一个 tcp 数据包,post 产生二个 tcp 数据包
  • get 产生一个请求, post 产生二个请求
  • get 请求,浏览器将 header,data 一起发出,服务器响应 200 成功
  • post 请求,浏览器先发出 header,得到响应 100 continue,再发出 data,得到响应 200
  • 并非所有浏览器的 post 都产生二次 http 请求,firefox 就只产生一次

get请求参数

  1. <form>
  2. <input type="text" name="username" id="username">
  3. <input type="password" name="password" id="password">
  4. <span id="info">提示信息</span>
  5. <input type="button" id="btn" value="登录">
  6. </form>
  1. var btn = document.getElementById('btn');
  2. btn.onclick = function(){
  3. var uname = document.getElementById('username').value;
  4. var pw = document.getElementById('password').value;
  5. // 1、创建XMLHttpRequest对象
  6. let xhr = new XMLHttpRequest();
  7. /*
  8. 参数一:请求方式(get获取数据;post提交数据)
  9. 参数二:请求地址
  10. 参数三:同步或者异步标志位,默认是true表示异步,false表示同步
  11. 如果是get请求那么请求参数必须在url中传递
  12. encodeURI()用来对中文参数进行编码,防止乱码
  13. */
  14. // 2、准备发送
  15. var param = 'username='+uname+'&password='+pw;
  16. xhr.open('get','./getDemo.php?'+encodeURI(param),true);
  17. // 3、执行发送动作
  18. xhr.send(null); // get请求这里需要添加null参数
  19. // 4、指定回调函数
  20. xhr.onreadystatechange = function(){
  21. /*
  22. readyState:
  23. 2 浏览器已经收到了服务器响应的数据
  24. 3 正在解析数据
  25. 4 数据已经解析完成
  26. */
  27. if(xhr.readyState == 4){
  28. /* http的常见状态码
  29. 200 响应成功
  30. 404 没有找到请求资源
  31. 500 服务器端错误*/
  32. if(xhr.status == 200){
  33. let data = xhr.responseText;
  34. let info = document.querySelector("#info");
  35. if(data == '1'){
  36. info.innerText = "登录成功";
  37. }else{
  38. info.innerText = '用户名或密码错误';
  39. }
  40. }
  41. }
  42. }
  43. }
  1. $uname = $_GET['username'];
  2. $pw = $_GET['password'];
  3. if($uname == 'admin' && $pw == '123'){
  4. echo "1";
  5. }else{
  6. echo $uname;
  7. }


  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>ajax-get</title>
  8. </head>
  9. <body>
  10. <input type="text" placeholder="请输入ID号,例如:1">
  11. <button>Ajax-GET请求</button>
  12. <p></p>
  13. <script>
  14. const btn = document.querySelector("button");
  15. const id = document.querySelector("input");
  16. btn.onclick = () => {
  17. // 1. 创建 xhr 对象:
  18. const xhr = new XMLHttpRequest();
  19. // 2. 配置 xhr 参数:
  20. xhr.open("get", "test1.php?id="+id.value);
  21. // 设置请求返回数据格式
  22. xhr.responseType = "json";
  23. // 3. 处理 xhr 响应:
  24. xhr.onload = () => {
  25. // xhr.response: 响应的返回值,是json字符串
  26. // console.log(typeof xhr.response);
  27. // 如果显式的设置了响应类型,如json,这里就是直接自动转为js对象
  28. console.log(xhr.response);
  29. // 是将json转为js对象
  30. // console.log(JSON.parse(xhr.response));
  31. let user = `用户名:${xhr.response.name} ( 邮箱:${xhr.response.email} )`;
  32. document.querySelector("p").textContent = user;
  33. };
  34. xhr.onerror = () => console.log("Error");
  35. // 4. 发送 xhr 请求: `xhr.send(...)`
  36. xhr.send(null);
  37. };
  38. </script>
  39. </body>
  40. </html>
  1. // 以二维数组模拟数据表信息
  2. $users = [
  3. ['id'=>1, 'name'=>'天蓬','email'=>'tp@php.cn','password' => md5('123456')],
  4. ['id'=>2, 'name'=>'灭绝','email'=>'mj@php.cn','password' => md5('abc123')],
  5. ['id'=>3, 'name'=>'西门','email'=>'xm@php.cn','password' => md5('abc888')],
  6. ];
  7. // 查询条件
  8. $id = $_GET['id'];
  9. // 在id组成的数组中查询是否存在指定的id,并返回对应的键名
  10. $key = array_search($id,array_column($users,'id'));
  11. // 根据键名返回指定的用户信息
  12. echo json_encode($users[$key]);



post请求参数

  1. <form>
  2. <input type="text" name="username" id="username">
  3. <input type="password" name="password" id="password">
  4. <span id="info">提示信息</span>
  5. <input type="button" id="btn" value="登录">
  6. </form>
  1. var btn = document.getElementById('btn');
  2. btn.onclick = function(){
  3. var uname = document.getElementById('username').value;
  4. var pw = document.getElementById('password').value;
  5. // 1、创建XMLHttpRequest对象
  6. xhr = new XMLHttpRequest();
  7. /*
  8. 参数一:请求方式(get获取数据;post提交数据)
  9. 参数二:请求地址
  10. 参数三:同步或者异步标志位,默认是true表示异步,false表示同步
  11. post请求参数通过send传递,不需要通过encodeURI()转码
  12. 必须设置请求头信息
  13. */
  14. // 2、准备发送
  15. var param = 'username='+uname+'&password='+pw;
  16. xhr.open('post','postDemo.php',true);
  17. // 3、执行发送动作
  18. xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  19. xhr.send(param); // post请求参数在这里传递,并且不需要转码
  20. // 4、指定回调函数
  21. xhr.onreadystatechange = function(){
  22. if(xhr.readyState == 4){
  23. if(xhr.status == 200){
  24. document.querySelector("#info").innerText = xhr.responseText;
  25. }
  26. }
  27. }
  28. }
  1. $uname = $_POST['username'];
  2. $pw = $_POST['password'];
  3. if($uname == 'admin' && $pw == '123'){
  4. echo "登录成功";
  5. }else{
  6. echo '用户名或密码错误';
  7. }


  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Ajax-POST</title>
  8. <style>
  9. body {
  10. background-color: lightcyan;
  11. }
  12. .login {
  13. width: 20em;
  14. /*border: 1px solid;*/
  15. box-shadow: 0 0 8px #888;
  16. padding: 0 1em 1em;
  17. background-color: lightseagreen;
  18. color: white;
  19. margin: 2em auto;
  20. display: grid;
  21. place-items: center;
  22. }
  23. .login form {
  24. display: grid;
  25. grid-template-columns: 3em 1fr;
  26. gap: 1em 0;
  27. }
  28. .login form input {
  29. border: none;
  30. outline: none;
  31. }
  32. .login form input:focus,
  33. .login form input:hover {
  34. box-shadow: 0 0 5px lime;
  35. }
  36. .login form button {
  37. background-color: lightsalmon;
  38. color: white;
  39. outline: none;
  40. border: none;
  41. height: 2em;
  42. }
  43. .login form button:hover {
  44. background-color: salmon;
  45. cursor: pointer;
  46. box-shadow: 0 0 5px lime;
  47. }
  48. /* 按钮与提示信息显示在第二列 */
  49. .login form button,
  50. .tips {
  51. grid-area: auto / 2;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <div class="login">
  57. <p>用户登录</p>
  58. <form action="" onsubmit="return false">
  59. <label for="email">邮箱:</label>
  60. <input type="email" name="email" id="email" placeholder="请输入邮箱" />
  61. <label for="password">密码:</label>
  62. <input type="password" name="password" id="password" placeholder="请输入密码" />
  63. <button>提交</button>
  64. <span class="tips"></span>
  65. </form>
  66. <script>
  67. const form = document.querySelector(".login form");
  68. const btn = document.querySelector(".login button");
  69. const tips = document.querySelector(".tips");
  70. // FormData: 表单数据的序列化
  71. let data = new FormData();
  72. data.append("email", "20602138376@qq.com");
  73. data.append("password", "123456");
  74. console.log(data.get("email"), data.get("password"));
  75. console.log(data);
  76. btn.onclick = (ev) => {
  77. // 默认的提交行为
  78. ev.preventDefault();
  79. // 1. 创建 xhr 对象:
  80. const xhr = new XMLHttpRequest();
  81. // 2. 配置 xhr 参数:
  82. xhr.open("post", "test2.php");
  83. // xhr.responseType = "text";
  84. // 3. 处理 xhr 响应:
  85. xhr.onload = () => {
  86. tips.textContent = xhr.response;
  87. };
  88. xhr.onerror = () => console.log("Error");
  89. // 4. 发送 xhr 请求:
  90. xhr.send(new FormData(form));
  91. };
  92. </script>
  93. </div>
  94. </body>
  95. </html>
  1. <?php
  2. // print_r($_POST);
  3. // 使用二维数组模拟用户数据表信息
  4. $users = [
  5. ['id' => 1, 'name' => '天蓬', 'email' => 'tp@php.cn', 'password' => md5('123456')],
  6. ['id' => 2, 'name' => '灭绝', 'email' => 'mj@php.cn', 'password' => md5('abc123')],
  7. ['id' => 3, 'name' => '西门', 'email' => 'xm@php.cn', 'password' => md5('abc888')],
  8. ];
  9. // 将通过post获取的数据保存到临时变量中
  10. $email = $_POST['email'];
  11. $password = md5($_POST['password']);
  12. // 使用数组过滤器查询是否存在指定的用户并返回结果
  13. $res = array_filter($users, function ($user) use ($email, $password) {
  14. return $user['email'] === $email && $user['password'] === $password;
  15. });
  16. // 将结果做为请求响应返回到前端
  17. echo count($res) === 1 ? '验证成功' : '验证失败';


cors跨域请求

  • CORS: 跨域资源共享
  • 跨域请求可以是 get,也可以是 post,只不过 get 居多
  • cors-post 时,需要在服务器端进行头部设置
  • jsonp 只能是 get

跨域的含义
同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指”协议+域名+端口”三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

同源策略限制内容有:

  • Cookie、LocalStorage、IndexedDB 等存储性内容
  • DOM 节点
  • AJAX 请求不能发送

但是有三个标签允许跨域加载资源:

  • <img src="...">
  • <link href="...">
  • <scripts src="...">

当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。常见跨域场景如下图所示:

特别说明两点:

第一:如果是协议和端口造成的跨域问题“前端”是处理不了的。
第二:在跨域问题上,仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配”。

这里你或许有个疑问:请求跨域了,那么请求到底发出去没有?

跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回响应,只是响应被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求,为什么 Ajax 就不行?因为归根结底,跨域是为了阻止用户读取到另一个域名下的内容,Ajax 可以获取响应,浏览器认为这不安全,所以拦截了响应。但是表单并不会获取新的内容,所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF,因为请求毕竟是发出去了。

  1. // 1. 创建xhr对象
  2. const xhr = new XMLHttpRequest();
  3. // 2. 配置xhr参数
  4. xhr.open('get','http://shuai.com/demo.php?username="apassword="123"',true);
  5. // 3. 处理xhr响应
  6. xhr.onload = function(){
  7. console.log(xhr.response);
  8. }
  9. // 4. 发送xhr请求
  10. xhr.send(null);

CORS 全称是跨域资源共享(Cross-Origin Resource Sharing),是一种 AJAX 跨域请求资源的方式

php如何设置允许跨域请求?
在php文件头部加入
header("Access-Control-Allow-Origin: *");

如果想设置只允许某个网站通过的话可以这样设置
header("Access-Control-Allow-Origin: http://test.com"); // 只允许test.com发起的跨域请求,其他的都不通过

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Ajax-GET-CORS</title>
  8. </head>
  9. <body>
  10. <button>跨域请求CORS</button>
  11. <script>
  12. // cors: 跨域资源共享
  13. // 同源策略: 为请求的安全,浏览器禁止通过脚本发起一个跨域的请求
  14. // 只允许通过脚本发起基于同源的请求
  15. // 同源指: 协议相同,域名/主机名相同,端口相同
  16. // http://www.abc.com http
  17. // https://www.abc.com https
  18. // 协议不同
  19. // https://www.a.com
  20. // https://www.b.com
  21. // 主机不同
  22. // https://a.cn:8080
  23. // https://a.cn:9090
  24. // 端口不同
  25. const btn = document.querySelector("button");
  26. btn.onclick = (ev) => {
  27. // 1. xhr对象
  28. const xhr = new XMLHttpRequest();
  29. // 2. 配置xhr, 跨域请求
  30. xhr.open("get", "http://world.io/cors1.php");
  31. // 3. 处理xhr响应
  32. xhr.onload = () => console.log(xhr.response);
  33. // 4. 发送xhr请求
  34. xhr.send(null);
  35. };
  36. </script>
  37. </body>
  38. </html>
  1. // header('Access-Control-Allow-Origin: http://hello.io');
  2. header('Access-Control-Allow-Origin: *');
  3. echo 'CORS: 跨域请求成功';

JavaScript实战案例

新闻选项卡

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>新闻选项卡</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. box-sizing: border-box;
  12. }
  13. a {
  14. text-decoration: none;
  15. color: #555;
  16. }
  17. a:hover {
  18. text-decoration: underline;
  19. color: red;
  20. }
  21. li {
  22. list-style: none;
  23. line-height: 1.6em;
  24. }
  25. li:hover {
  26. cursor: default;
  27. }
  28. .tabs {
  29. width: 330px;
  30. height: 300px;
  31. margin: 30px auto;
  32. background-color: #e6e6e6;
  33. display: flex;
  34. flex-direction: column;
  35. }
  36. .tab {
  37. height: 36px;
  38. display: flex;
  39. }
  40. .tab li {
  41. flex: auto;
  42. text-align: center;
  43. line-height: 36px;
  44. background-color: #fff;
  45. }
  46. .tab li.active {
  47. background-color: #e6e6e6;
  48. border-bottom: 2px solid orange;
  49. }
  50. .tab li:hover {
  51. cursor: pointer;
  52. }
  53. /* 默认所有选项卡只有一个显示,其它隐藏 */
  54. .item {
  55. padding: 20px;
  56. display: none;
  57. }
  58. .item li {
  59. white-space: nowrap;
  60. text-overflow: ellipsis;
  61. overflow: hidden;
  62. margin-bottom: 16px;
  63. }
  64. .item.active {
  65. display: block;
  66. }
  67. </style>
  68. </head>
  69. <body>
  70. <div class="tabs">
  71. <!-- 导航 -->
  72. <ul class="tab">
  73. <li data-index="1" class="active">省内新闻</li>
  74. <li data-index="2">国内新闻</li>
  75. <li data-index="3">国际新闻</li>
  76. </ul>
  77. <!-- 与导航标签页对应的详情列表 -->
  78. <ul class="item active" data-index="1">
  79. <li>
  80. <a href="">数百只东方白鹳飞临安徽省合肥市巢湖花塘湖湿地</a>
  81. </li>
  82. <li>
  83. <a href="">数百只东方白鹳飞临安徽省合肥市巢湖花塘湖湿地</a>
  84. </li>
  85. <li>
  86. <a href="">数百只东方白鹳飞临安徽省合肥市巢湖花塘湖湿地</a>
  87. </li>
  88. <li>
  89. <a href="">数百只东方白鹳飞临安徽省合肥市巢湖花塘湖湿地</a>
  90. </li>
  91. <li>
  92. <a href="">数百只东方白鹳飞临安徽省合肥市巢湖花塘湖湿地</a>
  93. </li>
  94. </ul>
  95. <ul class="item" data-index="2">
  96. <li>
  97. <a href="">寻亲行动继续!已为51位烈士找到亲人</a>
  98. </li>
  99. <li>
  100. <a href="">寻亲行动继续!已为51位烈士找到亲人</a>
  101. </li>
  102. <li>
  103. <a href="">寻亲行动继续!已为51位烈士找到亲人</a>
  104. </li>
  105. <li>
  106. <a href="">寻亲行动继续!已为51位烈士找到亲人</a>
  107. </li>
  108. <li>
  109. <a href="">寻亲行动继续!已为51位烈士找到亲人</a>
  110. </li>
  111. </ul>
  112. <ul class="item" data-index="3">
  113. <li>
  114. <a href="">“感谢中国”成网络热词 中国疫苗在埃塞俄比亚有多受欢迎?</a>
  115. </li>
  116. <li>
  117. <a href="">“感谢中国”成网络热词 中国疫苗在埃塞俄比亚有多受欢迎?</a>
  118. </li>
  119. <li>
  120. <a href="">“感谢中国”成网络热词 中国疫苗在埃塞俄比亚有多受欢迎?</a>
  121. </li>
  122. <li>
  123. <a href="">“感谢中国”成网络热词 中国疫苗在埃塞俄比亚有多受欢迎?</a>
  124. </li>
  125. <li>
  126. <a href="">“感谢中国”成网络热词 中国疫苗在埃塞俄比亚有多受欢迎?</a>
  127. </li>
  128. </ul>
  129. </div>
  130. <script>
  131. const tab = document.querySelector(".tab");
  132. const items = document.querySelectorAll('.item');
  133. tab.onclick = function(ev) {
  134. // 事件触发者
  135. console.log(ev.target);
  136. // 1. 清空之前的激活样式,并将当前的导航设置为激活状态
  137. [...tab.children].forEach(item => {
  138. item.classList.remove('active');
  139. })
  140. ev.target.classList.add('active');
  141. // 2.根据data-index来确定应该将哪个列表进行激活并显示
  142. [...items].forEach(item => {
  143. item.classList.remove('active');
  144. });
  145. [...items].filter(item => item.dataset.index === ev.target.dataset.index)[0].classList.add('active')
  146. }
  147. </script>
  148. </body>
  149. </html>

效果图:

百度一键换肤

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>一键换肤</title>
  7. <style>
  8. body {
  9. background-image: url(https://dss0.bdstatic.com/l4oZeXSm1A5BphGlnYG/skin/755.jpg?2);
  10. }
  11. .box {
  12. width: 800px;
  13. height: 300px;
  14. background-color: white;
  15. margin: 60px auto;
  16. padding: 30px;
  17. border-radius: 20px;
  18. overflow: hidden;
  19. display: grid;
  20. grid-template-columns: repeat(6, 1fr);
  21. grid-template-rows: repeat(3, 1fr);
  22. gap: 3px;
  23. }
  24. .box img {
  25. width: 100%;
  26. height: 100%;
  27. cursor: pointer;
  28. }
  29. .box img:first-child {
  30. grid-area: 1/1/span 2/span 2;
  31. }
  32. .box img:last-child {
  33. grid-area: 2/4/span 2/span 2;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div class="box">
  39. <img src="https://dss3.bdstatic.com/iPoZeXSm1A5BphGlnYG/skin/750.jpg?2" alt="">
  40. <img src="https://dss0.bdstatic.com/l4oZeXSm1A5BphGlnYG/skin/755.jpg?2" alt="">
  41. <img src="https://dss2.bdstatic.com/lfoZeXSm1A5BphGlnYG/skin/757.jpg?2" alt="">
  42. <img src="https://dss0.bdstatic.com/k4oZeXSm1A5BphGlnYG/skin/759.jpg?2" alt="">
  43. <img src="https://dss2.bdstatic.com/lfoZeXSm1A5BphGlnYG/skin/749.jpg?2" alt="">
  44. <img src="https://dss3.bdstatic.com/lPoZeXSm1A5BphGlnYG/skin/74.jpg?2" alt="">
  45. <img src="https://dss0.bdstatic.com/k4oZeXSm1A5BphGlnYG/skin/71.jpg?2" alt="">
  46. <img src="https://dss2.bdstatic.com/lfoZeXSm1A5BphGlnYG/skin/29.jpg?2" alt="">
  47. <img src="https://dss2.bdstatic.com/kfoZeXSm1A5BphGlnYG/skin/65.jpg?2" alt="">
  48. <img src="https://dss3.bdstatic.com/lPoZeXSm1A5BphGlnYG/skin/258.jpg?2" alt="">
  49. <img src="https://dss3.bdstatic.com/iPoZeXSm1A5BphGlnYG/skin/278.jpg?2" alt="">
  50. <img src="https://dss0.bdstatic.com/k4oZeXSm1A5BphGlnYG/skin/447.jpg?2" alt="">
  51. </div>
  52. <script>
  53. document.querySelector('.box').onclick = (ev) => {
  54. document.body.style.backgroundImage = `url(${ev.target.src})`
  55. }
  56. </script>
  57. </body>
  58. </html>

效果图:

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学