-
概述
AJAX即asynchronous javascript and XML，中文翻译是异步的javascript和XML。是指一种创建交互式网页应用、用于创建快速动态网页的开发技术。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
而AJAX通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
ajax包括以下几步骤：
1、创建AJAX对象
2、发出HTTP请求
3、接收服务器传回的数据
4、更新网页数据
概括起来，就是一句话，ajax通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理.
尽管名称如此，XMLHttpRequest 也可以用于获取任何类型的数据，而不仅仅是XML，它甚至支持HTTP以外的协议（包括 file:// 和 FTP）。
XMLHttpRequest对象创建和使用
-
创建
XMLHttpRequest对象是AJAX的核心技术，这是由微软首先引入的一个特性。
IE5是第一款引入XHR对象的浏览器。
在IE5中，XHR对象是通过MSXML库中的一个ActiveX对象实现的，而IE7+及其他标准浏览器都支持原生的XHR对象
1 var xhr;
2 if(window.XMLHttpRequest){
3 xhr = new XMLHttpRequest();
4 }else{
5 xhr = new ActiveXObject('Microsoft.XMLHTTP');
6 }
-
初始化请求
创建好之后使用open方法初始化一个请求
1 open(method: string, url: string): void; 2 open(method: string, url: string, async: boolean, username?: string | null, password?: string | null): void;
参数
method- 要使用的HTTP方法，比如「GET」、「POST」、「PUT」、「DELETE」、等。对于非HTTP(S) URL被忽略。
url- 该URL相对于执行代码的当前页面，且只能向同一个域中使用相同端口和协议的URL发送请求。如果URL与启动请求的页面有任何差别，都会引发安全错误
async可选- 一个可选的布尔参数，默认为
true，表示要不要异步执行操作。如果值为false，send()方法直到收到答复前不会返回。如果true，已完成事务的通知可供事件监听器使用。如果multipart属性为true则这个必须为true，否则将引发异常。user可选- 可选的用户名用于认证用途；默认为
null。password可选- 可选的密码用于认证用途，默认为
null。-
发送请求
发送请求使用的是send方法
send(body?: Document | BodyInit | null): void;
如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回
1.GET方法，send()方法无参数，或参数为null；
2.POST方法，send()方法的参数为要发送的数据（ Blob | BufferSource | FormData | URLSearchParams | ReadableStream<Uint8Array> | string）一般为FormData.
注：没有设置头部信息的话，会默认发送带有
"* / *"的Accept头部。-
接收响应
上边几个步骤设置完以后就可以接收服务器响应回来的数据
一个完整的HTTP响应由状态码、响应头集合和响应主体组成。在收到响应后，这些都可以通过XHR对象的属性和方法使用
属性有
responseText 作为响应主体被返回的文本(文本形式)，如果请求未成功或尚未发送，则返回 null。 responseXML 返回一个 Document，如果响应的内容类型是'text/xml'或'application/xml'，这个属性中将保存着响应数据的XML DOM文档，如果请求未成功、尚未发送或时不能被解析为 XML 或 HTML，则返回 null。 status 代表请求的响应状态 readyState 代表请求的状态码
在接收到响应后，第一步是检查status属性，以确定响应已经成功返回。
一般来说，可以将HTTP状态码为200作为成功的标志。
此时，responseText属性的内容已经就绪，而且在内容类型正确的情况下，responseXML也可以访问了。
此外，状态码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；当然，也意味着响应是有效的
无论内容类型是什么，响应主体的内容都会保存到responseText属性中，而对于非XML数据而言，responseXML属性的值将为null
1 xhr.onreadystatechange = function () { 2 if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){ 3 console.log(xhr.responseText); 4 }else{ 5 alert('request was unsuccessful:' + xhr.status); 6 } 7 if (xhr.readyState === 4) { 8 if (xhr.status == 200) { 9 console.log(xhr.responseText); 10 } 11 } 12 }这里要注意一下超时的问题
-
超时
XHR对象的timeout属性等于一个整数，表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止。该属性默认等于0，表示没有时间限制
如果请求超时，将触发ontimeout事件需要在send之后状态码改变之前使用
xhr.ontimeout = function () { console.log('The request timed out.'); } xhr.timeout = 1000;[注意]IE8-浏览器不支持该属性
-
最后
AJAX本身并不难，主要的就是有一部分内容涉及到网络方面的知识，所以导致学起来有一定的难度。
[注意]如果要建立N个不同的请求，就要使用N个不同的XHR对象。当然可以重用已存在的XHR对象，但这会终止之前通过该对象挂起的任何请求
HTTP协议有一个天生的缺陷：通信只能由客户端发起，因此HTTP协议做不到服务器主动向客户端推送信息
它的这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就必须采用轮询的方式。而轮询的效率低下且非常浪费资源，因为必须不停地连接或者让HTTP连接始终打开。此时，也就出现了WebSocket。之后会写一下WebSocket API的用法- 要使用的HTTP方法，比如「GET」、「POST」、「PUT」、「DELETE」、等。对于非HTTP(S) URL被忽略。
