开发者学堂课程【Ajax 前端开发入门与实战：Ajax 中4个步骤的讲解】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/595/detail/8524
Ajax 中4个步骤的讲解
目录：
第一、 使用场景
第二、 创建 XMLHttpRequest 对象
第三、 准备发送
第四、 执行发送
第五、 设置回调函数
一、 使用场景
Ajax 使用场景仅仅是在当前界面进行服务器数据的访问，然后进行局部的刷新，而并不是做整个界面的跳转，相当于通过以下代码来获取到 "checkUsername.php? 界面当中所拥有的的数据：
var xhr = new XMLHttpRequest();
xhr.open("get" , "checkUsername.php?username=" + username,true);
xhr.send(null);
xhr.onreadystatechange = function(){
var result = xhr.responseText;
console.log(result);
document.getElementById( "result").innerText =
result;
它的含义类似于模拟了一个地址栏的 url 的请求，然后的到一个数据做当前界面的局部刷新，相当于进行了一个地址栏的跳转，实际上是没有跳转的，只是在当前界面进行服务器的一个请求。
二、 创建 XMLHttpRequest 对象
只需通过“new”这个关键字就可以把对象创建出来，在如下这个步骤“var xhr = new XMLHttpRequest();”中需要注意的是，对于一些低版本的浏览器，它里面可能是没有“XMLHttpRequest”这个对象的定义，特别是IE浏览器，IE6就没有这个对象，所以需要做一个兼容的处理。
先做一个能力的测试，先看 window 下面有没有“XMLHttpRequest”这个对象，如果有，在进行“new” 这样一个操作，所以把变量改为“null”并重新“new”一个“XMLHttpRequest”对象，否则就代表是IE6这个浏览器；
如果没有，就换一种固定的写法，重新“new”一个“ActiveXObject”对象进行服务器的一个请求，在需输入一个“Microsoft.XMLHTTP”字符串，这个步骤仅仅只针对与 IE6 及以下版本浏览器使用。
具体代码如下：
var xhr = null;
if(window . XMNLHttpRequest) {
xhr = new XNLHttpRequest();
} else {
//IE6 浏览器
xhr = new Activexobject("Microsoft.XMLHTTP");
三、 准备发送
在发送这个请求之前需要把条件准备好，1是“get”请求和“post”请求“get”有“get”的请求方式，“post”有“post”的请求方式。如何知道是“get”还是“post”请求，取决于需要访问的接口文件，这是后台人员已经写好了的.“$uname = $_GET[“username”];”
如上述代码所示，是通过“$_GET”来获取参数的值。
2是需要请求的地址，由于在这里使用的是“get”请求，所以在地址栏上需要用“？”进行连接所以的参数，如果有多个参数用“&”符号进行连接，地址栏需要携带参数。
3是同步过异步的表示方式，通常情况下是可以不写的，不写代表异步，写了代表同步，“fasle”代表同步，“true”代表异步，
具体代码如下：
xhr.open("get" , "checkUsername.php?username=" + username,true);
四、 执行发送
准备完条件之后就可以执行发送，需要获取到“checkUsername.php”的提供出来的echo出来的字符串的数据，由于准备发送用的是“get”请求，所以执行发送中的“send”请求用的是“null”方法。
准备发送中“get”请求变成了“post”请求，后端也应变成“post”请求，在实际开发中，后端是已经写成的，它是“get”请求就是“get”请求，它是“post”请求就是“post”请求，直接调用即可。对于“post”请求和“get”请求，他们是有差别的。
“get”请求是在“url”后面的，而“post”请求是在请求体当中的。所以“post”请求中地址栏中是不带参数的，“post”请求中的请求体是在“send”方法后的参数中的，重新定义一个“param”方法，再放入“send”方法的后面，
在设置一个 xhr 的请求头：
xhr.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);”，
如果是“get”请求就直接跟在 url 后面，用一个“send now”就行了，这就是“get”与“post”请求的区别。
具体代码如下：
var param = "username=” + username;
//对于post请求来说的话,我们的参数应该放到请求体中
//设置xhr的请求头信息，这个步骤仅仅是针对于post请求才有的
xhr.setRequestHeader( "Content-type" , "application/x-www-form-urlencoded")
;xhr.send(param);
五、 设置回调函数
由于服务器请求数据会比较慢，所以事先准备好方法，
如下：
xhr.onreadystatechange = function(){}
var result = xhr.responseText;
console.log(result);
document.getElementById("result").innerText = result;
给“onreadystechage”进行赋值，将会得到回调
但具体代码不完整，
应加上“if(xhr.readyState == 4){”这个“==4”代表状态是正确的，“if(xhr.status == 200){”,这个“==200”代表服务器响应正常，在以上这两个“if”的包装下,才能得到正确的数据。
所以得到两个条件结论：
1. “xhr.readyState == 4”代表xhr的状态正确。
2. “xhr.status”代表服务器所返回的状态，一般这两个写法都是非常固定的。
然后通过“responseText”得到echo出来的字符串，得到“responseText”然后做当前页面的刷新。
“document.getElementById(“result”).innerText = result”;是局部页面的刷新。
代码实现效果如下图所示：
