持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情

Ajax的初识理解

Asynchronous JavaScript and XML(异步的 JavaScript 和 XML）是浏览器提供的一套方法，实现页面无刷新即可更新数据，提高用户浏览网站应用的体验

• Ajax技术需要运行在网站环境中才能生效。

Ajax应用场景:

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

Ajax运行原理:

• Ajax相对于浏览器发送请求和接收响应的代理人，实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。

---

01-Ajax原生使用

具体模板可以看这里

Ajax的实现步骤(简述)：

1. 创建Ajax对象：

var xhr = new XMLHttpRequest();

2. 确定Ajax的请求方式和请求地址：

xhr.open('get/post', 'url');

3. 设置请求头

xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");	// get方法请求头默认为此，可以不写

4. 发送请求：

xhr.send();	// post方法数据需要放于此，get方法则不用，两者具体区别记载于后文

5. 获取服务器端给与客户端的响应数据：

xhr.onload = function() {
	console.log(xhr.responseText);
}

---

Ajax的返回状态：

• XMLHttpRequest.readyState有五种状态，代表着不同的含义：

值	状态	描述
0	UNSENT	代理被创建，但尚未调用open()方法
1	OPENED	open()方法已经被调用
2	HEADERS_RECEIVED	send()方法已经被调用，并且头部和状态已经可获得
3	LOADING	下载中；responseText属性已经包含部分数据
4	DONE	下载操作已完成

---

Ajax的参数传递：

1.get方式请求参数

• 语法：

xhr.open('get', `${url}?${data}`);
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");	// 可写可不写，默认为此
xhr.send();

2.post方式请求参数

• 语法：

xhr.open('post', `${url}`);
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");	// 必须写
xhr.send(`${data}`);

---

Ajax常用请求头：

1. 字符串形式请求头：

xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");

参数形式：

data="username=cxy&age=18";

2. JSON形式请求头：

xhr.setRequestHeader("Content-type": "application/json");

参数形式：

data={
	username: cxy,
	age: 18
};

---

Ajax的数据格式：

• 格式转换：

/* 将JSON字符串转换成JSON对象 */
JSON.parse();
/* 将JSON对象转换成JSON字符串 */
JSON.stringify();

• 在真实项目中，服务器端大多数情况下以JSON 对象作为响应数据的格式；
• 当客户端拿到响应数据时，要将JSON 数据和 HTML 字符串进行拼接，然后将拼接结果展示在页面中；
• 在http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转化为对象字符串进行传输。