1.概述

1 Ajax 简介

Ajax 全称为 Asynchronous Javascript And XML，就是异步的 JavaScrript 和 XML。

通过 Ajax 可以在浏览器中向服务器发送异步请求，最大的优势：==页面无刷新获取数据==。

Ajax 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

2 XML 简介

XML 可扩展标记语言。

XML 被设计用来传输和存储数据。

XML 和 HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

比如说我有一个学生数据： name = “孙悟空” ; age = 18 ; gender = “男” ;
用XML表示：
<student>
<name>孙悟空</name>
<age>18</age>
<gender>男</gender>
</student>
现在 XML 已经被 JSON 取代了，用 JSON 表示上述数据：
{"name":"孙悟空","age":18,"gender":"男"}

3 AJax 的特点

3.1 AJax 的优点

可以无需刷新页面而与服务器端进行通信。
允许你根据用户事件来更新部分页面内容。

3.2 Ajax 的缺点

没有浏览历史，不能回退。
存在跨域问题。
SEO不友好。

2.原生 Ajax 使用

1 基本使用步骤

// 第一步 创建 xhr 对象
var xhr = new XMLHttpRequest();

// 第二步 请求初始化
xhr.open('GET', '/getData');

// 第三步 监听请求状态，等响应结束后获取响应内容
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.getAllResponseHeaders());   // 获取所有的响应头信息
    console.log(xhr.getResponseHeader('Content-Length')); // 获取指定的响应头信息
    console.log(xhr.responseText); // 获取响应体文本
  }
}

// 第四步 发送请求
xhr.send();

2 GET 请求和 POST 请求

2.1 发送 GET 请求

xhr.open('GET', '/submitData?a=100&b=200');    // 把要传递的数据拼接到 url 中
xhr.send();

2.2 发送 POST 请求

// 请求初始化
xhr.open('POST', '/submitData?m=edit');

// 设置请求体的内容类型
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

// 发送请求
xhr.send('a=100&b=200&c=hello&msg=安妮你真好');  // 把要传递的数据写在请求体中

2.3 其他请求方式

不允许发送请求体的请求方式： HEAD、GET，用法与发送 GET 请求相似。

允许发送请求体的请求方式： POST、PUT、DELETE、OPTIONS、PATCH，用法与发送 POST 请求相似。

// 请求初始化
xhr.open('PUT', '/submitData');

// 设置请求体的内容类型
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

// 发送请求
xhr.send('a=100&b=200&c=hello&msg=安妮你真好');  // 把要传递的数据写在请求体中

3 同步请求和异步请求

// 异步请求，open 的第三个参数设置为 ture 或者不设置，默认值也会去 true
xhr.open('GET', '/submitData'); 
xhr.open('GET', '/submitData', true);

// 同步请求，open 第三个参数设置为 false
xhr.open('GET', '/submitData', false);

注意： 不建议使用同步请求，目前大部分浏览器同步请求，相关事件都不会被触发。

4 响应 JSON 数据

4.1 服务端设置

服务端需设置响应头指定内容类型:

Content-Type: application/json;charset=utf-8

4.2 客户端处理 JSON 数据

① 方式一使用 JSON.parse 方法

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    JSON.parse(xhr.responseText)
  }
}

② 方式二使用 responseType 属性设置响应内容类型为 json

// 设置响应内容为 json 格式
xhr.responseType = 'json';

// 监听请求状态，响应结束后获取响应内容
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    xhr.response;  // 会返回一个对象
  }
}

5 HTTP 进度事件

5.1 监测进度的事件

loadstart    接收到响应数据时触发。 
load    请求成功完成时触发。
loadend    当请求结束时触发, 无论请求成功 (load) 还是失败 (abor 或 error)。
progress    当请求接收到更多数据时，周期性地触发。

触发顺序：loadstart、load、loaded。

5.2 ProgressEvent 对象

上面事件的回调函数中可以获取到 ProgressEvent 对象，用于查看请求进度。

可以使用属性 loaded 得到目前已经接收到的字节长度，使用属性total得到总的字节长度。

6 请求超时终止

① 方式一 xhr2 方案

// 设置请求超时时间,超时后请求会自动中断
xhr.timeout = 3000;

// 请求超时触发 timeout 事件
xhr.ontimeout = function(){
  console.log('请求超时');
}

// 监听请求状态，响应结束后获取响应内容
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.response);  // 会返回一个对象
  }
}

② 方式二兼容性方案

// 发送请求
xhr.send();

// 超时之后中断连接
setTimeout(function(){
  xhr.abort();
  console.log('请求超时');
}, 2000)

附录 XMLHttpRequest 对象

① XHR 对象概述

1）XMLHttpRequest 对象简称 XHR 对象。

2）XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。

3）XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。

4）尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用，它可以接收任何形式的文本文档。

② 创建 XHR 对象

使用构造函数 XMLHttpRequest 就可以创建一个 XHR 对象。

let xhr = new XMLHttpRequest()；

注意：在古老的 IE 浏览器中（如：IE6），需要使用其他方式来创建 XHR 对象。

// IE5、IE6
let xhr = new ActiveXObject("Microsoft.XMLHTTP");

③ XHR对象的属性

属性名	含义
readyState	返回一个数字，表示请求的状态： 0 – UNSET – XHR对象已创建或已被 abort() 方法重置。 1 – OPENDED – `open()` 方法已经被调用。 2 – HEADERS_RECEIVED – `send()` 方法已经被调用，并且响应头和响应状态已经可获得。 3 – LOADING – 下载中， `responseText` 属性已经包含部分数据。 4 – DONE – 所有响应数据接收完毕。
status	响应状态码，如 404、200 等。
statusText	响应状态码的文本描述，如 200 对应的是 “OK”。
responseXML	接收格式为 XML 的响应数据，返回一个 document 对象。
responseText	获取响应文本，返回一个字符串。
responseType	用于设置响应内容的类型 xhr2
response	返回的类型取决于 responseType 的设置。 xhr2
timeout	设置超时时间。xhr2

④ XHR 对象的方法

方法名	含义
open()	初始化 HTTP 请求，用来指定请求方式和 URL。 `xhr.open(method, url, [async], [user], [password])`
send()	发送 HTTP 请求，参数可以设置请求体，没有请求体无需设置参数。
setRequestHeader()	设置 HTTP 请求头的值。必须在 `open()` 之后、`send()` 之前调用。
abort()	如果请求已被发出，则立刻中止请求。
getAllResponseHeaders()	以字符串形式返回所有的响应头。
getResponseHeader()	返回指定的响应头。

⑤ XHR 对象的事件

事件名	含义
readystatechange	readyState 属性值发生变化触发该事件。
abort	请求终止时触发。
error	请求遇到错误时触发。
loadstart	接收到响应数据时触发。 xhr2
load	请求成功完成时触发。xhr2
loaded	当请求结束时触发, 无论请求成功 ( `load`) 还是失败 (`abor` 或 `error`)。xhr2
progress	当请求接收到更多数据时，周期性地触发。xhr2
timeout	在预设时间内没有接收到响应时触发。xhr2

3.jQuery 中 Ajax 的使用

1 相关 ajax 方法

① $.get() 发送 GET 请求

$.get(url, [data], [callback], [type])

url：请求的URL地址。
data：请求携带的参数。
callback：载入成功时回调函数。
type：设置响应内容的格式，xml, html, script, json, text 等。

$.get('/server', {a:100, b:200,wd: 618}, function(data){
  //data中存放的是响应体的结果
  console.log(data);
});

② $.post() 发送 POST 请求

$.post(url, [data], [callback], [type])

url：请求的URL地址。
data：请求携带的参数。
callback：载入成功时回调函数。
type：设置响应内容的格式，xml, html, script, json, text 等。

$.post('/server', {username:'anni', password:"123123"}, function(data){
  console.log(data);
});

③ $.ajax() 发送指定的请求

$.ajax(url, [settings])

url：请求的URL地址。
settings：Ajax 请求设置，是一个对象，通过对象属性设置各种选项，所有选项都是可选的

$.ajax({
   type: "POST",
   url: "some.php",
   data: {username:'anni', password:"123123"}，
   dataType: 'json',   // 响应内容的类型
   success: function(msg){
     alert(msg);
   }
});

2 表单数据处理

① serialize() 序列表表格内容为字符串

$("form").serialize()

3 JSONP 方法

① $.getJSON() 用于 jsonp 请求

$.getJSON(url,[data], [callback])

url：发送请求地址。
data：待发送 Key/value 参数。
callback：载入成功时回调函数。

您可以通过使用 JSONP 形式的回调函数来加载其他网域的JSON数据，如 “myurl?callback=?”。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

$.getJSON("/serverr", { name: "John", time: "2pm" }, function(json){
  alert("JSON Data: " + json.users[3].name);
});

4.跨域

1 同源策略

1）什么是同源策略？

同源策略是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。
Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
所谓同源是指：协议，域名（IP），端口必须要完全相同
即：协议、域名（IP）、端口都相同，才能算是在同一个域里。

2）什么是同源?

同源策略是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。
Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
所谓同源是指：协议，域名（IP），端口必须要完全相同
即：协议、域名（IP）、端口都相同，才能算是在同一个域里。

3）什么是跨域？

违背同源策略就是跨域。

4）跨域解决方案有什么？

CORS
JSONP
使用代理服务器

2 CORS

1） CORS是什么？

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。

2）CORS怎么工作的？

CORS是通过设置一个响应头 Access-Control-Allow-Origin 来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

3）相关响应头介绍：

Access-Control-Allow-Origin：允许的域名，该字段是必须的，设置为 *，表示取消跨域限制。 Access-Control-Allow-Credentials：该字段可选。它的值是一个布尔值，表示是否允许发送 Cookie。默认情况下，Cookie不包括在CORS请求之中 Access-Control-Expose-Headers：该字段可选。CORS请求时，XMLHttpRequest 对象的 getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: content-type,cache-control

3 JSONP

1）什么是JSONP ?

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get请求。

在网页有一些标签天生具有跨域能力，比如：img link iframe script，JSONP就是利用 script 标签的跨域能力来发送请求的。

2）JSONP 使用步骤

// 1.动态的创建一个script标签
var script = document.createElement("script");

// 2.设置script的 src
script.src = "http://localhost:3000/testAJAX?callback=abc";

// 3. 定义回调函数
function abc(data) {
    alert(data.name);
};

// 4.将script添加到 body 中,会发送请求
document.body.appendChild(script);

3）服务端的处理

var callback = req.query.callback;
var obj = {
  name:"孙悟空",
  age:18
}
res.send(callback+"("+JSON.stringify(obj)+")");

4）jQuery 中jsonp 的使用

$.getJSON("http://api.douban.com/v2/movie/in_theaters?callback=?",function (data) {
  //获取所有的电影的条目
  var subjects = data.subjects;
  //遍历电影条目
  for(var i=0 ; i<subjects.length ; i++){
    $("#list").append("<li>"+
                      subjects[i].title+"<br />"+
                      "<img src=\""+subjects[i].images.large+"\" >"+
                      "</li>");
  }
});

coderhyh

https://hyhzzz.github.io/posts/1005.html

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 coderhyh !

ajax

AJAX入门

1.概述

1 Ajax 简介

2 XML 简介

3 AJax 的特点

3.1 AJax 的优点

3.2 Ajax 的缺点

2.原生 Ajax 使用

1 基本使用步骤

2 GET 请求和 POST 请求

2.1 发送 GET 请求

2.2 发送 POST 请求

2.3 其他请求方式

3 同步请求和异步请求

4 响应 JSON 数据

4.1 服务端设置

4.2 客户端处理 JSON 数据

① 方式一 使用 JSON.parse 方法

② 方式二 使用 responseType 属性设置响应内容类型为 json

5 HTTP 进度事件

5.1 监测进度的事件

5.2 ProgressEvent 对象

6 请求超时终止

① 方式一 xhr2 方案

② 方式二 兼容性方案

附录 XMLHttpRequest 对象

① XHR 对象概述

② 创建 XHR 对象

③ XHR对象的属性

④ XHR 对象的方法

⑤ XHR 对象的事件

3.jQuery 中 Ajax 的使用

1 相关 ajax 方法

① $.get() 发送 GET 请求

② $.post() 发送 POST 请求

③ $.ajax() 发送指定的请求

2 表单数据处理

① serialize() 序列表表格内容为字符串

3 JSONP 方法

① $.getJSON() 用于 jsonp 请求

4.跨域

1 同源策略

2 CORS

3 JSONP

你的赏识是我前进的动力

① 方式一使用 JSON.parse 方法

② 方式二使用 responseType 属性设置响应内容类型为 json

② 方式二兼容性方案