Ajax及其运用

一、Ajax简介

（1）什么是Ajax

Ajax（Asynchronous Javascript And XML）：即异步JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术，它不是一种新的编程语言，而是一种用于创新创建更好更快以及交互性更强的web'应用程序的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面

1. Ajax的工作流程

Ajax的工作原理就是通过XMLHttpRequest对象来向服务器发出异步请求，从服务器中获得数据，然后JavaScript来操作DOM从而更新局部页面

1. 建立Ajax对象（XMLHttpRequest对象）

2. 创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息，即使用open方法与服务器建立链接

3. 向服务器发送数据

4. 设置回调函数

5. 在回调函数中针对不同的响应状态进行处理

1. XMLHttpRequest简介

1. 什么是XMLHttpRequest

Ajax是一种技术方案，它依赖的是现有的CSS/HTML/JavaScript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象。是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。所以两者的关系可以是我们使用XMLHttpRequest对象来发送一个Ajax请求。

2. XMLHttpRequest常用的方法

• new XMLHttpRequest() //创建新的XMLHttpRequest对象

• abort() //取消当前请求

• getAllResponseHeaders() //返回头部信息

• getResponseHeader() //返回特定的头部信息

• open() //规定请求

• send() //将请求发送到服务器，用于GET请求

• send(string) //将请求发送到服务器，用与POST请求

• setRequestHeader() //向请求添加HTTP头部

3. XMLHttpRequest常用属性

1，ReadyState：当前对象处于什么状态

• Case 0 UNSENT：请求未初始化状态

• Case 1 OPENED：准备发送状态

• Case 2 HEADERS_RECEIVED:已发送状态

• Case 3 LOADING：正在接收状态

• Case 4 DONG：完成响应状态

1. status：HTTP返回请求的状态代码

• 1.. 信息，服务器收到请求，需要请求者继续执行操作

• 2.. 成功，操作被成功接收并处理

• 3. 重定向，需要进一步的操作以完成请求

• 4.. 客户端错误，请求包含语法错误或无法完成请求

• 5.. 服务器错误，服务器在处理请求的过程中发生了错误

3,responseText:以字符串返回响应数据

4，responseXML：以XML数据返回响应数据

5，responseBody：返回正文信息

6，responseText

注：HTTP请求和响应顺利完成：statu=200&&readyState=4

4. XMLHttpRequest的事件及其触发条件

• Onreadystatechange：当xhr.readyState改变时触发（xhr.readyState由非零变为零时不触发）

• Onloadstart：调用xhr.send()方法后触发，反之不触发

• Onprogress：xhr.upload.onprogress在上传阶段触发，每50ms触发一次；xhr.onprogress在下载阶段触发，每50ms触发一次

• Onload:当请求成功完成时触发（xhr.readyState=4）

• Onloadend:当请求结束时触发

• Onabort：当调用xhr.abort()后触发

• Ontimeout：xhr.timeout不等于0，由请求开始即onloadstart开始算起，当到达xhr.timeout所设置时间请求还未结束即onloadend，则触发此事件。

• Onerror 发生网络层级别的异常才触发此事件

注：onreadystatechange是XMLHttpRequest独有的事件，所以xhr一共有八个相关的事件，7个XMLHttpRequestTarget事件加上一个onreadystatechange事件

2. JSONPlaceholder为数据服务的案例

（1）获取数据

let xhr= new XMLHttpRequest(); //创建Ajax核心对象XMLHttpRequest

xhr.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

console.log(this.response); //响应成功

}

}; //事件处理函数

xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1"); //发送Ajax请求

xhr.responseType = "json"; //返回类型为json

request.send();

（2）POST方法提交表单

var formData = new FormData(document.querySelector('form')); // 获取表单数据

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

xhr.onreadystatechange = function() { // 注册请求状态变化事件处理函数

if (xhr.readyState === 4 && xhr.status === 201) {

console.log(xhr.responseText);

}

};

xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts'); // 初始化请求

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

1. PUT方法更新资源

var updateData = {

id: 1,

title: 'Updated Title',

body: 'Updated Body Text'

};

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState === 4 && xhr.status === 200) {

console.log(xhr.responseText);

}

};

xhr.open('PUT', 'https://jsonplaceholder.typicode.com/posts/1');

xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头

xhr.send(JSON.stringify(updateData));

（4）DELETE方法删除资源

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState === 4 && xhr.status === 200) {

console.log(xhr.responseText);

}

};

xhr.open('DELETE', 'https://jsonplaceholder.typicode.com/posts/1');

xhr.send();