课程名称：ajax&fetch 讲师：Alex 课程链接：https://class.imooc.com/lesson/2137#mid=50794
一、什么是Ajax
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。
传输的数据可以是text纯文本，但是更常用的是xml，现在我们最经常使用就是json。
二、同步交互和异步交互
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
三、Ajax的应用场景
搜索引擎的关键字提示，使用的就是ajax技术，在我们输入一些文字之后，它就会把相近的词汇提示出来供我们选择使用。这个过程整个页面没有刷新，只是刷新页面中的局部位置。而且请求发出以后，浏览器还可以进行其他的操作，无需等待服务器的响应。
还有一些网站的判定用户名已经存在的提示，也是使用的ajax技术。当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为zhangSan的用户是否存在，最终服务器返回true表示名为zhangSan的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。整个过程中页面没有刷新，只是局部刷新了；在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作。
五、Ajax的四步操作
第一步 创建XMLHttpRequest对象
ajax其实只需要学习一个对象：XMLHttpRequest，如果掌握了它，就掌握了ajax。
如何得到这个对象呢？
大多数浏览器，可以通过：var xmlHttp = new XMLHttpRequest();
第二步 打开与服务器的连接
我们使用xmlHttp.open()：用来打开与服务器的连接，它需要三个参数：
请求方式：可以是GET或者POST；
请求的URL：指定服务器端资源，例如/xxx/AServlet；
请求是否为异步：如果为true表示发送异步请求，否则为同步请求。
例如：
xmlHttp.open("GET", "/day23_1/AServlet", true);
第三步，发送请求
这一步很简单，就是执行发送函数。
xmlHttp.send(null);
但是注意这里要给一个参数null，如果不给参数可能会造成部分浏览器无法发送。
参数其实就是请求体内容。如果是GET请求，必须给出null。如果是POST，这里我们先不做讨论。
第四步 处理请求 得到响应
这一步我们需要一些知识点作为前导：
在xmlHttp对象的一个事件上注册一个监听器：onreadystatechange
xmlHttp对象一共有5个状态：
0：表示刚创建，还没有调用open()方法
1：表示请求开始，调用了open()方法，但是没有调用send()方法
2：调用完了send()方法
3：服务器已经开始响应，但是不再表示响应结束了
4：服务器响应结束了。（通常我们只关心这个状态）
怎么得到xmlHttp对象的状态呢？我们可以使用属性var state = xmlHttp.readyState，它的值可能是0 1 2 3 4 。
得到服务器的响应状态码，使用var status = xmlHttp.status;，例如是200 404 500
得到服务器响应的内容
可以使用var content = xmlHttp.responseText;得到的是服务器的响应的文本格式的内容
也可以使用var content = xmlHttp.responseXML，这样得到的是服务器的响应的xml响应的内容，它是一个document对象
这样我们可以形成如下的代码用来处理我们需要响应的内容：
// xmlHttp的5种状态都会调用本方法，但是我们通常只关心4状态
xmlHttp.onreadystatechange = function() {
// 双重判断，判断是否为4状态，并且判断是否为200
if (xmlHttp.readystate == 4 && xmlHttp.status == 200) {
// 获取服务器的响应内容
var text = xmlHttp.responseText;
...
...
}
}
随时随地看视频
