浅谈AJAX的基本原理和原生AJAX的基础用法

一、什么是AJAX？　

　　AJAX，即“Asynchronous Javascript And XML”，翻译为异步的JavaScript和XML，是一种创建交互式网页应用的网页开发技术。2001年，Goolge公司为Google浏览器新加了“Google Suggest”功能，不同于传统网页，用户可以在浏览网页的同时，从服务器端获取更新后的搜索建议。Goolge将其命名为AJAX，它的目标就是实现在无刷新、无提交的情况下，页面内容进行局部更新。简简单单一句话就能概括的目标，实现的效果却非常棒！大家都知道，传统页面向服务器发起请求后，到客户端接收到响应消息的这段时间是白白浪费的，只能等到接收完响应才能继续运行。而这十分影响用户的体验以及网页加载效率。

　　因此，基于同步请求如此大的弊端，Google开始研究这方面的优化问题，能否找到一个方法，在服务器执行客户端请求时，浏览器依旧工作。终于Google在浏览器底层找到了一个XMLHttpRequest对象能向服务器发起异步请求(Goolge就是厉害呀~~)，这是一个各大浏览器创建时底层都已写好的一个对象。通过它就可以在客户端向服务器发起异步请求，说到底其实就是利用js向服务器发起请求，而不是传统意义上的表单提交或者URL后加问号键值对跳转。

二、原生AJAX用法

　　聊完了AJAX的来源和定义，我们再来简单的聊一聊它的原生代码。

　　1、获取XHR对象

　　　　首先，你的把它写在js中(这不是废话吗)，通过new的方法来获取一个xhr对象(即XMLHttpRequest对象)。

　　　　　　即 var xhr = new XMLHttpRequest();

　　　　一般来说，AJAX都是用在事件中，毕竟无端端的浏览器干嘛去发起请求，一定是用户有了需求，触发了事件。即便是异步请求初始化的网页，也是存在加载事件onload的。

　　2、XHR对象的常用属性

　　　　(1)、readyState

　　　　表示XHR的当前状态，即请求-响应过程进行到了哪一步。取值有5个：

　　　　　　0——(默认值)UNSENT，请求消息尚未发出；

　　　　　　1——OPENED，XHR和服务器之间的连接已打开；

　　　　　　2——HEADERS_RECEIVED，XHR已经接收到了响应消息的头部，也就意味着既然响应头已经接收到了，响应起始行也早就接收完毕。

　　　　　　3——LOADING，XHR正在加载响应主体，正如它的单词是一个进行时，在这个状态下的响应主体是不断加载的，并未加载完成。

　　　　　　4——DONE，XHR接收完毕响应消息。

　　　　这是XHR至关重要的一个属性，它的值只能依次递增，不能跳着加，也不能后退。它根据响应过程的变化，自动改变值，不允许手工赋值。可以通过它知道你的请求消息是否成功发出。

　　　　(2)、status

　　　　默认值为0，响应消息状态码，只有当xhr.readyState的值变为2时值才会变化。因为只有当xhr.readyState的值走到2时，才会接受到响应起始行。

　　　　(3)、statusText

　　　　默认为空，响应起始行中的原因短句，也只有当xhr.readyState变为2时才有值。

　　　　(4)、responseText

　　　　默认为空，响应消息的主体内容，当xhr.readyState的值变为3时开始有值，到4时稳定下来。这是XHR里一个很重要属性。客户端接收到自服务器传回的“结果”全在这个属性值里。

　　3、XHR的常用方法

　　　　(1)、open()

　　　　打开到服务器的连接。具体用法为xhr.open(method,url,isAsyn);

　　　　method即请求方法(常用的是"POST"、"GET")，url即请求服务器文件的路径，isAsyn(是否异步)现在统一默认只写true。

　　　　(2)、send()

　　　　发送请求消息。具体用法：看你的请求方法中是否包含请求主体，如包含则其中参数填入请求主体内容，不然则写null。

　　　　(3)、setRequestHeader()

　　　　设置请求消息头部。具体用法：setRequestHeader(name,value),name即请求头中的属性名，value则是它的值。

　　　　(4)、getResponseHeader()

　　　　获取响应消息头部。它就一个参数，name，即你想获得的响应头中的属性名。

　　　　(5)、getAllResponseHeaders()

　　　　获取所有响应头，没有参数。

　　4、使用XHR发起异步请求的步骤　　

　　5、XHR能接受到的五种响应

　　　　(1)、text/plain

　　　　接收到的普通的文本信息。客户端可以根据接收到的文本内容的不同，做出不同操作。

　　　　(2)、text/html

　　　　接收到的由HTML标签组成的片段。可加入页面中。

　　　　(3)、application/javascript

　　　　以PHP为例，在PHP解释器眼中，js代码只是一段普通字符串。而当这段字符串被客户端接收后，必须调用全局函数eval()才能正常使用。

　　　　(4)、application/xml

　　　　其实在2005年出现JSON后，在前端领域，XML已经被完全替代了。因为它和JSON比起来，实在太过于繁琐，关于XML的具体用法，我就不在这详谈。只需要知道一点，W3C DOM标准三大组成部分，核心DOM、HTML DOM和这最后的XML DOM。

　　　　(5)、application/json

　　　　JSON终于出现了，同样是从服务器端批量传递复合数据回客户端，但它使用简单，易于阅读且高效。它的全名叫：JavaScript Object Notation(js对象标记),本质是一种轻量级的字符串数据格式。由[]或者{}括起来，要么是一个数组，要么是一个对象。对象中可以包含多个键值对，每个键及每个值必须用""引起来。

三、结语

　　AJAX本质上并不是一个很难的东西，只是可能它的涉及知识面有些广，是一个对HTML、CSS、JavaScript、HTTP协议的综合应用(这里我们先不谈服务器端)。只要你对这四个方面都有一定的了解和理解，特别是当配合上JQuery时，用起来十分简单。

　　这是我第一次写博客，虽然是一篇短短的随笔，但内心特别激动。有人可能不太熟悉HTTP协议以及XML，那看的会有些吃力，以后关于这俩个方面我也会写一些自己的心得体会。