首页 > 代码库 > Ajax
Ajax
1.什么是Ajax
现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.
2.不用刷新整个页面便可与服务器通讯的办法：
1)Flash
2)Java applet
3)框架：如果使用一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动整个页面
4)隐藏的iframe
5)XMLHttpRequest：该对象是对 JavaScript 的一个扩展，可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。
实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词
3.XMLHttpRequest的概述
XMLHttpRequest 最早是在IE5中以ActiveX组件的形式实现的。非 W3C 标准.创建XMLHttpRequest对象（由于非标准所以实现方法不统一）
Internet Explorer把XMLHttpRequest实现为一个ActiveX对象其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象。
XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。
4.不同的浏览器使用不同的方法来创建 XMLHttpRequest 对象。
Internet Explorer 使用 ActiveXObject。其他浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
例：
var XMLHttp=null;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
XMLHttp=new XMLHttpRequest()
}else if (window.ActiveXObject){
// code for IE6, IE5
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
代码解释：
首先创建一个作为 XMLHttpRequest 对象使用的 XMLHttp 变量。把它的值设置为 null。
然后测试 window.XMLHttpRequest 对象是否可用。在新版本的 Firefox, Mozilla, Opera 以及 Safari 浏览器中，该对象是可用的。
如果可用，则用它创建一个新对象：XMLHttp=new XMLHttpRequest()
如果不可用，则检测 window.ActiveXObject 是否可用。在 Internet Explorer version 5.5 及更高的版本中，该对象是可用的。
如果可用，使用它来创建一个新对象：XMLHttp=new ActiveXObject()
5.属性
1)readyState:HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。
状态:名称:描述
0:Uninitialized:初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1:Open:open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2:Send:Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3:Receiving:所有响应头部都已经接收到。响应体开始接收但未完成。
4:Loaded:HTTP 响应已经完全接收。
readyState 的值不会递减，除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。
每次 readyState 值的改变，都会触发 readystatechange 事件。如果把 onreadystatechange 事件处理函数赋给一个函数，
那么每次 readyState 值的改变都会引发该函数的执行。
readyState 值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把 readyState 的值统一设为 4
2)responseText:目前为止从服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。
如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。
如果 readyState 为 4，这个属性保存了完整的响应体。
如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，假定使用 Unicode UTF-8。
3)responseXML:对请求的响应，解析为 XML 并作为 Document 对象返回。如果响应体不是“text/xml”返回null。
4)status:由服务器返回的 HTTP 状态代码，
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)
在 XMLHttpRequest 对象中，服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较，
可以确保服务器是否已发送了一个成功的响应
如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。
5)statusText:这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。
也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。和 status 属性一样，
当 readyState 小于 3 的时候读取这一属性会导致一个异常。
6.事件句柄
1)onreadystatechange：每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时，它也可能调用多次。
该事件处理函数由服务器触发，而不是用户
在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。这依靠更新 XMLHttpRequest 对象的 readyState 来实现。
改变 readyState 属性是服务器对客户端连接操作的一种方式。每次 readyState 属性的改变都会触发 readystatechange 事件
7.方法
1)abort():取消当前响应，关闭连接并且结束任何未决的网络活动。
这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。
例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。
2)getAllResponseHeaders():把 HTTP 响应头部作为未解析的字符串返回。
如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。
头部作为单个的字符串返回，一行一个头部。每行用换行符 "" 隔开。
3)getResponseHeader():返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。
可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。
该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。
如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。
4)open():初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
5)send():发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
6)setRequestHeader():向一个打开但未发送的请求设置或添加一个 HTTP 请求。
8.各项介绍
1)XMLHttpRequest.open():初始化 HTTP 请求参数
语法:open(method, url, async)
XMLHttpRequest 对象的 open 方法允许程序员用一个Ajax调用向服务器发送请求。
method：请求类型，类似 “GET”或”POST”的字符串。
若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，
不过数据大小限制为2000个字符)。若需要向服务器发送数据，用POST。
在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。
如果对每个请求的响应不同，就会带来不好的结果。在此将时间戳追加到URL的最后，就能确保URL的唯一性，从而避免浏览器缓存结果。
url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
asynch：表示请求是否要异步传输，默认值为true。
指定true，在读取后面的脚本之前，不需要等待服务器的相应。
指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。
2)XMLHttpRequest.send():发送一个 HTTP 请求
语法:send(data)：
open 方法定义了 Ajax 请求的一些细节。send 方法可为已经待命的请求发送指令
data：将要传递给服务器的字符串。
若选用的是 GET 请求，则不会发送任何数据， 给 send 方法传递 null 即可：request.send(null);
当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null.
3)XMLHttpRequest.setRequestHeader()
语法:setRequestHeader(header,value)
当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。
首部信息用来声明一个请求是 GET 还是 POST。
Ajax 请求中，发送首部信息的工作可以由 setRequestHeader该完成
参数header： 首部的名字; 参数value：首部的值。
如果用 POST 请求向服务器发送数据，需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.
它会告知服务器正在发送数据，并且数据已经符合URL编码了。
该方法必须在open()之后才能调用
9.局限性
XmlHttpRequest不支持跨域访问，这是由网景公司(netscape)在开发浏览器时定义的同源策略导致的。
10.数据格式提要
在服务器端 AJAX 是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。
从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下 3 种格式返回数据：
XML
JSON
HTML
1)XML
①优点：
XML 是一种通用的数据格式。
不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。
利用 DOM 可以完全掌控文档。
②缺点：
如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么 responseXML 的值将是空的。
当浏览器接收到长的 XML 文件后， DOM 解析可能会很复杂
2)JSON
①JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。
JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。
每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。
②解析 JSON
JSON 只是一种文本字符串。它被存储在 responseText 属性中
为了读取存储在 responseText 属性中的 JSON 数据，需要根据 JavaScript 的 eval 语句。
函数 eval 会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执行。
因为 JSON 的字符串就是由 JavaScript 代码构成的，所以它本身是可执行的
var jsonstr = request.reponseText;
var json = eval("("+jsonstr+")");
JSON提供了json.js包，下载http://www.json.org/json.js后，使用parseJSON()方法将字符串解析成 JS 对象
var jsonstr = request.reponseText;
var json = jsonstr.parseJSON();
③优点：
作为一种数据传输格式，JSON 与 XML 很相似，但是它更加灵巧。
JSON 不需要从服务器端发送含有特定内容类型的首部信息。
④缺点：
语法过于严谨
代码不易读
eval 函数存在风险
3)HTML
①解析 HTML
HTML 由一些普通文本组成。如果服务器通过 XMLHttpRequest 发送 HTML， 文本将存储在 responseText 属性中。
不必从 responseText 属性中读取数据。它已经是希望的格式，可以直接将它插入到页面中。
插入 HTML 代码最简单的方法是更新这个元素的 innerHTML 属性。
②优点：
从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析。
HTML 的可读性好。
HTML 代码块与 innerHTML 属性搭配，效率高。
③缺点：
若需要通过 AJAX 更新一篇文档的多个部分，HTML 不合适
innerHTML 并非 DOM 标准。
4)对比
若应用程序不需要与其他应用程序共享数据的时候, 使用 HTML 片段来返回数据时最简单的
如果数据需要重用, JSON 文件是个不错的选择, 其在性能和文件大小方面有优势
当远程应用程序未知时, XML 文档是首选, 因为 XML 是 web 服务领域的 “世界语”
示例代码：
var url = this.href+"?time="+new Date();
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("GET",url);
xmlHttpRequest.send(null);
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
//var jsonStr = eval("("+xmlHttpRequest.responseText+")");
alert(xmlHttpRequest.responseText);
}
}
};
Jquery 异步参考：
ajax 请求
$.ajax(url,[settings])
load(url,[data],[callback])
$.get(url,[data],[fn],[type])
$.getJSON(url,[data],[fn])
$.getScript(url,[callback])
$.post(url,[data],[fn],[type])
ajax 事件
ajaxComplete(callback)
ajaxError(callback)
ajaxSend(callback)
ajaxStart(callback)
ajaxStop(callback)
ajaxSuccess(callback)
其它
$.ajaxPrefilter([type],fn)
$.ajaxSetup([options])
serialize()
serializearray()
1.jQuery 中的 Ajax
jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(),
第二层是 load(), $.get() 和 $.post(),
第三层是 $.getScript() 和 $.getJSON()
2.load() 方法
load() 方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中.
它的结构是: load(url[, data][,callback])
如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的 URL 参数来达到目的. 通过 URL 参数指定选择符,
就可以方便的从加载过来的 HTML 文档中选出所需要的内容. load() 方法的 URL 参数的语法结构为 “url selector”
(注意: url 和 选择器之间有一个空格)
传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式
对于必须在加载完才能继续的操作, load() 方法提供了回调函数,
该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象和 XMLHttpRequest 对象
3.$.get() 方法使用 GET 方式来进行异步请求.
它的结构是: $.get(url[, data][, callback][, type]);
$.get() 方法的回调函数只有两个参数:
data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等;
textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.
$.get() 和 $.post() 方法时 jQuery 中的全局函数, 而 find() 等方法都是对 jQuery 对象进行操作的方法
4.序列化元素
jQuery 为准备 “发送到服务器的 key/value 数据” 提供了一个简化的方法: serialize().
该方法作用于一个 jQuery 对象, 能将 DOM 元素内容序列化为字符串, 用于 Ajax 请求.
使用 serialize() 方法可以自动完成对参数的 url 编码
因为该方法作用于 jQuery 对象, 所以不光只对表单能使用, 其它选择器选取的元素也能使用它.
$("#form").serialize();
Ajax