这是我在博客园写的第一遍博客，之前都是只看不写，在园子里学到了不少的东西，现在也想着把自己的一些感悟写出来给大家分享一下。
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;
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")
| 
QQ群⑧：
窥视卡
雷达卡
发表于 2017-6-22 06:41:45
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡