浅谈Ajax

1. 什么是Ajax(Asynchronous Javascript and XML)?

略答：一种更新网页的技术。

简答：在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通俗易懂的说：
就是没用AJAX技术的网页，你点一个按钮就要刷新整个页面，尽管新页面上只有一行字和当前页面不一样，但你还是等待页面刷新。用了AJAX之后，你点击，只有需要更新的部分刷新，不用整个页面刷。

1.1 Ajax全称

Ajax全称： Asynchronous Javascript and XML ，即异步的JS和XML。

异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果我们可以再来处理这个事。

2.Ajax工作原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。以下简称XHR。

XHR相当于是一个送外卖的，来负责客户端与服务器之间的通信传输。举个栗子：

大中午饿了，小张（客户端）点了个外卖，那小张不可能就一直干等着送外卖的（XHR）然后什么也不敢，所以在这个过程中小张（客户端）就该干啥干啥。等送外卖的（XHR）从店里（服务器）那里拿外卖过来了，小再拿外卖（接收数据）、开始吃（客户端把数据渲染到页面）等一系列操作。

这也就是Ajax的异步原理。

3. XMLHttpRequest对象的属性。

readyState 属性存留 XMLHttpRequest 的状态。

onreadystatechange属性定义当 readyState 发生变化时执行的函数。

status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。

readyState ： XMLHttpRequest对象状态值

0 (未初始化) 对象已建立，请求未初始化（尚未调用open方法）

1 (初始化) 服务器连接已建立，尚未调用send方法

2 (发送数据) send方法已调用，但是当前的状态及http头未知

3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

status ：从服务器返回的数字代码，常见如下：
200: “OK”
403: “Forbidden”
404: “Page not found”

statusText 返回状态文本（例如 “OK” 或 “Not Found”）
每当 readyState 发生变化时就会调用 onreadystatechange 函数。
当 readyState 为 4，status 为 200 时，响应就绪。

4.原生ajax的请求总结

不同的浏览器有自己实现AJAX的组件，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。但总体有一下几个步骤：

1.创建XHR对象

2.调用open()方法创建请求

3.调用send()方法发送请求

4.onreadychange捕获请求的状态码

5.判断状态吗是否成功

6.调用ajax的responseText属性返回数据

5. Ajax 实现语法

5.1 创建 XMLHttpRequest

创建 XMLHttpRequest 的语法是：

variable XHR = new XMLHttpRequest();

5.2 规定请求的类型 open(method, url, async)

method：请求的类型：GET 还是 POST
url：服务器（文件）位置
async：true（异步）或 false（同步）(默认是true，可以不写)

 // 2. 初始化， 设置请求方法和url
            xhr.open('GET', 'http://127.0.0.1:8000/server'，true);

5.3 向服务器发送请求

send() 向服务器发送请求（用于 GET）
send(string) 向服务器发送请求（用于 POST）

// 3. 发送
            xhr.send();//（用于 GET）

5.4 GET 还是 POST？

GET 比 POST 更简单更快，可用于大多数情况下。

不过，请在以下情况始终使用 POST：

• 缓存文件不是选项（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 无大小限制）
• 发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

5.4.1像 HTML 表单那样 POST 数据

通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 方法中规定需要发送的数据：

方法 ：

setRequestHeader(header, value) 向请求添加 HTTP 头部

• header：规定头部名称
• value：规定头部值

实例：

xhttp.open("POST", "'http://127.0.0.1:8000/server'", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

5.5接收响应

//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据

5.6 判断状态吗是否成功并调用ajax的responseText属性返回数据

xhr.onreadystatechange = function (){
if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText;
console.log(text);
}
}

参考文章：
https://www.w3school.com.cn/js/js_ajax_intro.asp