和 XML)。它并非一种新的技术,而是以下几种原有技术的结合体。
- 使用CSS和XHTML来表示。
- 使用DOM模型来交互和动态显示。
- 使用XMLHttpRequest来和服务器进行异步通信。
- 使用javascript来绑定和调用。
通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型: - 不需要用户等待服务端响应。在异步派发XMLHttpRequest请求后控制权马上就被返回到浏览器。界面不会出现白板,在得到服务器响应之前还可以友好的给出一个加载提示。
- 不需要重新加载整个页面。为XMLHttpRequest注册一个回调函数,待服务器响应到达时,触发回调函数,并且传递所需的少量数据。“按需取数据”也降低了服务器的压力。
- 不需要使用隐藏或内嵌的框架。在XHR对象之前,模拟Ajax通信通常使用hack手段,如使用隐藏的或内嵌的框架(>标签)。<br/> 下面介绍下AJAX中的重要对象:XMLHttpRequest。
XMLHttpRequest对象(XHR)
XMLHttpRequest是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或接收XML及其他数据的一套API。
XMLHttpRequest对象首次以ActiveX对象形式在微软Internet Explorer(IE) 5中以引入。其他浏览器制造商在认识到这一对象重要性后也纷纷实现了XMLHttpRequest对象,但是以一个本地JavaScript对象而不是作为一个ActiveX对象实现。而如今,由于安全性、标准等问题,微软已经在其IE 7中把XMLHttpRequest实现为一个本地JavaScript对象。
API
描述
客服端请求
open(method,url,async, bstrUser, bstrPassword)
规定请求的类型、URL 以及是否异步处理请求。1) method:请求的类型,例如:POST、GET、PUT及PROPFIND。大小写不敏感。2) url:请求的URL地址,可以为绝对地址也可以为相对地址。3) async[可选]:true(默认,异步)或 false(同步)。注释:当您使用async=false 时,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。此时,不需要编写onreadystatechange回调函数,把代码放到 send() 语句后面即可。4) bstrUser[可选]:如果服务器需要验证,此处指定用户名,如果未指定,当服务器需要验证时,会弹出验证窗口。5) bstrPassword[可选]:验证信息中的密码部分,如果用户名为空,则此值将被忽略。
getRequestHeader(name)
获取指定的相应头部信息
setRequestHeader(name,value)
自定义HTTP头部信息。需在open()方法之后和send()之前调用,才能成功发送请求头部信息。传送门:HTTP 头部详解
Accept
浏览器能够处理的媒体类型
Accept-Charset
浏览器申明自己接收的字符集
Accept-Encoding
浏览器申明自己接收的编码方法,通常指定压缩方法,是否支持压缩,支持什么压缩方法(gzip,deflate)
Host
客户端指定要请求的WEB服务器的域名/IP 地址和端口号
Referer
发出请求的页面的URI
Content-Type
标明发送或者接收的实体的MIME类型。传送门:1、HTTP Content-type对照表2、格式:Content-Type: [type]/[subtype]; parameter
X-Requested-With
非标准HTTP头,只为firefox3标注是否为ajax异步请求,null表示为同步请求。
默认情况下,服务器对POST请求和提交Web表单不会一视同仁,将Content-Type头部信息设置为application/x-www-form-urlencoded (模拟表单提交)
send(string)
将请求发送到服务器。参数string仅用于POST请求;对于GET请求的参数写在url后面,所以string参数传递null。
abort()
调用此方法可取消异步请求,调用后,XHR对象停止触发事件,不允许访问任何与响应相关的属性;
服务端响应
onreadystatechange事件
对于异步请求,如果需要对服务器获取和操作响应结果,则在send() 之前,需要为onreadystatechange属性指定处理方法。该函数用于对服务器响应进行处理。
readyState
存有XMLHttpRequest的状态。每当readyState改变时,就会触发onreadystatechange事件。从 0 到 4 发生变化:
0(未初始化)
对象已建立,但是尚未初始化(尚未调用open方法)
1(初始化)
对象已建立,尚未调用send方法
2(发送数据)
send方法已调用,但是当前的状态及http头未知
3(数据传送中)
已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误
4(完成)
数据接收完毕,此时可以通过responseXml和responseText获取完整的回应数据
status(数字表示)
返回当前请求的http状态码。传送门:HTTP状态码一览表(HTTP Status Code)
1xx(临时响应)
表示临时响应并需要请求者继续执行操作的状态代码。
2xx (成功)
表示成功处理了请求的状态代码。Eg:200
3xx (重定向)
表示要完成请求,需要进一步操作。通常,这些状态代码用来重定向。Eg:304
4xx(请求错误)
这些状态代码表示请求可能出错,导致服务器无法正常处理。Eg:404
5xx(服务器错误)
这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误,而不是请求出错。Eg:500
statusText(字符表示)
返回当前请求的状态文本eg:OK (status:200)
responseText
将响应信息作为字符串返回
responseXML
将响应信息格式化为Xml Document对象并返回
responseBody(只有微软的IE支持)
将响应信息正文以unsigned byte数组形式返回(二进制数据)
responseStream(只有IE的某些版本支持)
以Ado Stream对象(二进制流)的形式返回响应信息
getResponseHeader(name)
从响应信息中获取指定的http头
getAllResponseHeaders()
获取响应的所有http头
overrideMimeType
通常用于重写服务器响应的MIME类型。Eg,正常情况下XMLHttpRequest只接收文本数据,但我们可以重写MIME为“text/plain; charset=x-user-defined”,以欺骗浏览器避免浏览器格式化服务器返回的数据,以实现接收二进制数据。
一个简单的ajax封装:
var myAjax = {
// XMLHttpRequest IE7+, Firefox, Chrome, Opera, Safari ; ActiveXObject IE6, IE5
xhr: window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"),
get: function (url, callback) {
this.xhr.open("get", url);
this.onreadystatechange(callback, this.xhr);
this.xhr.send(null);
},
post: function (url, data, callback) {
this.xhr.open("post", url);
this.xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
this.onreadystatechange(callback, this.xhr);
this.xhr.send(data);
},
onreadystatechange: function (func, _xhr) {
_xhr.onreadystatechange = function () {
if (_xhr.readyState == 4) {
if (_xhr.status == 200) {
func(_xhr.responseText);
}
}
}
}
}
使用:
$("#btn_nowTime1").bind("click", null
, function () {
myAjax.post("AjaxHandler.ashx", "func=GetServerTime"
, function (data) {
if (data)
alert(data);
}
);
});
XMLHttpRequest Level 2
XMLHttpRequest是一个浏览器接口,使得Javascript可以进行 HTTP (S) 通信。但是,这个接口一直没有标准化,每家浏览器的实现或多或少有点不同。HTML 5 的概念形成后,W3C 开始考虑标准化这个接口。2008年 2 月,提出了XMLHttpRequest Level 2 草案。
- 老版本的缺点
老版本的XMLHttpRequest对象有以下几个缺点:
- 只支持文本数据的传送,无法用来读取和上传二进制文件。
- 传送和接收数据时,没有进度信息,只能提示有没有完成。
- 受到"同域限制"(Same Origin Policy),只能向同一域名的服务器请求数据。
- 新版本的功能
新版本的XMLHttpRequest对象,针对老版本的缺点,做出了大幅改进。
- 可以设置 HTTP 请求的时限。
- 可以使用FormData对象管理表单数据。
- 可以上传文件。
- 可以请求不同域名下的数据(跨域资源共享,Cross-origin resource sharing,简称 CORS)。
- 可以获取服务器端的二进制数据。
- 可以获得数据传输的进度信息。
- 介绍几个XMLHttpRequest Leve2 新增的成员
超时时限
timeout
设置ajax请求超时时限,过了这个时限,就自动停止 HTTP 请求。
ontimeout事件
当ajax超过timeout 时限时触发的回调函数。
指定响应格式
responseType
(默认:“text”)在发送请求前,根据您的数据需要,将xhr.responseType设置为“text”、“arraybuffer”、“blob”或“document”。
response
成功发送请求后,xhr的响应属性会包含DOMString、ArrayBuffer、Blob 或 Document 形式(具体取决于responseTyp的设置)的请求数据。
进度信息
progress 事件
在XMLHttpRequest对象传递数据的时候用来返回进度信息。它分成上传和下载两种情况。下载的 progress 事件属于XMLHttpRequest对象,上传的 progress 事件属于XMLHttpRequest.upload对象。即:xhr.onprogress = updateProgress;xhr.upload.onprogress = updateProgress;XHR还新增了与progress事件相关的五个事件:1) load 事件:传输成功完成。2) abort 事件:传输被用户取消。3) error 事件:传输中出现错误。4) loadstart事件:传输开始。5) loadEnd事件:传输结束,但是不知道成功还是失败。
- 一个新功能实例
-
接收二进制数据(方法A:改写MIMEType)
老版本的XMLHttpRequest对象,只能从服务器取回文本数据。但我们可以改写数据的MIMEType,将服务器返回的二进制数据伪装成文本数据,并且告诉浏览器这是用户自定义的字符集。
关键代码如下:
服务端String str = "二进制数据获取"; MemoryStream _memory = new MemoryStream(); BinaryFormatter formatter = new BinaryFormatter(); formatter.Serialize(_memory, str); _memory.Position = 0; byte[] read = new byte[_memory.Length]; _memory.Read(read, 0, read.Length); _memory.Close(); context.Response.ContentType = "text/plain"; // 服务器使用OutputStream输出二进制流 context.Response.OutputStream.Write(read, 0, read.Length);
客服端
$("#btn_mime").bind("click", null
, function () {
$.ajax("AjaxHandler.ashx?func=GetBinaryData",
{
type: "get",
dataType: "text",
cache: false,
mimeType: "text/plain; charset=x-user-defined",
success: function (data) {
if (data) {
var byte = [];
for (var i = 0, len = data.length; i < len; ++i) {
var c = data.charCodeAt(i);
byte[byte.length] = c & 0xff;
}
alert(byte);
}
}
});
});
浏览器会把相应数据当做文本数据接收,所以我们还必须再一个个字节地还原成二进制数据。位运算"c & 0xff",表示在每个字符的两个字节之中,只保留后一个字节,将前一个字节扔掉。原因是浏览器解读字符的时候,会把字符自动解读成Unicode 的 0xF700-0xF7ff 区段。
截图如下:(测试环境:Google Chrome 版本 26.0.1410.43)
服务器端返回二进制数据:
客服端输出:
a) 使用mimeType: "text/plain; charset=x-user-defined"参数。
b) 没有对服务器的MIME类型进行重写,导致返回信息被浏览器格式化后输出的二进制数据与服务器不同。并且不同浏览器格式化后输出的二进制数据都有差异。
- 接收二进制数据(方法B:responseType属性)
在XMLHttpRequest Level2中,可以使用新增的responseType属性从服务器取回二进制数据。把responseType设为 blob,表示服务器传回的是二进制对象。
var xhr = new XMLHttpRequest();
xhr.open (“GET”, “/path/to/image.png”);
xhr.responseType = “blob”;
接收数据的时候,用浏览器自带的 Blob 对象即可。注意,读取的xhr.response,而不是xhr.responseText。
var blob = new Blob ([xhr.response], {type: “image/png”});
还可以将responseType设为arraybuffer,把二进制数据装在一个数组里。然后再遍历这个数组。
var xhr = new XMLHttpRequest ();
xhr.open ("GET", "/path/to/image.png");
xhr.responseType = "arraybuffer";
var arrayBuffer = xhr.response;
if (arrayBuffer) {
var byteArray = new Uint8Array (arrayBuffer);
for (vari = 0; i<byteArray.byteLength; i++) {
// do something
}
}
- 更多XMLHttpRequest Level 2新功能描述请看:
- XMLHttpRequest 增强功能
- XMLHttpRequest Level 2 使用指南
- XMLHttpRequest2 新技巧
jQuery框架的Ajax
jQuery是一个快速、简单的JavaScript library,核心理念是write less,do more(写的更少,做的更多)。它简化了HTML 文件的traversing,事件处理、动画、Ajax 互动,从而方便了网页制作的快速发展。jQuery是为改变你编写JavaScript 的方式而设计的。更多jQuery科普知识请看:jQuery百度百科(Eg:模块,历史版本)
下面介绍下jQuery框架中ajax相关API:
版本Jquery-1.7.1.js。
- jQuery.ajax( [url,] options )
通过 HTTP 请求加载远程数据。
返回值:$.ajax() 返回jqXHR对象(jqXHR对象:为XMLHttpRequest对象的超集)。可用于手动终止请求abort()、为ajax函数设置额外的回调函数等。
ajax内部实现的两个重要对象:s对象和jqXHR对象。
- s对象
由默认设置jQuery.ajaxSettings对象、options参数集合和jQuery.ajaxSetup({})默认设置合并而成s对象。
参数名
描述
可由ajax的options参数设置
url
(默认: 当前页地址) 要请求的目的URL地址。
usernamepassword
用于响应HTTP访问认证请求的用户名及密码
type
(默认: “GET”) 请求方式 (“POST” 或 “GET”)。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
dataType
预期服务器返回的数据类型。如果不指定,jQuery将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。必须确保网页服务器报告的 MIME 类型与我们选择的dataType所匹配。比如说,XML的话,服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。可用值:
"xml"
返回 XML 文档,可用jQuery处理。
"html"
返回纯文本 HTML 信息;包含的 script 标签会在插入dom时执行。
"script"
返回纯文本 JavaScript 代码,常常用于跨域请求。不会触发全局事件和局部事件;只支持GET方式(POST请求会自动转化为GET请求);默认不启用缓存(cache:false)
"json"
返回 JSON 数据。JSON 数据是一种能很方便通过 JavaScript 解析的结构化数据。
"jsonp"
JSONP 格式,用于跨域请求。
"text"
返回纯文本字符串
其中,text 和 xml 类型返回的数据不会经过处理。数据仅仅简单的将XMLHttpRequest的responseText或responseHTML属性传递给 success 回调函数。如果指定了 script 或者jsonp类型,那么当从服务器接收到数据时,实际上是用了<script>标签而不是XMLHttpRequest对象。这种情况下,$.ajax() 不再返回一个XMLHttpRequest对象,并且也不会传递事件处理函数,比如beforeSend。
contentType
(默认: “application/x-www-form-urlencoded”)标明发送或者接收的实体的MIME类型。当“非GET或HEAD请求”的HTTP请求时,会被设置为HTTP头请求信息。
mimeType
多用途互联网邮件扩展(MIME,Multipurpose Internet Mail Extensions);用于重写服务器端响应的MIME类型。
data
发送到服务器的数据。可以是一个查询字符串,比如 key1=value1&key2=value2 ,也可以是一个映射,比如 {key1: “value1”, key2: “value2”} 。如果使用了后者的形式,则数据在发送前会通过jQuery.param()函数转换成查询字符串。这个处理过程也可以通过设置processData选项为false来回避。
processData
(默认: true) 默认情况下,发送到服务器的数据(即data参数)将被转换为字符串以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。jQuery中的处理方式:
if ( s.data&&s.processData&&typeofs.data !== "string" ) {
s.data = jQuery.param(s.data, s.traditional );
}
async
(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
timeout
设置请求超时时间(毫秒)。通过setTimeout(fn,time)实现。
cache
(默认: true)dataType为 script 和jsonp时默认为 false。设置为 false 将不缓存此页面。当使用GET或HEAD方式发送请求时要添加时间戳参数 (net Date()).getTime() 来保证每次发送的URL不同, 可以避免浏览器缓存.(只有GET和HEAD方式的请求浏览器才会缓存)jQuery中的处理方式:
if ( s.cache === false ) {
var ts = jQuery.now(),
// rts = /([?&])_=[^&]*/尝试替换
ret = s.url.replace( rts, "$1_=" + ts );
// rquery = /\?/如果没有替换任何内容,则把时间戳加到url最后
s.url = ret + ( ( ret === s.url ) ? ( rquery.test( s.url ) ? "&" : "?" ) + "_=" + ts : "" );
}
示例:/AjaxHandler.ashx?func=GetBinaryData&_=1368424995535
ifModified
(默认: false) 仅在服务器数据改变时获取新数据。通过响应头If-Modified-Since、IF-None-Match和请求头Last-Modified、Etag提高GET或HEAD方式请求效率。(只有GET和HEAD方式的请求浏览器才会缓存)
global
(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局AJAX 事件:ajaxStart、ajaxSend、ajaxSuccess、ajaxError、ajaxComplete、ajaxStop。(比如请求频繁时可禁用全局AJAX事件提高效率)
context
(默认:true) 这个对象用于设置Ajax相关回调函数的上下文,让回调函数内this指向这个对象。如果不设定这个参数,那么回调函数中的this就指向调用本次AJAX请求时传递的options参数载体“s对象”。但对于全局Ajax事件来说,this都是指向全局事件所绑定的元素。
jsonp
指定获得jsonp回调函数名的参数名(默认为:callback)。这个值用来替代URL中"callback=?"里的"callback"部分,比如{jsonp:“onJsonPLoad”}会替换为将"onJsonPLoad=?"传给服务器。
jsonpCallback
为jsonp请求指定一个回调函数名。jsonpCallback参数一般为字符串,也可接收函数(该函数返回字符串)。默认情况下生成随机函数名:“jQuery” + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, “” ) + jQuery.now()
crossDomain
(默认:null)false:同域请求;true跨域请求。倘若crossDomain标识为null,则jQuery会自动根据本地url、端口来解析。可以根据需求直接赋值来提高性能。通常情况下由服务器自动解析即可,但如果你想在同一域中强制跨域请求(像JSONP一样),那么将crossDomain为true,这允许你将服务器端重定向到另一个域。
scriptCharset
只有当请求时dataType为"jsonp"或"script",并且type是"GET"才会用于修改charset。因为此时是动态创建
hearders
(默认:{}) 设置HTTP请求头数据"{键:值}"。此设置发生在:jQuery所有影响HTTP头的参数(options)设置之后,beforeSend回调函数之前。
statusCode
(默认:{}) 定义一组HTTP状态码与回调函数的映射,当响应的状态码有匹配statusCode则会触发对应回调函数。例如,如果响应状态是404,将触发以下警报:
$.ajax({
statusCode: {404: function() {
alert(“page not found”);
}
});
复制代码
traditional
如果你想要用传统的方式来序列化数据,那么就设置为true。请参考$.param()深度递归详解。
xhrFields
声明附加到XMLHttpRequest对象的自定义“key-value”数组。例如,如果需要的话,你可以用它来设置跨域的withCredentials为true,即:xhrFields: { withCredentials: true }
5个局部事件
beforeSend、dataFilter、success、error、complete。(详见后面事件介绍部分)
由ajax函数内部解析或内部提供
dataTypes
由dataType按空格拆分所得。
isLocal
根据协议确定当前url请求的是否为本地请求。jQuery中定义默认值为:
isLocal:/(?:about|app|app-storage|.+-extension|file|res|widget)?/.test(/([\w+.-]+:)(??/([^/?#:]*)(?:?\d+))?)?/.exec(url))
hasContent
非GET或HEAD请求为true,用于处理data和contentType参数。
contents
一个"{类型字符串:正则表达式}"的对象,倘若dataTypes[0]为“*”时,用contents中的正则表达式去匹配contentType,匹配成功则用“类型字符串”覆盖dataTypes[0]。jQuery内部定义如下:
contents: {
xml: /xml/,
html: /html/,
json: /json/,
script: /javascript|ecmascript/
}
accepts
浏览器能够处理的媒体类型,其值取决于dataTypes[0]参数。jQuery内部定义如下:
accepts: {
xml: "application/xml, text/xml",
html: "text/html",
text: "text/plain",
json: "application/json, text/javascript",
script: "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript",
"*": allTypes // dataTypes[0]匹配不上时取此值
}
responseFields
jqXHR超集设置“数据类型:属性”对应关系,在返回响应数据时,用于确定创建哪个属性变量。jQuery中定义如下:
responseFields: {
xml: "responseXML",
text: "responseText"
}
converters
存储数据类型对应的转换器,根据dataTypes获取对应转换器,用于对响应数据response进行处理。该处理发生在dataFilter回调函数之后。
converters: {
"* text": window.String,
"text html": true,
"text json": jQuery.parseJSON,
"text xml": jQuery.parseXML,
"text script": function( text ) {
jQuery.globalEval( text ); // 执行脚本
return text;
}
}
- jqXHR对象
为不同浏览器内置的XMLHttpRequest提供了一致的超集。对于XMLHttpRequest之外的传输机制,比如JSONP请求,jXHR对象也可以进行处理。
超集与真子集:
如果一个集合S2中的每一个元素都在集合S1中,且集合S1中可能包含S2中没有的元素,则集合S1就是S2的一个超集。 S1是S2的超集,则S2是S1的真子集,反之亦然。
jqXHR对象我们常常使用如下成员,这些成员主要用于ajax的全局事件和局部事件,并且做为$.ajax()函数返回值返回。
jqXHR:{
readyState
,setRequestHeader: function( name, value )
,getAllResponseHeaders: function()
,getResponseHeader: function( key )
,overrideMimeType: function( type )
,abort: function( statusText )
,responseText
,responseXML
}
另外,jqXHR的全部成员如下:
在图中我们看到一些陌生的函数,比如:done()、fail()、promise()、isResolve()、isRejected()、then()、always()、progress()等,都是jQuery的deferred对象API。
开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的。
通常的做法是,为它们指定回调函数(callback)。即事先规定,一旦它们运行结束,应该调用哪些函数。但是,在回调函数方面,jQuery的功能非常弱。为了改变这一点,jQuery开发团队就设计了deferred对象。
简单说,deferred对象就是jQuery的回调函数解决方案。在英语中,defer的意思是"延迟",所以deferred对象的含义就是"延迟"到未来某个点再执行。 它解决了如何处理耗时操作的问题,对那些操作提供了更好的控制,以及统一的编程接口。
更专业的资源:jQuery的deferred对象详解
- jQuery Ajax事件
jQuery框架中,伴随Ajax请求会触发若干事件,我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery中有两种Ajax事件:局部事件和全局事件。
- 局部事件(回调函数),在$.ajax()方法的options参数中声明,可以用来设置请求数据和获取、处理响应数据。
beforeSend
该函数可在发送请求前修改XMLHttpRequest对象,如添加自定义 HTTP 头。签名:function (jqXHR,s) { }函数说明:传入jqXHR、s对象
dataFilter
在请求成功之后调用。若状态码为304(未修改)则不触发此回调。签名:function (data, dataType) { return newData; }函数说明:传入返回的数据、"dataType"参数的值。并且必须返回新的数据传递给success回调函数
success
请求成功时触发。签名:function (data,statusText,jqXHR) { }函数说明:传入返回的数据、描述状态的字符串”success”、jqXHR对象
error
请求失败时调用此函数。签名:function (jqXHR, textStatus, errorThrown) { }函数说明:传入jqXHR对象、描述状态的字符串”error”、错误信息
complete
请求完成后回调函数 (请求成功或失败之后均调用)签名:function (jqXHR, textStatus) { }函数说明:传入jqXHR对象、描述状态的字符串(可能值:“No Transport”、“timeout”、“notmodified”—304 "、“parsererror”、“success”、“error”)
定义方式例如:
$.ajax({
// ...
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
});
复制代码
2) 全局事件,每次Ajax请求都会触发,它会向DOM中的所有元素广播,你只需为DOM中任意元素bind好全局事件即会触发(若绑定多次,则会依次触发为事件注册的回调函数)。
ajaxStart
开始新的Ajax请求,并且此时jQuery对象上没有其他ajax请求正在进行。签名:function(e)函数说明:传入事件对象
ajaxSend
当一个Ajax请求开始时触发签名:function(e,jqXHR,s)函数说明:传入事件对象、jqXHR、s对象
ajaxSuccess
全局的请求成功签名:function(e,jqXHR,s,data)函数说明:传入事件对象、jqXHR、s对象、请求成功返回的相应数据
ajaxError
全局的发生错误时触发签名:function(e,jqXHR,s,errorData)函数说明:传入事件对象、jqXHR、s对象、请求失败返回的错误信息
ajaxComplete
全局的请求完成时触发签名:function(e,jqXHR,s)函数说明:传入事件对象、jqXHR、s对象
ajaxStop
当jQuery对象上正在进行Ajax请求都结束时触发。签名:function(e)函数说明:传入事件对象
全局事件在jQuery中的声明方式:
jQuery.each( "ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split( " " ), function( i, o ){
jQuery.fn[ o ] = function( f ){
return this.on( o, f );
};
});
所以我们可以使用下面两种方式定义全局事件:
// 可以用bind来绑定,用unbind来取消绑定。
$("#loading").bind(“ajaxSend”, function(){ … });
或者:
$("#loading").ajaxStart(function(){ … });
复制代码
3) ajax方法完整的事件流
-
示例:$.ajax()触发的事件(局部事件和全局事件)
// 全局事件 $("#div_event").ajaxStart(function (e) { doAddEvent4textarea("txt_event", "触发ajaxStart回调函数"); }); $("#div_event").ajaxSend(function (e) { doAddEvent4textarea("txt_event", "触发ajaxSend回调函数"); }); $("#div_event").ajaxSuccess(function (e, jqXHR, s, data) { doAddEvent4textarea("txt_event", "触发ajaxSuccess回调函数"); }); $("#div_event").ajaxError(function (e, jqXHR, s, errorData) { doAddEvent4textarea("txt_event", "触发ajaxError回调函数"); }); $("#div_event").ajaxComplete(function (e, jqXHR, s) { doAddEvent4textarea("txt_event", "触发ajaxComplete回调函数"); }); $("#div_event").ajaxStop(function (e) { doAddEvent4textarea("txt_event", "触发ajaxStop回调函数"); }); // 局部事件 function bindLocalEvent(e) { var textareaid = e.data.textareaid; var global = e.data.global; $.ajax("AjaxHandler.ashx?func=btn_nowTime_long", { type: "get", dataType: "text", global: global, cache: false, beforeSend: function (jqXHR, s) { doAddEvent4textarea(textareaid, "触发beforeSend回调函数"); }, dataFilter: function (data, dataType) { doAddEvent4textarea(textareaid, "触发dataFilter回调函数"); }, success: function (data, statusText, jqXHR) { doAddEvent4textarea(textareaid, "触发success回调函数"); }, error: function (jqXHR, textStatus, errorThrown) { doAddEvent4textarea(textareaid, "触发error回调函数"); }, complete: function (jqXHR, textStatus) { doAddEvent4textarea(textareaid, "触发complete回调函数"); } }); } function doAddEvent4textarea(textareaid, txt) { var textarea = $("#" + textareaid); textarea.val(textarea.val() + "\r\n" + txt); }
-
. a j a x ( ) 方 法 的 全 局 事 件 典 型 用 例 你 的 页 面 存 在 多 个 甚 至 为 数 不 少 的 a j a x 请 求 , 但 是 这 些 a j a x 请 求 都 有 相 同 的 消 息 机 制 。 a j a x 请 求 开 始 前 显 示 一 个 提 示 框 , 提 示 “ 正 在 读 取 数 据 ” ; a j a x 请 求 成 功 时 提 示 框 显 示 “ 数 据 获 取 成 功 ” ; a j a x 请 求 结 束 后 隐 藏 提 示 框 。 a ) 不 使 用 全 局 事 件 的 做 法 是 : 给 .ajax()方法的全局事件典型用例 你的页面存在多个甚至为数不少的ajax请求,但是这些ajax请求都有相同的消息机制。ajax请求开始前显示一个提示框,提示“正在读取数据”;ajax请求成功时提示框显示“数据获取成功”;ajax请求结束后隐藏提示框。 a) 不使用全局事件的做法是: 给 .ajax()方法的全局事件典型用例你的页面存在多个甚至为数不少的ajax请求,但是这些ajax请求都有相同的消息机制。ajax请求开始前显示一个提示框,提示“正在读取数据”;ajax请求成功时提示框显示“数据获取成功”;ajax请求结束后隐藏提示框。a)不使用全局事件的做法是:给.ajax()加上beforeSend、success、complete回调函数,在回调函数中加上处理提示框。
b) 使用全局事件的做法是:
$(document).ajaxStart(onStart)
.ajaxComplete(onComplete)
.ajaxSuccess(onSuccess);
function onStart(event) { //..... }
function onComplete(event, xhr, settings) { //..... }
function onSuccess(event, xhr, settings) { //..... }
- jQuery ajax相关函数
- jQuery.ajaxSetup({ })
jQuery.ajax()函数中的所有的参数选项都可以通过jQuery.ajaxSetup()函数来全局设置默认值。 - $.ajax()函数的封装
a) $("").load(url [, params] [, callback])
请求远程的HTML文件代码(dataType: “html”),默认使用 GET 方式,如果传递了params参数则使用Post方式。在请求“成功”完成时将responseText属性值插入至DOM中。但不管请求是否成功完成“在最后”都会执行callback回调函数(即:complete:callback)。
b) jQuery.get(url [, data] [, callback] [, type] )
通过HTTP GET请求载入数据,并在请求成功时执行回调函数(即:success: callback)。
c) jQuery.getJSON(url [, data] [, callback] )
通过 HTTP GET 请求载入 JSON 数据。相当于: jQuery.get(url, [data],[callback], “json”)
可以通过使用JSONP 形式的回调函数来加载其他网域的JSON数据。
d) jQuery.getScript(url [, callback] )
通过 HTTP GET 请求载入并执行一个 JavaScript 文件。相当于: jQuery.get(url, null, [callback], “script”)
可以跨域调用 JavaScript 文件。
e) jQuery.post(url [, data] [, callback] [, type] )
通过 HTTP POST 请求载入信息,并在请求成功时执行回调函数(即:success: callback)。 - 对象序列化
a) jQuery.param(object,traditional)
创建数组或对象的序列化表示,该序列化可在ajax请求时在URL查询字符串中使用。
序列化过程中会使用encodeURIComponent()函数把字符串作为URI组件进行编码。
encodeURIComponent() 方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * " ( ) 。其他字符(比如:;/??&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。
// 在param中会进行如下处理
function( key, value ) {
// 如果value是函数,则取其函数返回值
value = jQuery.isFunction( value ) ? value() : value;
s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value );
};
对于 jQuery 1.4,
.
p
a
r
a
m
(
)
方
法
将
会
通
过
深
度
递
归
的
方
式
序
列
化
对
象
,
以
便
符
合
现
代
化
脚
本
语
言
的
需
求
,
比
如
P
H
P
、
R
u
b
y
o
n
R
a
i
l
s
等
。
你
可
以
传
递
t
r
a
d
i
t
i
o
n
a
l
=
t
r
u
e
或
在
a
j
a
x
功
能
中
传
递
包
含
t
r
a
d
i
t
i
o
n
a
l
的
o
p
t
i
o
n
s
参
数
。
传
送
门
:
.param() 方法将会通过深度递归的方式序列化对象,以便符合现代化脚本语言的需求,比如 PHP、Ruby on Rails 等。你可以传递traditional = true 或在ajax功能中传递包含traditional的options参数。 传送门:
.param()方法将会通过深度递归的方式序列化对象,以便符合现代化脚本语言的需求,比如PHP、RubyonRails等。你可以传递traditional=true或在ajax功能中传递包含traditional的options参数。传送门:.param()深度递归详解和$.param() 示例
b)
(
"
"
)
.
s
e
r
i
a
l
i
z
e
A
r
r
a
y
(
)
可
以
将
一
个
或
多
个
表
单
元
素
(
比
如
i
n
p
u
t
、
t
e
x
t
a
r
e
a
等
)
,
或
者
f
o
r
m
元
素
本
身
的
j
Q
u
e
r
y
对
象
序
列
化
为
J
S
O
N
对
象
。
(
非
J
S
O
N
字
符
串
。
需
要
使
用
插
件
或
者
第
三
方
库
进
行
字
符
串
化
操
作
)
特
别
说
明
,
元
素
不
能
被
禁
用
(
禁
用
的
元
素
不
会
被
包
括
在
内
)
,
并
且
元
素
应
当
有
含
有
n
a
m
e
属
性
。
提
交
按
钮
的
值
也
不
会
被
序
列
化
。
文
件
选
择
元
素
的
数
据
也
不
会
被
序
列
化
。
传
送
门
:
("").serializeArray() 可以将一个或多个表单元素(比如 input、 textarea等),或者 form 元素本身的jQuery对象序列化为JSON对象。(非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作) 特别说明,元素不能被禁用(禁用的元素不会被包括在内),并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。 传送门:
("").serializeArray()可以将一个或多个表单元素(比如input、textarea等),或者form元素本身的jQuery对象序列化为JSON对象。(非JSON字符串。需要使用插件或者第三方库进行字符串化操作)特别说明,元素不能被禁用(禁用的元素不会被包括在内),并且元素应当有含有name属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。传送门:("").serializeArray() 示例
c) $("").serialize()
可以将一个或多个表单元素(比如 input、 textarea等),或者 form 元素本身的jQuery对象序列化为经过URL编码转换后的字符串,可直接用在URL查询字符串中。
jQuery内部定义:
serialize: function() {
return jQuery.param( this.serializeArray() );
}
$.ajax()中常见应用示例
- cache和ifModified参数
-
cache参数:GET和POST最重要的区别(传送门)
语义上,GET是获取指定URL上的资源,是读操作,重要的一点是不论对某个资源GET多少次,它的状态是不会改变的,在这个意义上,我们说GET是安全的(不是被密码学或者数据保护意义上的安全)。因为GET是安全的,所以GET返回的内容可以被浏览器,Cache服务器缓存起来。
而POST的语意是对指定资源“追加/添加”数据,所以是不安全的,每次提交的POST,参与的代码都会认为这个操作会修改操作对象资源的状态,于是,浏览器在你按下F5的时候会跳出确认框,缓存服务器不会缓存POST请求返回内容。 -
ifModified参数:通过ifModified参数提高请求性能(即:“条件GET”:Last-Modified / If-Modified-Since和ETag / If-None-Match)
当你请求的资源并不是一层不变的时候,即不能简单的一直使用客户端缓存时,你可能通过将cache设置为false来发送请求,这实际上是在url加上时间戳组合成新的url,每次发送新的请求,这明显加大了服务器的压力。
对于这种情况,我们可以通过ifModified参数改进缓存方式(即:cache和ifModified都设置为true),仅在请求的数据改变时重新获取。通过这种方式请求的url不会改变,并且每次都会发送到服务器,只是会有检验方法验证是否需要重新获取数据从而节省带宽和开销。
更多ETag描述(优点,解决了Last-Modified无法解决的一些问题,什么场合不应该被使用)
过程如下:
a) 将$.ajax()函数的cache和ifModified参数同时设置为true。
b) 客户端请求服务端A,在服务端加上Last-Modified/ETag响应体一起返回。
c) 客户端缓存接收到的Last-Modified/ETag响应体,并在下一次发生请求A时将缓存的Last-Modified/ETag值做为If-Modified-Since/IF-None-Match请求头一起发给服务器。
d) 服务器接收If-Modified-Since/IF-None-Match后,就根据参数值检验自上次客服端请求之后资源是否有改动
i. 若还未改动则直接返回响应304和一个空的响应体。
ii. 若已改动则重新处理数据,返回最新的请求数据。
e) 这样,既保证不向客户端重复发出资源,也保证当服务器有变化时,客户端能够得到最新的资源。
这一过程中,我们只需要做:服务器返回Last-Modified/ETag响应头和在服务端检验数据是否失效并采取对应处理方式。其余步骤由jQuery框架的ajax()函数完成。
关键代码如下:
客服端:$("#btn_nowTime_long3").bind("click", null , function () { $.ajax("AjaxHandler.ashx?func=GetServerTime4Modified", { type: "get", dataType: "text", cache: true, ifModified: true, success: function (data) { if (data) alert(data); }, }); });
服务端:
if(!String.IsNullOrEmpty(context.Request.Headers["If-Modified-Since"]))
{
if (CheckResourceValidate()) // 检查资源有效性
{
// 如果资源有效,则直接返回304状态码,客户端回去到此状态码后会从缓存中取值。
context.Response.StatusCode = 304;
return;
}
}
// 请求数据
GetServerTimeAfter2Second();
context.Response.Cache.SetExpires(DateTime.Now.AddSeconds(5));
// 设置Last-Modified响应体
context.Response.Cache.SetLastModified(DateTime.Now);
- 跨域请求
在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。所谓同源是指,域名(host),协议(protocol),端口(port)相同。
URL
说明
是否允许通信
能否通过javascript解决
http://www.a.com/a.jshttp://www.a.com/b.js
同一域名下
允许
http://www.a.com/lab/a.jshttp://www.a.com/script/b.js
同一域名下不同文件夹
允许
http://www.a.com:8000/a.jshttp://www.a.com/b.js
同一域名,不同端口
不允许
能
http://www.a.com/a.jshttps://www.a.com/b.js
同一域名,不同协议(http和https)
不允许
不能
http://www.a.com/a.jshttp://70.32.92.74/b.js
域名和域名对应ip
不允许
能
http://www.cnblogs.com/a.jshttp://www.a.com/b.jshttp://script.a.com/b.jshttp://a.com/b.js
不同域名(host)不允许
能
-
$.ajax()为我们提供了两种解决方案,不过都是只支持get方式,分别是jQuery的jQuery.ajax“jsonp”格式和jquery.getScript()(即jQuery.ajax “script”格式)方式。
-
KaTeX parse error: Expected 'EOF', got '\<' at position 99: …href属性的<script>\̲<̲img>\<iframe>和 ….ajax()提供的两种解决方案正是应用了动态创建 < script>的方式来实现(即:生成 < script>标签,src引入脚本,然后执行,最后移除< script>标签)。
-
jQuery.ajax()的jsonp和script方式的异同点:
a) 相同:都走$.ajax() script格式的流程;不会触发全局事件和局部事件;只支持GET方式(POST请求会自动转化为GET请求);默认不启用缓存(cache:false)
b) 不同:jsonp方式可以通过jsonp和jsonpCallback参数指定一个特定回调函数。 -
示例部署说明:
因为是跨域请求,所以需要在本机部署两个示例程序以模拟不同域之间的访问,并且在示例代码中需要修改“crossUrl”为目的域路径。 -
jsonp示例代码:
客服端:// jsonp方式跨域请求(dataType:jsonp) $("#btn_cross_req1").bind("click", null , function () { $.ajax(crossUrl, { type: "get", dataType: "jsonp", jsonp: "jsonpParamName", jsonpCallback: "crossCallback", crossDomain: true, }); }); function crossCallback(data) { alert("jsonp" + data); }
服务端:
context.Response.ContentType = "text/plain"; string jsonpCallbackName = reqCollection["jsonpParamName"]; context.Response.Write(String.Format("{0}("来自域:{1}的相应信息")" , jsonpCallbackName, context.Request.Url.Host));
分析:
a) 因jsonp和jsonpCallback参数而改变的url如下。(即默认为:callback=jQuery随机值,更改为:jsonpParamName=crossCallback)
URL:http://192.168.1.100:6567/AjaxHandler.ashx?func=CrossRequest&jsonpParamName=crossCallback&_=1368360234428
b) 服务器端获取到jsonp回调函数名后,返回一个函数表达式。
6) 在XMLHttpRequest Level 2中新增了跨域访问方式、接收二进制等新功能,详细请看:XMLHttpRequest2 新技巧