Ajax与HTTP协议

AJAX

实现Ajax的标准方法是直接使用XMLHttpRequest（XHR）对象，也可以使用Ajax的封装库如Prototype或jQuery。

手动的创建XHR对象：

if (window.XMLHttpRequest) {
　　xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {// 一般IE
　　xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}

调用XHR对象的open方法，“GET”方式请求URL：’

xhr.open(
　　“GET”,
　　“my-dynamic-content.jsp?id=”
　　+encodeURI(myId),
　　true
);

回调方法来处理响应：

xhr.onreadystatechange = function(){
　　processReqChange(req);
}

发送请求：

xhr.send(null);

XHR对象的全部细节（方法）如下：

　　方法open(method, url, async)，打开一个URL连接，method为HTTP请求方式（POST/GET...），url为HTTP请求的URL路径，async为是否创建一个异步请求（true/false）。

　　方法onreadystatechange，声明一个方法对象（function Object）作为回调方法，类似于浏览器事件模型中的onclick、onload方法。　

　　方法setRequestHeader(namevalue)，设置HTTP请求的请求头。

　　方法send(body)，发送请求体，可以是字符串。

　　方法abort()，停止XHR对象监听HTTP响应。

　　方法readyState，响应（response）生命周期的阶段状态，只有send方法被调用之后状态值被填充或者类似于被set给readyState。

　　方法httpStatus，HTTP返回code，整数，只有响应达到被加载（返回到页面）状态时才会被填充code值如404等。

　　方法responseText，响应体（Javascript字符串），只有响应达到interactive状态时才会设置响应体。

　　方法responseXML，响应体（XML文档对象），只有响应达到interactive状态时才会设置响应体。

　　方法getResponseHeader(name)，通过名字读取响应头。

　　方法getAllResponseHeaders()，获取所有响应头名字的数组。

HTTP协议　

　　HTTP是一个没有状态的（不会记住或存储上一次的HTTP过程的状态）请求-响应（request-response） 协议。

　　

　　请求和响应都包含请求头或响应头header和可选的请求体或响应体body（自由的文本）。

　　只有POST请求包含一个body。

　　一个请求定义一个动作或方法（POST/GET...）。

　　请求和响应的Mime类型可以通过header中的Content-type进行设置。
常用的HTTP请求方式（99%的时间只需要使用POST和GET）

　　GET：严格的说，GET只用于获取数据，而不会使web服务器（中的数据）发生变化。GET请求不包含请求体body，请求参数包含在URL的请求字符串中。

　　POST：用于更新web服务器上的数据，通过请求体body传递参数或数据（data）；

　　REST风格的Web Service，通常使用HTTP verbs来映射CRUD操作：

　　　　PUT -- Create -- 对域模型(domain model)添加一个新的对象实例。

　　　　GET-- Read-- 从web服务器获取已经存在的域模型对象。

　　　　POST-- Update-- 更新已经存在的域模型对象。

　　　　DELETE-- Delete-- 从域模型中删除一个已经存在的对象。

常用的MIME类型

　　application/x-wwwform-urlencoded ：经过编码的键值对请求字符串（body），web服务器需要解码字符串获得参数。　　

　　text/xml,application/xml：Body是XML文档。

　　text/plain：普通文本。

　　text/html, text/xhtml：Body是(X)HTML内容，web服务器端发送的标准web页面或内容片段。

　　text/javascript：Body是一段JavaScript代码。　

　　image/png, image/jpeg, image/gif：Body是二进制图像。

 处理HTTP响应

xhr.onreadystatechange=function(){
　　if (xhr.readyState==4){
　　　　if (xhr.status==200){
　　　　　　parseResponse(xhr);
　　　　}else{
　　　　　　//handle the HTTP error...
　　　　}
　　};
};

XHR对象的ReadyState值：

　　0 -- 未初始化 -- 请求还未被发送

　　1 -- 加载中 -- 响应还未到达（浏览器）

　　2 -- 加载完成 -- 可以读取响应头了

　　3 -- 活动的（Interactive） -- 响应体Body不完整，但是可以被读取

 　  4 -- 完成 -- 响应体Body是完整的

 处理HTTP响应---parseResponse(xhr)

 　　如果响应为HTML代码如：

<table class=’item selected’>
<tr>
<td rowspan=’3’ valign=’top’><div
class=’itemIcon’><img
src=’../images/kmoon.png’></div></td>
<td class=’itemTitle’>The Moon on a
Stick</td>
</tr>
<tr>
<td valign=’top’>What every project
manager wants - and they want it
yesterday!<br/><br/><i>NB: Stick not
included.</i></td>
</tr>
<tr>
<td><div class=’price’>$365.00</div></td>
</tr>
</tr>
</table>

　　处理函数如（往id为myDiv的div中插入上述返回的HTML）：

function parseResponse(xhr){
　　var div=document.getElementById(“myDiv”);
　　div.innerHTML=xhr.responseText;
}

　　如果响应为JSON格式的数据如：

{
　　imgSrc: “kmoon.png”,
　　title: “The Moon on a Stick”,
　　　　description: “What every project
　　　　manager wants - and they want it
　　　　yesterday!<br/><br/><i>NB: Stick not
　　　　included.</i>”,
　　price: “365.00”
}

　　处理函数如：

function parseResponse(xhr){
　　var jsonObj=eval(“(“+xhr.responseText+”)”);
　　setImgSrc(jsonObj.imgSrc);
　　setTitle(jsonObj.title);
}

　　如果响应为XML文档或片段如：

<item imgSrc=”kmoon.png” price=”365.00”>
　　<title>The Moon on a Stick</title>
　　<description><![CDATA[What every project manager wants - and they want it yesterday!<br/><br/><i>NB: Stick not included.</i>]]></description>
</item>

　　处理函数（还有其它方式解析XML，略）如：

function parseResponse(xhr){
　　var xmlDoc=xhr.responseXML;
　　var item=xmlDoc.getElementsByTagName(‘item’)[0];
　　var imgSrc=item.getAttribute(‘imgSrc’);
　　var title=item.getElementsByTagName(‘title’)[0].firstChild.data;
　　setImgSrc(imgSrc);
　　setTitle(title);
}

一些流行的Ajax工具（js库）

　　Prototype  Scriptaculous  dojo  Yahoo User Interface (YUI)  Ext  sarissa  Mochikit  jQuery  MooTools  Ruby on Rails（Server端）GWT 

　　Prototype创建Ajax请求：

new Ajax.Request(
　　“my-dynamic-content.jsp”,
　　{ 
　　　　method: “post”,
　　　　params: { id: myId },
　　　　onComplete: function(response){
　　　　　　parseResponse(response);
　　　　}
　　}
);

　　jQuery创建Ajax请求：

$.post(
　　“my-dynamic-content.jsp”,
　　{ id: myId },
　　function(xhr){
　　　　parseResponse(xhr);
　　}
);