AJAX原理及其应用
本文将对Ajax的工作原理、XMLHttpRequest对象的属性、方法和事件进行分析，并通过JSONPlaceHolder为例，进一步阐述Ajax及XMLHttpRequest对象的用法。
AJAX原理分析
什么是AJAX？
AJAX(Asynchronous JavaScript and XML)=异步JavaScript和XML
AJAX不是一种编程语言，而是现有的一种标准技术方法。
AJAX实现了在不刷新个页面的情况下，进行用户与服务器的异步交互，完成对页面的部分更新。
AJAX最大的特点就在于异步交互和局部刷新
在了解AJAX的工作原理之前，先让我们熟悉一下异步交互和同步交互的特点吧(￣▽￣)~*
同步和异步
同步交互
首先用户向服务器提交一个HTTP请求，服务器收到这个请求后，接着会处理这个请求，处理完成后，服务器对请求进行相应，将结果返回给客户端，将界面进行更新。一般来说，界面会得到新的内容或者是更加丰富的CSS相应效果。但是在整个服务器处理请求的过程中，用户是不能进行其他操作的，只能等待页面刷新。这也是同步交互中最让诟病的问题
异步交互
在上述的交互过程中，用户不需要等待服务器返回结果，也可以进行其他的操作，随时可以再发送下一个请求，即不需要等待。这就是异步。异步不用等所有操作等做完，就相应用户请求。充分的利用了服务器响应的时间，给用户更好的体验。
AJAX工作原理
AJAX的核心思想就是异步，相当于在浏览器与服务器之间增加了一个中间层（AJAX），简单来说AJAX就是充当了介于用户与商家之间的快递员，使得用户请求与服务器异步化。
AJAX核心技术有 JavaScript、XMLHTTPRequest、DOM 对象。
AJAX通过XMLHttpRequest对象向服务器发送异步请求，发送请求到服务器响应并返回数据的过程中，用户可以继续与网页交互，而不会陷入请求等待。服务器返回数据后，再用JS函数根据数据对DOM操作更新部分页面。
XMLHttpRequest
XMLHttpRequest对象是AJAX的核心机制，是实现异步交互的核心组件，所有请求的发送和响应的接收都依靠XMLHttpRequest对象所提供的属性、方法及事件。
常见的XMLHttpRequest属性
常见的XMLHttpRequest方法
常见的XMLHttpRequest事件
Ajax及XMLHttpRequest对象的用法
下面将以JSONPlaceHolder为数据服务，编写案例，阐述AJAX以及XMLHttpRequest对象的用法。在此之前，我们先来一起梳理一下发送一个Ajax请求的一般步骤（不考虑IE兼容性）
AJAX请求步骤
1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2.事件处理函数
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4 || httpRequest.status == 200) {
//请求成功
document.getElementById("item").innerHTML = "请求成功";
} else {
//请求失败
document.getElementById("item").innerHTML = "请求失败";
};
};
3.发送请求
xhr.open("Get", "https://jsonplaceholder.typicode.com/users",true);
xhr.responseType = "json"; //设置返回类型为JOSN
xhr.send();
大致的过程就是这样，接下来以实例来展示如何进行使用。
使用GET方法获取数据
<body>
<input type="button" onclick="gets()" value="点击获取信息" />
<div id="get" style="white-space: pre-line"></div>
</body>
<script>
var gets = function () {
var xhr = new XMLHttpRequest();
var url = "https://jsonplaceholder.typicode.com/posts/1";
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
console.log(this.response);
//将JSON字符串转化为对象
var data = JSON.parse(xhr.response);
var oneList = `userId:${data.userId}
id:${data.id}
title:${data.title}
body:${data.body}`;
document.getElementById("get").innerHTML = oneList;
}
};
xhr.open("GET", url, true);
xhr.send();
};
</script>
当按下按钮时，便会执行GET请求，效果如下图所示：
使用POST方法提交表单
<body>
<form name="form1" id="form1">
<input type="text" name="userId" value="11" />
<input type="text" name="id" value="101" />
<input type="text" name="title" value="i got go" />
<input type="text" name="body" value="it will be good" />
<input type="button" onclick="posts()" value="点击提交信息" />
</form>
<div id="posts" style="white-space: pre-line"></div>
</body>
<script>
var posts = function () {
//获取表单数据
var formData = new FormData(document.getElementById("form1"));
var xhr = new XMLHttpRequest();
console.log(formData);
var url = "https://jsonplaceholder.typicode.com/posts";
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 201) {
console.log(xhr.response);
console.log(typeof xhr.response);
}
};
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/json");
xhr.responseType = "json";
xhr.send(JSON.stringify(formData));
};
</script>
使用PUT方法更新资源
<body>
<form name="form1" id="form1">
<input type="text" name="userId" value="11" />
<input type="text" name="id" value="101" />
<input type="text" name="title" value="i got go" />
<input type="text" name="body" value="it will be good" />
<input type="button" onclick="Put()" value="点击更新信息" />
</form>
</body>
<script>
var Put = function () {
var formData = new FormData(document.getElementById("form1"));
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
var url = "https://jsonplaceholder.typicode.com/posts/1";
// 注册请求状态变化事件处理函数
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
// 初始化请求
xhr.open("PUT", url);
// 设置请求头
xhr.setRequestHeader("Content-Type", "application/json");
// 发送请求
xhr.responseType = "json";
xhr.send(JSON.stringify(formData));
};
使用DELETE方法删除资源
<body>
<input type="button" onclick="deleteData()" value="点击删除信息" />
</body>
<script>
var deleteData = function () {
var xhr = new XMLHttpRequest();
var url = "https://jsonplaceholder.typicode.com/posts/1";
// 注册请求状态变化事件处理函数
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.open("DELETE", url);
xhr.send();
};
</script>
以上便是对AJAX及其XMLHttpRequest的分析及其应用，其实通过XMLHttpRequest进行网络请求,这种方式已经有点老旧了，但是我们仍然有必要了解Ajax请求的核心过程，后续基于原生Ajax的框架虽然封装了内部细节使用更方便，但是其核心步骤还是一样的。新人学习，如有错误，请在评论区补充Thanks♪(･ω･)ﾉ
