AJAX

概述

Asynchronous JavaScript and XML
用JavaScript执行异步网络请求
产生：

• 一次HTTP请求对应一个页面，这是Web的运作原理。
• 1999年，微软公司发布IE浏览器5.0版，第一次引入新功能：允许JavaScript脚本向服务器发起HTTP请求。这样，用户可以留在当前页面中，同时发出新的HTTP请求。
• 2004年Gmail发布和2005年Google Map发布，最早大规模使用AJAX。
• 2005年2月，AJAX这个词第一次正式提出，AJAX成为脚本发起HTTP通信的代名词。

过程：

AJAX包括以下几个步骤：

• 使用原生的XMLHttpRequest对象发出HTTP请求
• 得到服务器返回XML格式的字符串（）
• JS解析XML，并更新局部页面

语法

XMLHttpRequest对象
用来在浏览器与服务器之间传送数据。

var ajax = new XMLHttpRequest();
ajax.open('GET', 'http://www.example.com/page.php', true);
// 向指定的服务器网址，发出GET请求。
// open方法的第三个参数是一个布尔值，表示是否为异步请求。如果设为false，就表示这个请求是同步的

然后，AJAX指定回调函数，监听通信状态（readyState属性）的变化。

ajax.onreadystatechange = handleStateChange;

XMLHttpRequest实例的属性

readyState
表示XMLHttpRequest请求当前所处的状态。
readyState === 4 表示整个请求过程已完毕

onreadystatechange
指向回调函数，监听通信状态（readyState属性）的变化。

response
返回接收到的数据体

responseType
指定服务器返回数据（xhr.response）的类型。

responseText
返回从服务器接收到的字符串，如果本次请求没有成功或者数据不完整，该属性就会等于null。

var data = ajax.responseText;
data = JSON.parse(data);

responseXML
返回从服务器接收到的Document对象

status
表示本次请求所得到的HTTP状态码，基本上，只有2xx和304的状态码，表示服务器返回是正常状态。

if (ajax.readyState == 4) {
  if ( (ajax.status >= 200 && ajax.status < 300)
    || (ajax.status == 304) ) {
    // Handle the response.
  } else {
    // Status error!
  }
}

具体状态码对应的意思见HTTP知识一章

statusText
返回一个字符串，表示服务器发送的状态提示。

XMLHttpRequest实例的方法

abort()
用来终止已经发出的HTTP请求

open()
用于指定发送HTTP请求的参数
open(method,url,async)

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

send()
发出HTTP请求
不带参数，就表示HTTP请求只包含头信息，也就是只有一个URL，典型例子就是GET请求。
带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是POST请求。

// 发送POST请求
var data = 'email='
  + encodeURIComponent(email)
  + '&password='
  + encodeURIComponent(password);
ajax.open('POST', 'http://www.example.com/somepage.php', true);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajax.send(data);

getResponseHeader()
返回HTTP头信息指定字段的值
getAllResponseHeaders()
返回服务器发来的所有HTTP头信息
setRequestHeader()
设置HTTP头信息。该方法必须在open()之后、send()之前调用。

XMLHttpRequest实例的事件

readyStateChange事件
readyState属性的值发生改变，就会触发readyStateChange事件。
可以通过onReadyStateChange属性，指定这个事件的回调函数

实现

原生JS发送AJAX

let request = new XMLHttpRequest();
request.open('GET','/xxx');
request.send();
request.onreadystatechange = ()=>{
  if(request.readyState === 4){
    if ( (ajax.status >= 200 && ajax.status < 300)
    || (ajax.status == 304) ){
      var string = request.responseText;
      var value = JSON.parse(string);
    }
  }
}

jQuery实现AJAX

• jQuery load() 方法
  jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);
// 必需的 URL 参数规定您希望加载的 URL。
// 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
// 可选的 callback 参数是 load() 方法完成后所执行的函数名称。

示例：文件 “demo_test.txt” 的内容加载到指定的

元素中

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
// responseTxt - 包含调用成功时的结果内容
// statusTXT - 包含调用的状态
// xhr - 包含 XMLHttpRequest 对象

• jQuery $.get()
  通过 HTTP GET 请求从服务器上请求数据。

 $.get(URL,callback);

实例：

 $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
  // 第一个回调参数存有被请求页面的内容
  // 第二个回调参数存有请求的状态。

• jQuery $.post()
  通过 HTTP POST 请求向服务器提交数据。

$.post(URL,data,callback);

实例：

 $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });

// 必需的 URL 参数规定您希望请求的 URL。
// 可选的 data 参数规定连同请求发送的数据。
// "demo_test_post.php" 中的 PHP 脚本读取这些参数，对它们进行处理，然后返回结果。
// 第一个回调参数存有被请求页面的内容
// 第二个参数存有请求的状态

跨域策略CORS

跨域资源共享 CORS 详解
AJAX只能向同源网址（协议、域名、端口都相同）发出HTTP请求，如果发出跨源请求，就会报错。因为AJAX是可以获取响应内容的，如果没有同源策略的限制，别的网站可以通过AJAX获取另一个网站的所有信息。

但是，AJAX可以通过CORS发送请求到别的网站。

CORS全称Cross-Origin Resource Sharing，是HTML5规范定义的如何跨域访问资源。

跨域能否成功，取决于对方服务器是否愿意给你设置一个正确的Access-Control-Allow-Origin
如果设置了

response.setHeader('Access-Control-Allow-Origin', 'http://pyz.com:8888')

http://pyz.com:8888是我的协议+域名+端口号，这样我就可以访问他的服务器了，即使我们域名不同。如果该字段为*，则表示这个服务器可以接受所有网站的AJAX请求。