AJAX 简述
在介绍 AJAX 以后他们能单纯的认为「JavaScript 潜能非常有限」，因为在此之后 Web 网络平台提供更多大部份的 API 都只逗留在「FPS」的期。
这样就会导致一些难以同时实现的机能，比如：
1.难以在同时实现使用者登入机能时，当使用者输出电子邮箱表明使用者相关联的肖像
2.难以在同时实现使用者注册机能时，当使用者输出电子邮箱或是使用者名就提示信息与否存有
3.难以在同时实现聊天室机能时，动态看见新一代的使用者回帖
那些机能的合作开发最
未知推送允诺的形式
网页输出门牌号，quarterfinal，创下某一原素的 href 或 src 特性配置文件递交那些计划都是他们难以透过或是极难透过代码的形式展开程式设计操作方式的市场需求
对服务器端发出允诺因此拒绝接受服务器端回到的积极响应
如果他们能透过 JavaScript 间接推送互联网允诺，所以 Web 的可能就会更多，骤然能
同时实现的机能也会更多，最少无须是根本无法合作开发「MMORPG」
Google Suggest
AJAX（Asynchronous JavaScript and XML），最先出现在 2005 年的 Google Suggest它不是像 HTML、Java 更能吻合图形界面应用领域的使用者新体验Asynchronous Javascript And XML
AJAX 就是应用程序提供更多的两套 API，能透过 JavaScript 初始化，进而同时实现透过标识符掌控允诺与积极响应。同时实现透过 JavaScript 展开互联网程式设计。XML：最先在应用程序与服务器端间SRAM而所选用的统计数据库系统应用领域情景
对使用者统计数据奇偶校验
离线网页文本
提升使用者新体验，无创下的新体验
新体验Ajax
// jQuery 中的Ajax 方法$.ajax({
url:“https://jsonplaceholder.typicode.com/users”,
type:“GET”,
dataType:“json”,
data: {“id”: 1},
success: function(data){
//使用允诺成功的统计数据
console.log(data);
}
})
原生AJAX 详解
推送 ajax 允诺步骤1、创建 XMLHttpRequest 类型的对象
2、准备推送，打开与一个网址间的连接
3、执行推送动作
4、指定 xhr 状态变化事件处理函数
// 1.创建一个 XMLHttpRequest 类型的对象 — 相当于打开了一个应用程序var xhr = new XMLHttpRequest();
// 2.打开一个与网址间的连接 — 相当于在网页输出网址
xhr.open(“GET”,“https://jsonplaceholder.typicode.com/users”);
// 3.透过连接推送一次允诺 — 相当于点击quarterfinal或是超链接
xhr.send(null);
// 4.指定 xhr 状态变化事件处理函数 — 相当于处理网页呈现后的操作方式xhr.onreadystatechange = function () {
// 透过判断 xhr 的 readyState ，确定此次允诺与否完成
if (this.readyState === 4) {
console.log(this.responseText)
}
}
XMLHttpRequest 类型对象
AJAX API 中核心提供更多的是一个 XMLHttpRequest 类型，大部份的 AJAX 操作方式都需要使用到这个类型。
var xhr = new XMLHttpRequest();
IE6 兼容
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
open() 方法开启允诺
本质上 XMLHttpRequest 就是 JavaScript 在 Web 网络平台中推送 HTTP 允诺的手段，所以他们推送出去的允诺仍然是 HTTP 允诺，同样符合 HTTP 约定的格式。
语法：xhr.open(method, url)
url：要向其推送允诺的 URL 门牌号，字符串格式。
// 1.创建一个 XMLHttpRequest 类型的对象
var xhr = null;
// 兼容写法
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else {
// IE 6 应用程序
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}
// 2.open()方法开启允诺// xhr.open(“GET”,”https://jsonplaceholder.typicode.com/users?id=1″);
xhr.open(“POST”,“https://jsonplaceholder.typicode.com/users”);
// 设置允诺头
// 一般 get 方法不需要设置，而 post 方法必须设置
xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
// 3.send() 方法推送一次允诺
// 如果是 get 方法允诺，不需要再 send 中传参数，它如果想传参数，间接写在网址上 // xhr.send(null);
xhr.send(“name=harry&age=19”);
xhr.onreadystatechange = function () {
// 透过判断 xhr 的 readyState ，确定此次允诺与否完成 if (this.readyState === 4) {
console.log(this.responseText)
}
}
setRequestHeader() 方法设置允诺头
此方法必须在 open() 方法和 send() 间初始化。语法：xhr.setRequestHeader(header, value);header: 一般设置 “Content-Type” ，传输统计数据类型，即服务器需要他们传送的统计数据类型value: 具体的统计数据类型，常用 “application/x-www-form-urlencoded” 和”application/json”。send() 方法推送允诺
用于推送 HTTP 允诺语法：xhr.send(body)body：在XHR允诺中要推送的统计数据体，根据允诺头中的类型展开传参。如果是 GET 方法，无需设置统计数据体，能传 null 或是不传参。readyState 特性
readyState 特性回到一个 XMLHttpRequest 代理当前所处的状态，由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到积极响应时），也就意味着这个事件会被触发多次，所以他们有必要介绍每一个状态值代表的含义：readyState状态描述说明0UNSENT代理 XHR 被创建，但尚未初始化 opsponseText 特性可能已经包含部分统计数据4DONE积极响应体下载完成，能间接使用 responseText
// 1.创建一个 XMLHttpRequest 类型的对象
var xhr = null;
// 兼容写法 if (window.XMLHttpRequest) {
// 标准应用程序
xhr = new XMLHttpRequest();
} else {
// IE 6 应用程序
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}
console.log(“UNSENT”,xhr.readyState);
// 2.open() 方法开启允诺
xhr.open(“GET”,“https://jsonplaceholder.typicode.com/users”);
console.log(“OPENED”,xhr.readyState);
// 3.send() 方法推送一次允诺
xhr.send(“name=harry&age=19”);
// 4.指定回调函数，处理得到的统计数据
xhr.onreadystatechange = function () {
// 透过判断 xhr 的 readyState ，确定此次允诺与否完成 if (this.readyState === 2) {
console.log(“headers received”,xhr.readyState);
} else if (this.readyState === 3) {
console.log(“loading”,xhr.readyState)
console.log(xhr.responseText)
} else if (this.readyState === 4) {
console.log(“done”,xhr.readyState)
console.log(xhr.responseText)
}
}
事件处理函数
一般他们都是在 readyState 值为 4 时，执行积极响应的后续逻辑。xhr.onreadystatechange = function() {
if (this.readyState === 4) {
// 后续逻辑……
}
};
同步与异步
现实情景理解
同步：一个人在同一个时刻根本无法做一件事情，在执行一些耗时的操作方式（不需要看管）不去做别的事，只是等待
异步：在执行一些耗时的操作方式（不需要看管）去做别的事，而不是等待
Ajax 中的同时实现
xhr.open() 方法第三个参数要求传入的是一个 boolean 值，其作用就是设置此次允诺与否选用异步形式执行
默认为 true 异步，如果需要同步执行能透过传递 false 同时实现
如果选用同步形式执行，则标识符会卡死在 xhr.send() 这一步
建议
为了让这个事件能更加可靠（一定触发），在推送允诺 send() 以后，一定是先注册readystatechange
不论是同步或异步都能触发成功
介绍同步模式即可，切记不要使用同步模式
// 1.创建一个 XMLHttpRequest 类型的对象
var xhr = null;
// 兼容写法
if (window.XMLHttpRequest) {
// 标准应用程序
xhr = new XMLHttpRequest();
} else {
// IE 6 应用程序
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}
// 2.打开一个与网址间的连接
// 设置同步或异步 xhr.open(“GET”,“https://jsonplaceholder.typicode.com/users”,true);
// xhr.open(“GET”,”https://jsonplaceholder.typicode.com/users”,false); // 如果设置了同步加载，程序会卡在 send 部分
xhr.onreadystatechange = function () {
// 透过判断 xhr 的 readyState ，确定此次允诺与否完成
if (this.readyState === 4) {
console.log(“允诺成功”)
}
}
// 3.透过连接推送一次请求 xhr.send(null);
// 4.指定 xhr 状态变化事件处理函数
// Ajax 后面的标识符
console.log(“After Ajax”);
积极响应统计数据库系统
提问
• 如果希望服务器端回到一个复杂统计数据，该如何处理？
• 关心的问题就是服务器端发出何种格式的统计数据，这种格式如何在应用程序用 JavaScript 解析。
XML
• 一种统计数据描述手段
• 老掉牙的东西，单纯演示一下，不在这里浪费时间，基本现在的项目不用了
• 淘汰的原因：统计数据冗余太多
<?xml verson=“1.0” encoding=“utf-8” ?>
<booklist>
<book>
<name>三国演义</name>
<author>罗贯中</author>
<cate>古典名著</cate>
</book>
<book>
<name>西游记</name>
<author>吴承恩</author>
<cate>古典名著</cate>
</book>
<book>
<name>红楼梦</name>
<author>曹雪芹</author>
<cate>古典名著</cate>
</book>
</booklist>
<!– xml 就是一种统计数据库系统 –>
<!– 元统计数据：用来描述统计数据的统计数据 –>
<!– 这种统计数据的缺点：
1.元统计数据占用的统计数据量比较大的，不利于大量统计数据的互联网传输
2.在其他语言中，比如 js，解析内部统计数据时，方法比较复杂，不方便使用 –>
json
JavaScript Object Notation,JavaScript 对象表示法
也是一种统计数据描述手段，类似于 JavaScript 字面量形式
服务器端选用 JSON 格式回到统计数据，应用程序按照 JSON 格式解析统计数据
JSON 格式的统计数据，与 js 对象的区别*
1.JSON 统计数据不需要存到变量中
2.结束时不需要写分号
3.JSON 统计数据中的特性名必须加引号
注意
不管是 JSON 也好，还是 XML，只是在 AJAX 允诺过程中用到，并不代表它们与 AJAX 间有必然的联系，它们只是统计数据协议罢了。
不管服务器端是选用 XML 还是选用 JSON 本质上都是将统计数据回到给应用程序。
服务器端应该根据积极响应文本的格式设置一个合理的 Content-Type。
// js 对象字面量
var obj = {
name: “tom”,
age: 19,
cp: {
name: “harry”,
age: 18
}
};
// JSON 格式的统计数据，与 js 对象的区别
// 1.JSON 统计数据不需要存到变量中
// 2.结束时不需要写分号
// 3.JSON 统计数据中的特性名必须加引号
var str = {“name”: “tom”,“age”: 80};
// JSON 对象
// console.log(JSON)
console.log(obj);
console.log(JSON.stringify(obj));
// 使用 JSON 对象的 parse 方法能将 json 格式的字符串转换成 对象格式，
// 具有了特性和方法，方便他们在js 中展开使用
console.log(JSON.parse(str));
var strObj = JSON.parse(str);
console.log(strObj.name)
console.log(strObj.age)
JSON Server
json-server 是一个 Node 模块，运行 Express 服务器，你能指定一个 json 文件作为api 的统计数据源。也就是说，他们能使用它快速的搭建一个 web 服务器。网址：https://github.com/typicode/json-serverjson 文件书写方法
{
“users”: [
{
“id”: 1,
“name”: “tom”,
“age”: 19,
“class”: 1
},
{
“id”: 2,
“name”: “jerry”,
“age”: 18,
“class”: 2
},
{
“id”: 3,
“name”: “lucy”,
“age”: 19,
“class”: 1
},
{
“name”: “lily”,
“age”: “19”,
“class”: “2”,
“id”: 4
},
{
“name”: “lulu”,
“age”: 18,
“class”: 2,
“id”: 5
},
{
“name”: “harry”,
“age”: 18,
“class”: 1,
“id”: 6
},
{
“name”: “john”,
“age”: “19”,
“class”: “2”,
“id”: 7
}
],
“posts”: [
{
“id”: 1,
“userId”: 1,
“title”: “javascript”,
“content”: “js 是一门非常好学语言”
},
{
“id”: 2,
“userId”: 1,
“title”: “jquery”,
“content”: “jq 是一门非常好学语言”
},
{
“id”: 3,
“userId”: 2,
“title”: “html”,
“content”: “html 是一门非常好学语言”
},
{
“id”: 4,
“userId”: 3,
“title”: “css”,
“content”: “css 是一门非常好学语言”
}
],
“comments”: [
{
“id”: 1,
“postId”: 1,
“content”: “good”
},
{
“id”: 2,
“postId”: 3,
“content”: “better”
},
{
“id”: 3,
“postId”: 4,
“content”: “best”
}
]
}
原生 AJAX 具体用法
GET 允诺
通常在一次 GET 允诺过程中，参数传递都是透过 URL 门牌号中的 ? 参数传递。
一般在 GET 允诺中，无需设置允诺头
无需设置积极响应体，能传 null 或是干脆不传
var xhr = new XMLHttpRequest();
// 推送 GET 允诺
xhr.open(“GET”, “http://localhost:3000/users?age=19”);
xhr.send(null);
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText);
}
}
POST 允诺
POST 允诺过程中，都是选用允诺体承载需要递交的统计数据。
需要设置允诺头中的 Content-Type，以便于服务器端接收统计数据
需要递交到服务器端的统计数据能透过 send 方法的参数传递
var xhr = new XMLHttpRequest();
// post 允诺
xhr.open(“POST”,“http://localhost:3000/users”);
// 设置允诺头
// xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”); xhr.setRequestHeader(“Content-Type”,“application/json”);
// xhr.send(“name=lily&age=19&class=2”);
// xhr.send(`{
// “name”: “lulu”,
// “age”: 18,
// “class”: 2
// }`); xhr.send(JSON.stringify({
“name”: “harry”,
“age”: 18,
“class”: 1
}));
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText);
}
}
处理积极响应统计数据渲染
应用程序中拿到允诺的统计数据过后最常见的就是把那些统计数据呈现到界面上。
如果统计数据结构单纯，能间接透过字符串操作方式（拼接）的形式处理
但是如果统计数据过于复杂，字符串拼接维护成本太大，就不推荐了
能使用模版引擎或是 ES6 提供更多的模板字符串
var box = document.getElementById(“box”);
var xhr = new XMLHttpRequest();
// 推送 GET 允诺
xhr.open(“GET”, “http://localhost:3000/users”);
xhr.send(null);
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
var data = JSON.parse(this.responseText)
console.log(data);
var str = “”;
// 循环遍历数组
for (var i = 0 ; i < data.length ;i++) {
// 展开字符串拼接
// str += “<tr><td>” + data[i].id + “</td><td>” + data[i].name + “</td><td>” + data[i].age + “</td><td>” + data[i].class + “</td></tr>”; // 使用 模板字符串 展开拼接
str += `<tr>
<td>${data[i].id}</td>
<td>${data[i].name}</td>
<td>${data[i].age}</td>
<td>${data[i].class}</td>
</tr>`
}
box.innerHTML += str;
}
};
封装 AJAX 库
自己封装一个 AJAX 函数
这里主要是为了介绍封装的过程，一般情况在合作开发中都是使用第三方提供更多的 AJAX 库，因为它们可能更加严谨。
为了在后续的合作开发过程中能更方便的使用这套 API，一般的做法都是将其封装到一个函数中以便初始化。
// 封装自己的 Ajax 函数
/**
* 参数1：{string} method 允诺方法
* 参数2：{string} url 允诺门牌号
* 参数3：{Object} params 请求参数
* 参数4：{function} done 允诺完成后执行的回调函数
*/
function ajax(method, url, params, done) {
// 统一将方法中的字母转大写，便于后面判断
method = method.toUpperCase();
// 书写 IE 6 的兼容
var xhr = window.XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject(“Microsoft.XMLHTTP”);
// 将对象格式的参数转为 urlencoded的格式
var pairs = [];
for (var k in params) {
pairs.push(k + “=” + params[k]);
}
var str = pairs.join(“&”);
// 判断与否是 get 方法，需要更改 url 的值
if (method === “GET”) {
url += “?” + str;
}
// 创建打开一个连接
xhr.open(method, url);
var data = null;
// 如果是 post 方法，需要设置允诺头，还有允诺体
if (method === “POST”) {
xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
data = str;
}
xhr.send(data);
// 执行回调函数
xhr.onreadystatechange = function () {
if (this.readyState !== 4) return;
// 执行外部传进来的回调函数即可
// 需要用到积极响应体
done(JSON.parse(this.responseText));
}
}
// 初始化函数
ajax(“GET”, “http://localhost:3000/users”,{“id”: 1},function (data) {
console.log(data);
});
ajax(“POST”, “http://localhost:3000/users”,{“name”: “john”,“age”: 19,“class”: 2},function (data) {
console.log(data);
});
