Ajax -- 阿贾克斯

1、什么是Ajax

1.1 传统网站中存在的问题

• 网速慢的情况下，页面加载时间长，用户只能等待
• 表单提交后，如果一项内容不合格，需要重新填写所有表单内容
• 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间

1.2 什么是Ajax

Ajax 是浏览器提供的一套方法，可以实现页面无刷新更新数据，实现局部更新，提高用户浏览网站应用的体验

1.3 Ajax 的应用场景

1. 页面上拉加载更多数据
2. 列表数据无刷新分页
3. 表象离开焦点数据验证
4. 搜索提示文字下拉列表

举一个不是很恰当的栗子：

好比买房，我们需要跟楼主爸爸商讨各种各样的问题，但是往往楼主是很忙的，而且也没有那么多耐心替我们解决各种各样的问题，如：贷款。这就导致我们买房进展缓慢，着急的是我们啊

那怎么办呢？这时候，就需要中介了，他是连接我们和楼主之间的一个连接件，帮我们传递信息、解决问题，还可以把楼主爸爸减少一些琐事，这就极大地提高我们的买房效率，也减轻了楼主的工作量

所以，客户端就好比我们买房人，服务器端就好比楼主爸爸，而Ajax就是中介啦

简单来说，Ajax就是连接客户端和服务器端的一座桥梁

以前传统模式：

这种模式的就是一次性将页面的全部内容都请求过来，它的弊端就是导致服务器一次请求产生的压力过大，用户等待时间过长，体验很不佳，浏览器性能低下

使用Ajax模式：

服务器端通过Ajax 分批异步给客户端发送资源，当我们需要的时候再去请求过来，当我们在浏览页面拉到底部的时候，一些图片信息再显示出来，这就是在执行Ajax 请求

特别是在一些电商网站，图片视频是很消耗带宽的，必须使用Ajax来进行资源的请求

2、Ajax 基础

现在我们知道了，Ajax就是浏览器与服务器之间的一个代理人，在不影响用户浏览页面的情况下，局部刷新页面，提高网站性能和用户体验。

Ajax技术需要运行在网站环境中才能生效，我们需要在本地搭建一个Ajax环境，本文章使用Node常见服务器作为演示服务器

js提供了一个 XMLHTTPRequest对象来创建Ajax，Ajax 的原理就是通过 XMLHTTPRequest 对象服务器发起异步请求，从服务器获取数据，然后通过js操作DOM节点来更新页面

可以说，XMLHTTPRequest 对象就是 Ajax的核心

2.1 XMLHTTPRequest 对象

XMLHTTPRequest对象的方法

<img src="https://pic2.zhimg.com/80/v2-bfb70da89ce8fa707bc8654f88a7356b_720w.png" alt="img" style="zoom:80%;" />

序号	方法	描述
1	abort()	取消当前响应，这个方法把XMLHttpRequest对象的readState状态值重置为0的状态；例如：在请求用了很长时间而且响应不再必要的时候，就可以调用这个方法
2	getAllResponseHeaders()	把HTTP响应头部作为未解析的字符串返回
3	getResponseHeader()	返回指定的HTTP响应头部的值
4	open()	初始化HTTP请求参数，设置 请求方式、URL、同步或异步
5	send()	发送HTTP请求
6	setRequestHeader()	向一个打开但未发送的请求设置或添加一个HTTP请求

XMLHTTPRequest对象的属性

序号	属性或事件	描述
1	readyState 属性	Ajax状态码，分别为0、1、2、3、4
2	onreadystatechange 事件	当readyState状态码改变的时候触发该函数
3	status属性	由服务器返回的HTTP状态码，如200、404
4	statusText 属性	返回返回了与状态码相对应的状态名称；例如；200表示“OK”，404表示“NotFound”
5	responseXML 属性	对请求的响应，解析为XML并作为Document对象返回
6	responseText 属性	从服务器接收到的响应体作为文本字符串返回

readyState 状态值

2.2 Ajax 实现步骤

1、创建Ajax对象

let xhr = new XMLHttpRequest();

2、设置Ajax请求地址及请求方式

xhr.open('GET', 'http://127.0.0.1:3000/getData')

open():

• 第一个参数：请求方式，GET、POST....
• 第二个参数：请求的URL
• 第三个参数：true 或 false，true表示异步请求，false 表示同步请求（可选，忽略默认是true）

3、发送请求

xhr.send()

4、获取服务器的响应数据

// 当Ajax状态码发生变化时
xhr.onreadystatechange = function() {
    // 当Ajax状态码为4时且服务器正常响应时
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);  // 获取响应体
    }
}

当然，只有异步才需要这么繁琐地检测状态码；如果是同步请求，直接接收服务器端返回的响应，因为脚本会在send() 之后停止并等待服务器端的响应

服务端：

使用express 创建服务器

// 引入express框架
const express = require("express");

// 创建服务器
const app = express()

app.get('/getData', function(req, res) {
    // 解决跨域问题
    res.setHeader('Access-Control-Allow-Origin', '*')
    // 服务器端响应的数据
    res.send('我们已收到');
})

// 监听端口
app.listen(3000, function() {
    console.log('服务器已打开');
})

3、Ajax 运行原理

3.1 服务端相应的数据格式

服务器大多数情况下以JSON对象作为响应数据格式，客户端拿到JSON数据之后和html进行拼接，显示在网页上

在http请求与响应中，无论是请求参数还是响应数据，如果是对象类型会转换为对象字符换进行传输

• JSON.parse() : 将JSON字符串转换为JSON对象
• JSON.Stringfy() : 将值转换为字符串，通常客户端要传输数据给服务端的时候，就先将JSON对象转化为字符串

let xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 将字符串类型的响应数据转化为JSON对象
        let responseText = JSON.parse(xhr.responseText)
        let str = "<h2>" + responseText.text + "</h2>"
        document.body.innerHTML = str;  // 渲染到页面
    }
}

xhr.open('GET', 'http://127.0.0.1:3000/getData')
xhr.send()

由于onreadystatechange 是检测Ajax状态码的，所以 onreadystatechange事件一定要放在open() 之前

3.2 请求方式

open() 方法的第一个参数就是HTTP请求方式，常用的有GET、POST、HEAD等，任何服务器端支持的方法都可以。根据HTTP标准请求方法保持大写，否则一些浏览器可能无法处理请求

1、GET 请求

xhr.open('get', 'http://www.example.com?name=zxc&age=18');

发送的数据要像上面一样进行拼接

栗子：浏览器端发送数据给服务器，服务器再响应

浏览器端：

<p><input type="text" id="namer"></p>
<p><input type="text" id="song"></p>
<p><button>按钮</button></p>

let btn = document.querySelector('button')
let namer = document.querySelector('#namer')
let song = document.querySelector('#song')
btn.onclick = function() {
    namer = namer.value;
    song = song.value;
    let params = 'namer=' + namer + '&song=' + song;
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let responseText = JSON.parse(xhr.responseText); // {"namer":"薛之谦","song":"刚刚好"}
            console.log(responseText);
        }
    }
    xhr.open('GET', 'http://127.0.0.1:3000/getData?' + params)
    xhr.send()
}

服务器端：

app.get('/getData', function(req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*')
    res.send(req.query)
})

• get请求要使用 query 属性来接收数据

2、POST请求

post请求方式较GET 比较复杂点

• 首先它需要设置请求头
• 其次它的数据是拼接完传给send() 方法

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('name=zxc&age=18')

注意：

• post请求的需要使用body属性来获取浏览器发送的数据
• 另外需要引入包，进行设置，使req对象上面新增一个body属性；否则服务器端将无法接收到数据

const bodyParser = require('body-parser');
//对body-parser进行配置
app.use( bodyParser.urlencoded({extended: true}) )

栗子：

let btn = document.querySelector('button')
let namer = document.querySelector('#namer')
let song = document.querySelector('#song')

btn.addEventListener('click', function() {
    namer = namer.value;
    song = song.value;
    var params = 'namer=' + namer + '&song=' + song;
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.open('post', 'http://localhost:3000/getData');
    // 设置请求头
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // 通过send() 将表单的参数发送给服务器端
    xhr.send(params);
})

3.3 请求参数的格式

请求参数的格式是在请求头设置的

xhr.setRequestHeader('Content-Type',  )

1、post请求的格式

格式：application/x-www-form-urlencoded

name=zxc&age=18%sex=girl

2、json格式

格式：application/json

// json对象
{name: 'zxc', age: '18', sex: 'girl'}

在请求头中指定 Content-Type 属性的值是 application/json ，告诉服务器端当前请求参数格式是json

4、兼容新问题

1、XMLHTTPRequest 对象

XMLHTTPRequest 对象具有兼容性问题，低版本中用 ActiveXobject

解决兼容性问题：

var httpRequest
if (window.XMLHttpRequest) {
    // Mozilla、Safari、IE7+
    httpRequest = new XMLHttpRequest(0)
} else if (window.ActiveXObject) {
    // IE6及其之前
    httpRequest = new ActiveXObject('Microsoft.XMLHTTP')
}

2、onreadystatechange事件

onreadystatechange 和 onload 两种或群服务器端响应方式的区别：

区别描述	onload事件	onreadystatechange事件
是否兼容低版本	不兼容	兼容
是否需要Ajax状态码	不需要	需要
被调用次数	一次	多次

• onload 只被调用一次，并且比较简单，一般情况下可以使用这个
• onreadystatechange 当需要考虑兼容性的时候，就可使用这个

总结：

1. Ajax是一种方法，介于浏览器和服务器知之间，可用于缓解服务器一次请求压力过大，实现页面局部更新
2. onreadystatechange事件写在open() 之前，监视整个Ajax请求过程
3. GET 请求和POST请求都使用send() 发送响应数据
4. GET 请求发送的数据用 query属性获取，而POST请求则用 body属性获取
5. 注意：POST请求需要设置请求头，并且服务器端需要配置环境