1. 什么是AJAX？它又能做什么？
先来看看这个名称的构成：Asynchronous JavaScript and XML
顾名思义，也就是异步的javascript和XML，而XML 被设计用来传输和存储数据。所以也可以理解为异步的请求数据。
来看看度娘给的答案：
- AJAX 不是一门编程语言，是一种用于创建快速动态网页的技术(方法)
- AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
- AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
因为经常使用 jQuery 来做请求的原因，经常会把 AJAX 理解为是jQuery独有的东西，其实完全不是，AJAX和jQuery是两个东西，只不过是jQuery对其做了封装而已。
2. AJAX能做什么？
在传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
可以创建一个 form 表单模拟一下，当点击 submit 提交表单的时候，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。
如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。也就是以回调函数的形式，进行一个异步的操作，例如点击 submit 按钮，页面并未刷新，等数据返回成功之后，直接渲染到页面。
通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。也就是我们常说的局部刷新。-----这就是AJAX的作用
2. AJAX怎么用？
来看看如何实现一个AJAX：
XMLHttpRequest对象是 AJAX 的基础。
XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。-
所以首先要创建一个
XMLHttpRequest对象// 第一步：创建一个 XMLHttpRequest 请求 var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } console.dir(xmlhttp );// 看一下 XMLHttpRequest 对象都有哪些东西在控制台，先看一下
XMLHttpRequest对象都有哪些东西：
XMLHttpRequest
XMLHttpRequest对象及其原型上有很多属性和方法，看看这些属性和方法如何构成一个异步请求：-
向服务器发送请求 --------
open()和send()
XMLHttpRequest对象中open()和send()方法是用来向服务发送请求的-
open()：规定请求的类型、URL以及请求方式
语法：open(method,url,async)
参数说明：-
method：请求的类型，GET或POST
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 无法使用缓存文件(需要更新服务器上的文件或数据库（GET请求可能会请求缓存文件，状态码304）)
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠 -
url：文件在服务器上的位置，也就是请求的路径 -
async：请求的方式，true(异步)或false(同步)，默认为true；
一定要考虑好什么情况下才设置为false，因为false状态为同步状态，在请求过程中，浏览器将停止响应，直到AJAX请求完成。
-
了解了如何发送请求之后，我们来通过创建的
XMLHttpRequest对象来发送一个请求// 第二步：发送请求 xmlhttp.open('GET', '/data/test.txt', true); // 这里请求的是一个本地的文件 xmlhttp.send(); -
-
处理服务器响应-----当请求发送到服务器以后，服务器会做出响应，需要执行一些基于这些响应的任务。
XMLHttpRequest对象的三个重要的属性：-
onreadystatechange：响应的回调函数，每当readystate发生变化时，都会执行该函数 -
readystate: 存有 XMLHttpRequest 的状态信息，是指运行请求所经历的过程，无论访问是否成功都将响应的步骤。从 0 到 4 发生变化。- 0：请求未初始化
- 1：服务器连接已建立
- 2：请求已接收
- 3：请求处理中
- 4：请求已完成
-
status: HTTP状态码，无论请求是否成功，都会返回。由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码。（由1-5开头的三位数字组成）- 1xx：信息响应类，表示接收到请求并且继续处理
- 2xx：处理成功响应类，表示动作被成功接收、理解和接受
- 3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理
- 4xx：客户端错误，客户请求包含语法错误或者是不能正确执行
- 5xx：服务端错误，服务器不能正确执行一个正确的请求
常见的http状态码：
-
200：请求成功 -
304：该资源在上次请求之后没有任何修改，表示使用的为缓存文件，请求方式为GET的时候需要注意 -
400：无法找到请求资源 -
401：访问资源的权限不够 -
403：没有权限访问资源 -
404：请求路径错误，需要访问的资源不存在 -
405：需要访问的资源被禁止访问 -
407：访问的资源需要代理身份验证 -
414：请求的URL过长 -
500：服务器内部错误
更多状态码信息说明：http://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html
-
-
接收服务器响应
responseText和responseXML属性接受服务器响应-
responseText:获得字符串形式的响应数据。 -
responseXML:获得 XML 形式的响应数据。
知道了如何处理服务器响应及接收服务器响应之后，我们来处理并接收服务器响应
// 第三步：处理服务器响应 xmlhttp.onreadystatechange = function (){ // 判断请求是否已经完成 if (xmlhttp.state === 4){ // 判断请求是否成功 if (xmlhttp.status === 200) { // 第四步：接收服务器响应 // 将返回的数据渲染在DOM中 document.getElementById('test').innerText = request.responseText; } else { // 如果请求不成功，输出状态码，根据状态码判断错误原因 console.log(xmlhttp.status); } } }/data/test.txt中的数据为字符串： Hello AJAX!
查看页面数据渲染的结果，(需要启动一个本地web服务，这里使用的是live-server)：
渲染结果
至此，一个完整的原生AJAX就出来了。 -
-
