首页 > 代码库 > ajax的来龙去脉
ajax的来龙去脉
这是我在博客园写的第一遍博客，之前都是只看不写，在园子里学到了不少的东西，现在也想着把自己的一些感悟写出来给大家分享一下。
ajax技术可以说是Web2.0应用程序的技术基础，尽管软件经销商和开源社区提供很多ajax的框架，但是我们仍然有必要理解ajax实现的来龙去脉。
首先要说的是HTTP请求，因为ajax是基于HTTP请求的，所以说ajax就必须要从HTTP请求说起。我们知道我们上网的过程就是浏览器和服务器进行文件传输的过程，而他们之间之所以能够进行传输文件肯定是遵守了一定的规范，而HTTP规范就是浏览器和服务器进行文件传输的规范之一。
HTTP（Hyper Text Transfer Protocol）超文本传输协议，它对浏览器向服务器的请求和服务器对浏览器的响应都进行了规范，所以HTTP主要包括请求和响应两部分。请求主要包括请求行，请求头和请求主体三部分。
这里需要注意的是，用get请求方式请求的时候请求的内容是拼接在URL后面的，而用post请求的时候，请求的内容是放在请求主体里面。还有就是用post请求方式进行请求的时候请求头里要设置Content-Type这个属性而用get请求的时候则不需要。
相对应的服务器向浏览器的响应包括了相应行，响应头和响应主体三部分
说完了HTTP请求，我们就可以来说一下Ajax技术了，ajax不是一种新的语言而是对现有技术的综合利用。本质是在HTTP协议的基础上以异步的方式与服务器进行通讯。而ajax就是Asynchronous JavaScript And XML 四个单词的缩写，Asynchronous是异步的意思，指某段程序执行时不会阻塞其他程序的执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。ajax利用一个构建到现代浏览器的一个内置对象 XMLHttpRequest对象来实现异步接收和发送HTTP请求和相应信息。
下面我们就结合实际代码来体会一下，ajax怎么实现与后代的数据相互的
=====get===== //设置请求行 xhr.open(‘get‘,‘02.php?name=zhang&age=18‘); //设置请求头 //get 不用设置 //post必须设置 //设置请求主体 //如果是get null post要把请求的内容放在里面 xhr.send(null); =====post==== //设置请求行 xhr.open(‘post‘); //设置请求头 //get 不用设置 //post必须设置 xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form- urlencoded‘); //设置请求主体 //如果是get null post要把请求的内容放在里面 xhr.send(‘02.php?name=zhang&age=18‘);
这样就利用XMLHttpRequest对象实现了一次浏览器向服务器的一次请求，下面就是处理响应
//监听响应状态的变化 xhr.onreadystatechange = function(){ if ( xhr.status == 200 && xhr.readyState == 4 ){ //当响应的状态为4 HTTP的状态为200的时候 处理响应的内容 } }
下面是XMLHttpRequest的一些响应的属性
当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态：一直等待直到请求被处理；然后，它才接收一个响应。这样以来，脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性，如表格1所示。
表格1.XMLHttpRequest对象的ReadyState属性值列表。
ReadyState取值 | 描述 |
0 | 描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。 |
1 | 描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。 |
2 | 描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。 |
3 | 描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。 |
4 | 描述一种"已加载"状态；此时，响应已经被完全接收。 |
onreadystatechange事件
无论readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变，该对象都将激活。
responseText属性
这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。
responseXML属性
此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应；此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。无论何时，只要readyState值不为4，那么该responseXML的值也为null。
其实，这个responseXML属性值是一个文档接口类型的对象，用来描述被分析的文档。如果文档不能被分析(例如，如果文档不是良构的或不支持文档相应的字符编码)，那么responseXML的值将为null。
status属性
这个status属性描述了HTTP状态代码，而且其类型为short。而且，仅当readyState值为3(正在接收中)或4(已加载)时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。
statusText属性
这个statusText属性描述了HTTP状态代码文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。
到这里Ajax的“A”和“J"已经说完了 现在还有一个X没有说，我们知道X是XML的意思，那么XML到底是什么东西呢，XML是一种标记语言，很类似HTML，其宗旨是用来传输数据，具有自我描述性（固定的格式的数据），下面的代码 是一个例子
<?xml version="1.0" encoding="UTF-8"?> ////一定要有一个root节点//root里面的东西可以自定义<root> <array> <item> <picture>apple</picture> <oldPrice>100</oldPrice> <newPrice>10</newPrice> </item> <item> <picture>apple</picture> <oldPrice>100</oldPrice> <newPrice>10</newPrice> </item> <item> <picture>apple</picture> <oldPrice>100</oldPrice> <newPrice>10</newPrice> </item> </array></root>
语法规则
1、必须有一个根元素
2、不可有空格、不可以数字或.开头、大小写敏感
3、不可交叉嵌套
4、属性双引号（浏览器自动修正成双引号了）
5、特殊符号要使用实体
6、注释和HTML一样
现在我们把ajax的四个单词都介绍完了，我们结合一个综合的案例用ajax把一个XML数据异步渲染在页面上,代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> table{ border-collapse: collapse; } td,th{ border: 1px solid #ccc; height: 50px; text-align: center; padding: 0 20px; }</style></head><body> <table> <thead> <tr> <th>图片地址</th> <th>原始价格</th> <th>折后价格</th> </tr> </thead> <tbody> </tbody> </table></body><script type="text/javascript"> //获取异步对象 var xhr = new XMLHttpRequest(); //设置请求头 xhr.open(‘get‘,‘03.php‘); //设置请求主体 xhr.send(null); //监听响应状态 xhr.onreadystatechange = function(){ if( xhr.readyState == 4 && xhr.status == 200 ){ //接收XML文件 //console.log(xhr.responseXML) var XMLDom = xhr.responseXML; //获取XML数据里面的内容 var items = XMLDom.querySelectorAll(‘item‘); var renderDom = document.querySelector(‘tbody‘); var renderHtml = ‘‘; for ( var i = 0; i < items.length; i++ ){ //遍历数据 获取每个数组里的内容 var item = items[i]; var picDom = item.querySelector(‘pic‘); var oldDom = item.querySelector(‘oldPrice‘); var newDom = item.querySelector(‘newPrice‘); //获取每个标签里的值 var pic = picDom.innerHTML; var old = oldDom.innerHTML; var ne = newDom.innerHTML; //把XML里面的数据值 拼接在HTML标签里 renderHtml += ‘<tr>‘; renderHtml += ‘<td>‘+pic+‘</td>‘; renderHtml += ‘<td>‘+old+‘</td>‘; renderHtml += ‘<td>‘+ne+‘</td>‘; renderHtml += ‘</tr>‘; } //渲染到页面上 renderDom.innerHTML = renderHtml; } }</script></html>
到现在整个Ajax的基本含义上面有了一个整体的解释，但是XMLHttpRequest在IE6以下的版本是没有提供的但是提供了一个ActiveObject("Microsoft.XMLHTTP")的属性，如果要兼容IE的早期的浏览器，要做一个简单的判断
if( window.XMLHttpRequest ){ var xhr = new XMLHttpRequest(); } eles { var xhr = new ActiveXObject("Micsoft.XMLHTTTP")
ajax的来龙去脉