最近一直在研究请求对象之类的问题,现在正好有机会和大家讨论一下.

传送门:异步编程系列目录……

示例源码:触碰jQueryAJAX异步详解.rar

AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScriptXML)。它并非一种新的技术,而是以下几种原有技术的结合体。

1) 应用CSSXHTML来表示。

2) 应用DOM模型来交互和动态显示。

3) 应用XMLHttpRequest来和服务器停止异步通信。

4) 应用javascript来绑定和调用。

通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的进程中应用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型:

1) 不需要用户等待服务端响应。在异步派发XMLHttpRequest请求后控制权马上就被返回到浏览器。界面不会出现白板,在得到服务器响应之前还可以友好的给出一个加载提示。

2) 不需要重新加载全部页面。XMLHttpRequest注册一个回调函数,待服务器响应达到时,触发回调函数,并且传递所需的少许数据。“按需取数据”也降低了服务器的压力。

3) 不需要应用隐藏或内嵌的框架。XHR对象之前,模拟Ajax通信平日应用hack手段,如应用隐藏的或内嵌的框架(<iframe>标签)

上面分析下AJAX中的重要对象:XMLHttpRequest

XMLHttpRequest对象(XHR)

XMLHttpRequest是一套可以在JavascriptVbScriptJscript等脚本语言中通过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:请求的类型,例如:POSTGETPUTPROPFIND。大小写不敏感。

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

浏览器声名自己接收的编码方法,平日指定压缩方法,是否支撑压缩,支撑什么压缩方法(gzipdeflate

Host

客户端指定要请求的WEB服务器的域名/IP 地址和端口号

Referer

发出请求的页面的URI

Content-Type

表明发送或者接收的实体的MIME类型。传送门:

1HTTP 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事件。

04 发生变化:

0(未初始化)

对象已建立,但是尚未初始化(尚未调用open方法)

1(初始化)

对象已建立,尚未调用send方法

2(发送数据)

send方法已调用,但是以后的状态及http头未知

3(数据传送中)

已接收部份数据,因为响应及http头不全,这时通过responseBodyresponseText获取部份数据会出现错误

4(完成)

数据接收完毕,此时可以通过responseXmlresponseText获取完全的回应数据

status(数字表示)

返回以后请求的http状态码。

传送门:HTTP状态码一览表(HTTP Status Code

1xx(临时响应)

表示临时响应并需要请求者继续执行操纵的状态代码。

2xx (胜利)

表示胜利处理了请求的状态代码。Eg200

3xx (重定向)

表示要完成请求,需要进一步操纵。平日,这些状态代码用来重定向。Eg304

4xx(请求错误)

这些状态代码表示请求可能出错,导致服务器没法畸形处理。Eg404

5xx(服务器错误)

这些状态代码表示服务器在尝试处理请求时发生外部错误。这些错误可能是服务器本身的错误,而不是请求出错。Eg500

statusText(字符表示)

返回以后请求的状态文本egOKstatus200

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 开始斟酌标准化这个接口。20082 月,提出了XMLHttpRequest Level 2 草案。

1. 老版本的缺陷

老版本的XMLHttpRequest对象有以下几个缺陷:

1) 只支撑文本数据的传送,没法用来读取和上传二进制文件。

2) 传送和接收数据时,没有进度信息,只能提示有没有完成。

3) 受到"同域限制"Same Origin Policy),只能向同一域名的服务器请求数据。

2. 新版本的功能

新版本的XMLHttpRequest对象,针对老版本的缺陷,做出了大幅改良。

1) 可以设置 HTTP 请求的时限。

2) 可以应用FormData对象管理表单数据。

3) 可以上传文件。

4) 可以请求不同域名下的数据(跨域资源共享,Cross-origin resource sharing,简称 CORS)。

5) 可以获取服务器端的二进制数据。

6) 可以取得数据传输的进度信息。

3. 分析几个XMLHttpRequest Leve2 新增的成员

超时时限

timeout

设置ajax请求超时时限,过了这个时限,就主动停止 HTTP 请求。

ontimeout事件

ajax超过timeout 时限时触发的回调函数。

指定响应格式

responseType

(默认:“text)在发送请求前,根据您的数据需要,将xhr.responseType设置为“text”、“arraybuffer”、“blob”或“document”。

response

胜利发送请求后,xhr的响应属性会包含DOMStringArrayBufferBlobDocument 形式(具体取决于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事件:传输结束,但是不知道胜利还是失败。

4. 一个新功能实例

1) 接收二进制数据(方法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",表示在每一个字符的两个字节之中,只保留后一个字节,将前一个字节扔掉。原因是浏览器解读字符的时候,会把字符主动解读成Unicode0xF700-0xF7ff 区段。

截图如下:(测试环境:google Chrome 版本 26.0.1410.43

服务器端返回二进制数据:

请求和对象

客服端输出:

a) 应用mimeType: 'text/plain; charset=x-user-defined'参数。

请求和对象

b) 没有对服务器的MIME类型停止重写,导致返回信息被浏览器格式化后输出的二进制数据与服务器不同并且不同浏览器格式化后输出的二进制数据都有差异。

请求和对象

2) 接收二进制数据(方法BresponseType属性)

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 }}

5. 更多XMLHttpRequest Level 2新功能描述请看:

1) XMLHttpRequest 增强功能

2) XMLHttpRequest Level 2 应用指南

3) 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

1. jQuery.ajax( [url,] options )

通过 HTTP 请求加载近程数据。

返回值:$.ajax() 返回jqXHR对象(jqXHR对象:为XMLHttpRequest对象的超集)。可用于手动终止请求abort()、为ajax函数设置额外的回调函数等。

ajax外部实现的两个重要对象:s对象和jqXHR对象。

1) s对象

由默认设置jQuery.ajaxSettings对象、options参数集合和jQuery.ajaxSetup({})默认设置合并而成s对象。

参数名

描述

可由ajaxoptions参数设置

url

(默认: 以后页地址) 要请求的目标URL地址。

username

password

用于响应HTTP访问认证请求的用户名及密码

type

(默认: "GET") 请求方法 ("POST""GET")。注意:其它 HTTP 请求方法,如 PUTDELETE 也可以应用,但仅部份浏览器支撑。

dataType

预期服务器返回的数据类型。如果不指定,jQuery将主动根据 HTTPMIME 信息来智能判断,比如 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"

返回纯文本字符串

其中,textxml 类型返回的数据不会经过处理。数据仅仅简略的将XMLHttpRequestresponseTextresponseHTML属性传递给 success 回调函数。

如果指定了 script 或者jsonp类型,那么当从服务器接收到数据时,实际上是用了<script>标签而不是XMLHttpRequest对象。这类情况下,$.ajax() 不再返回一个XMLHttpRequest对象,并且也不会传递事件处理函数,比如beforeSend

contentType

(默认: "application/x-www-form-urlencoded")表明发送或者接收的实体的MIME类型。当“非GETHEAD请求”HTTP请求时,会被设置为HTTP头请求信息。

mimeType

多用途互联网邮件扩展(MIMEMultipurpose Internet Mail Extensions);用于重写服务器端响应的MIME类型。

data

发送到服务器的数据。可所以一个查询字符串,比如 key1=value1&amp;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)dataTypescriptjsonp时默认为 false。设置为 false 将不缓存此页面。

当应用GETHEAD方法发送请求时要添加时间戳参数 (net Date()).getTime() 来保障每次发送的URL不同, 可以防止浏览器缓存.(只有GETHEAD方法的请求浏览器才会缓存)

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-SinceIF-None-Match和请求头Last-ModifiedEtag提高GETHEAD方法请求效率。(只有GETHEAD方法的请求浏览器才会缓存)

global

(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局AJAX 事件:ajaxStartajaxSendajaxSuccessajaxErrorajaxCompleteajaxStop。(比如请求频繁时可禁用全局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)true:同域请求;false跨域请求。

倘若crossDomain标识为null,则jQuery会主动根据本地url、端口来剖析。可以根据需求直接赋值来提高性能。

平日情况下由服务器主动剖析便可,但如果你想在同一域中强制跨域请求(像JSONP一样),那么将crossDomaintrue,这答应你将服务器端重定向到另一个域。

scriptCharset

只有当请求时dataType"jsonp""script",并且type"GET"才会用于修改charset

因为此时是动态创立<script>来完成脚本加载,但是如果js中的编码与页面的编码不分歧时,js可能加载失败或者显示乱码或者IE下报某符号错误。设置此参数就相当于为<script>标签设置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”数组。例如,如果需要的话,你可以用它来设置跨域的withCredentialstrue,即:

xhrFields: { withCredentials: true }

5个局部事件

beforeSenddataFiltersuccesserrorcomplete。(详见后面事件分析部份)

ajax函数外部剖析或外部供给

dataTypes

dataType按空格拆分所得。

isLocal

根据协议肯定以后url请求的是否为本地请求。

jQuery中定义默认值为:

isLocal:/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/.test(/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/.exec(url))

hasContent

GETHEAD请求为true,用于处理datacontentType参数。

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;}
}
     
每日一道理
有些冷,有些凉,心中有些无奈,我一个人走在黑夜中,有些颤抖,身体瑟缩着,新也在抖动着,我看不清前方的路,何去何从,感觉迷茫,胸口有些闷,我环视了一下周围,无人的街头显得冷清,感到全部世界都要将我放弃。脚步彷徨之间,泪早已滴下……

2) jqXHR对象

为不同浏览器内置的XMLHttpRequest供给了分歧的超集。对于XMLHttpRequest之外的传输机制,比如JSONP请求,jXHR对象也可以停止处理。

超集与真子集:

如果一个集合S2中的每一个元素都在集合S1中,且集合S1中可能包含S2中没有的元素,则集合S1就是S2的一个超集。 S1S2的超集,则S2S1的真子集,反之亦然。

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()等,都是jQuerydeferred对象API

开辟网站的进程中,我们经常遇到某些耗时很长的javascript操纵。其中,既有异步的操纵(比如ajax读取服务器数据),也有同步的操纵(比如遍历一个大型数组),它们都不是立即能得到结果的。

平日的做法是,为它们指定回调函数(callback)。即事前规定,一旦它们运行结束,应当调用哪些函数。但是,在回调函数方面,jQuery的功能非常弱。为了改变这一点,jQuery开辟团队就设计了deferred对象。

简略说,deferred对象就是jQuery的回调函数处理方案。在英语中,defer的意思是"延迟",所以deferred对象的含意就是"延迟"到未来某个点再执行。 它处理了如何处理耗时操纵的问题,对那些操纵供给了更好的控制,以及统一的编程接口。

更专业的资源:jQuery的deferred对象详解

2. jQuery Ajax事件

jQuery框架中,伴随Ajax请求会触发多少事件,我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery中有两种Ajax事件:局部事件和全局事件。

1) 局部事件(回调函数),在$.ajax()方法的options参数中声明,可以用来设置请求数据和获取、处理响应数据。

beforeSend

该函数可在发送请求前修改XMLHttpRequest对象,如添加自定义 HTTP 头。

签名:function (jqXHR,s) { }

函数说明:传入jqXHRs对象

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)

函数说明:传入事件对象、jqXHRs对象

ajaxSuccess

全局的请求胜利

签名:function(e,jqXHR,s,data)

函数说明:传入事件对象、jqXHRs对象、请求胜利返回的响应数据

ajaxError

全局的发生错误时触发

签名:function(e,jqXHR,s,errorData)

函数说明:传入事件对象、jqXHRs对象、请求失败返回的错误信息

ajaxComplete

全局的请求完成时触发

签名:function(e,jqXHR,s)

函数说明:传入事件对象、jqXHRs对象

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方法完全的事件流

请求和对象

请求和对象

4) 示例:$.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); }

效果图:

请求和对象

5) $.ajax()方法的全局事件典范用例

你的页面存在多个甚至为数不少的ajax请求,但是这些ajax请求都有雷同的消息机制。ajax请求开始前显示一个提示框,提示“正在读取数据”;ajax请求胜利时提示框显示“数据获取胜利”;ajax请求结束后隐藏提示框。

a) 不应用全局事件的做法是:

$.ajax()加上beforeSendsuccesscomplete回调函数,在回调函数中加上处理提示框。

b) 应用全局事件的做法是:

$(document).ajaxStart(onStart) .ajaxComplete(onComplete) .ajaxSuccess(onSuccess);function onStart(event) { //..... }function onComplete(event, xhr, settings) { //..... }function onSuccess(event, xhr, settings) { //..... }

3. jQuery ajax相关函数

1) jQuery.ajaxSetup({ })

jQuery.ajax()函数中的所有的参数选项都可以通过jQuery.ajaxSetup()函数来全局设置默认值。

2) $.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)。

3) 对象序列化

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$.param() 方法将会通过深度递归的方法序列化对象,以便符合现代化脚本语言的需求,比如 PHPRuby on Rails 等。你可以传递traditional = true 或在ajax功能中传递包含traditionaloptions参数。

传送门:$.param()深度递归详解$.param() 示例

b) $("").serializeArray()

可以将一个或多个表单元素(比如 inputtextarea等),或者 form 元素本身的jQuery对象序列化为JSON对象。(非 JSON 字符串。需要应用插件或者第三方库停止字符串化操纵)

特殊说明,元素不能被禁用(禁用的元素不会被包含在内),并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。

传送门:$("").serializeArray() 示例

c) $("").serialize()

可以将一个或多个表单元素(比如 inputtextarea等),或者 form 元素本身的jQuery对象序列化为经过URL编码转换后的字符串,可直接用在URL查询字符串中。

jQuery外部定义:

serialize: function() {return jQuery.param( this.serializeArray() );}

传送门:$("").serialize()示例

$.ajax()中常见应用示例

1. cacheifModified参数

1) cache参数:GETPOST最重要的区分(传送门)

语义上,GET是获取指定URL上的资源,是读操纵,重要的一点是不论对某个资源GET多少次,它的状态是不会改变的,在这个意义上,我们说GET是安全的(不是被密码学或者数据保护意义上的安全)。因为GET是安全的,所以GET返回的内容可以被浏览器,Cache服务器缓存起来。

POST的语意是对指定资源“追加/添加”数据,所所以不安全的,每次提交的POST,参与的代码都会认为这个操纵会修改操纵对象资源的状态,于是,浏览器在你按下F5的时候会跳出确认框,缓存服务器不会缓存POST请求返回内容。

2) ifModified参数:通过ifModified参数提高请求性能(即:“条件GET”:Last-Modified / If-Modified-SinceETag / If-None-Match

当你请求的资源并不是一层不变的时候,即不能简略的一直应用客户端缓存时,你可能通过将cache设置为false来发送请求,这实际上是在url加上时间戳组合成新的url,每次发送新的请求,这明显加大了服务器的压力。

对于这类情况,我们可以通过ifModified参数改良缓存方法(即:cacheifModified都设置为true),仅在请求的数据改变时重新获取。通过这类方法请求的url不会改变,并且每次都会发送到服务器,只是会有检验方法验证是否需要重新获取数据从而节省带宽和开销。

更多ETag描述(优点,处理了Last-Modified没法处理的一些问题,什么场合不应当被应用)

进程如下:

a) $.ajax()函数的cacheifModified参数同时设置为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);

2. 跨域请求

JavaScript中,有一个很重要的安全性限制,被称为Same-Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。所谓同源是指,域名(host),协议(protocol),端口(port)雷同。

URL

说明

是否答应通信

能否通过javascript处理

http://www.a.com/a.js

http://www.a.com/b.js

同一域名下

答应

http://www.a.com/lab/a.js

http://www.a.com/script/b.js

同一域名下不同文件夹

答应

http://www.a.com:8000/a.js

http://www.a.com/b.js

同一域名,不同端口

不答应

http://www.a.com/a.js

https://www.a.com/b.js

同一域名,不同协议(httphttps

不答应

不能

http://www.a.com/a.js

http://70.32.92.74/b.js

域名和域名对应ip

不答应

http://www.cnblogs.com/a.js

http://www.a.com/b.js

http://script.a.com/b.js

http://a.com/b.js

不同域名(host)

不答应

1) $.ajax()为我们供给了两种处理方案,不过都是只支撑get方法,分别是jQueryjQuery.ajax“jsonp”格式和jquery.getScript()(即jQuery.ajax “script”格式)方法。

2) $.ajax()跨域原理分析

由于javascript的安全限制“同源策略”,所以我们没法应用XMLHttpRequest直接请求别的域名下的资源。不过拥有src属性和href属性的<script>\<img>\<iframe><link>\<a>标签不受同源策略影响。$.ajax()供给的两种处理方案正是应用了动态创立<script>的方法来实现(即:生成<script>标签,src引入脚本,然后执行,最后移除<script>标签)。

3) jQuery.ajax()jsonpscript方法的异同点:

a) 雷同:都走$.ajax() script格式的流程;不会触发全局事件和局部事件;只支撑GET方法(POST请求会主动转化为GET请求);默认不启用缓存(cache:false)

b) 不同:jsonp方法可以通过jsonpjsonpCallback参数指定一个特定回调函数。

4) 示例部署说明:

因为是跨域请求,所以需要在本机部署两个示例程序以模拟不同域之间的访问,并且在示例代码中需要修改“crossUrl”为目标域路径。

5) 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) jsonpjsonpCallback参数而改变的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 新技能

最后,再来一张示例截图吧!!!

示例源码:触碰jQueryAJAX异步详解.rar

请求和对象

本篇博文到此结束,重要分析内容是应用XMLHttpRequest实现ajax请求和XMLHttpRequest Level 2为我们所带来的改良,最后重点讲解了jQuery中通过$.ajax()方法实现ajax以及各个参数的详细分析,并立举了经典示例说明了:跨域请求、ajax全局事件、ajax局部事件、xhr二进制数据处理、如何高效应用缓存……

做为一个后台工程师,你是否想深入了解一些前台必须的技术呢?是的,我想了解,并且会慢慢把所了解到的技术以博文的方法整理分享给大家。

谢谢大家查阅,如果觉得文章不错,还请多多帮推荐……

文中出现比较多的相关资源链接,这里整理下便利大家日后快速找到链接:

1) jQuery相关

jQueryAPI文档

jQuery百度百科(Eg:模块,历史版本)

jQuery.ajax()中的预过滤器和分发机制函数inspectPrefiltersOrTransports详解

jQuery的deferred对象详解

$.param()深度递归详解

2) XMLHttpRequest Level 2 的新功能相关

XMLHttpRequest 增强功能

XMLHttpRequest Level 2 应用指南

XMLHttpRequest2 新技能

3) 跨域请求相关

JavaScript跨域总结与处理办法

总结了5js跨域方法:利用<iframe>标签和document.domain属性、动态创立scrip、利用<iframe>标签和location.hash属性、window.name实现的跨域数据传输、应用HTML5 postMessage利用flash跨域

域名和IP地址及域名剖析

xhr注入_百度百科

说说JSON和JSONP

4) HTTP相关

HTTP深入浅出 http请求

1) 分析了一次HTTP通信的7个步骤:建立TCP连接、Web浏览器向Web服务器发送请求命令、Web浏览器发送请求头信息、Web服务器应答、Web服务器发送应答头信息、Web服务器向浏览器发送数据、Web服务器关闭TCP连接

2) 分析HTTP请求格式

HTTP GET和POST的区分

HTTP 头部详解

HTTP Content-type对照表

格式:Content-Type: [type]/[subtype]; parameter

HTTP状态码一览表(HTTP Status Code

================================================

求职:ASP.NET高级工程师。(地点:广州,深圳)

今晚准备简历,步上新的求职之旅。希望有好工作推荐的园友给点帮助。

另外,我有关注 广州多益、3g门户网、广州39健康网 公司,如有外部信息或你是外部员工,我很希望能与你交流。QQ369220123

如果你想认识.net朋友的可以加入群:185718116(广深莞·NET技术)173844862.Net高级部落)

请求和对象

================================================

文章结束给大家分享下程序员的一些笑话语录: 话剧:程序员过沟
  本剧内容纯属虚构,如有雷同……HEHE……俺也没办法了。
  话说某市街道改建,某某软件公司门口横七竖八挖了几条大沟。一群程序员(SDK程序员赵某,VB程序员钱某,VC程序员孙某,DELPHI程序员李某)下班从公司里出来,看到门前的几条沟,于是各显神通……门前第一条沟也就半米来宽,SDK程序员赵某二话没说,轻轻一跃跳了过去,看到其它人纷纷把随身携带的公文包(类库)横在沟上踩着过沟,不屑地说,这么小一条沟,犯得着小题大做用那个吗?看我多么轻松多么洒脱多么……多么……(众人皆怒目横视之……)
  接着第二条沟有点宽度。SDK程序员赵某还是还是一马当先,飞跃而起……不好,还差一点才到……幸好凭着多年的(跳远?编程?)经验,单手抓住沟沿,颤巍巍地爬了上来,嘴里还念念有词“高手就是高手啊,虽然差一点就……不过毕竟……HEHE……跳远是过沟的基础嘛,有基础(SDK)就有一切的说……”(众人作瞠目结舌状……)看到别人跳过去了,可自己又跳不了那么远,只好再想办法了……VB程序员钱某,DELPHI程序员李某打开手提,连上手机,开始上网找可供过沟的控件……VC程序员孙某却不慌不忙,打开公文包,把几块衬板拆了下来,然后三下五除二拼成一个简易木桥……“虽然这几个板子(类)做得不怎么样,不过先把这个项目应付过去,有时间我自己做一个好了……”于是踩着板子过了沟。
  这时钱某和李某也分别找到了合适的东东。钱某找到的是“钢丝绳.ocx”,安装简单,使用方便,拉出一头,对孙某说“大虾,顺手拉兄弟一把……”,于是把绳子系在沟两边的绿化树木上,踩着钢丝就过了沟。刚刚站稳就四方作揖,“小生这里有礼了”。这时一戴着黄袖圈的老太太跳了出来,抓住钱某,“破坏绿化树木,罚款XXXX元,交钱,交钱,交钱!”(老人家作双枪老太婆怒视伪军状
……钱某被逼无奈,只好边掏钱,边对着后台叫道“导演,我这可是因公牺牲,不给个烈士称号也得报销”,后台一个臭鸡蛋飞出,“叫什么叫,我这个月的粮饷还不知哪里去领呢,都什么时代了,你不下岗都不错了……”)
  李某看着刚刚好不容易从台湾拖回来的“铝条.ZIP”

请求对象触碰jQuery:AJAX异步详解相关推荐

  1. 【转】4.1触碰jQuery:AJAX异步详解

    传送门:异步编程系列目录-- 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 X ...

  2. jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  3. Jquery学习总结(2)——jQuery Ajax用法详解

    [详解]jquery ajax在web应用开发中常用,主要包括有ajax,get,post,load,getscript等这几种常用无刷新操作方法,下面来给大家介绍一下.我们首先先从最简单的方法看起. ...

  4. ajax异步详解同步请求,ajax async异步请求和同步请求

    ajax async异步请求和同步请求 ajax是指异步加载.这个异步是相对于页面来说的,页面不刷新就加载服务器数据.ajax中的请求又分为同步请求和异步请求,这里是相对于进程来说的,ajax异步请求 ...

  5. Jquery Ajax 实例详解

    function test(){$.ajax({//提交数据的类型 POST GETtype:"POST",//提交的网址url:"testLogin.aspx" ...

  6. jQuery Ajax异步请求详解

    jQuery的Ajax API是对XMLHttpRequest对象的抽象,解决了浏览器之间的兼容性问题,同时提供了一些方便的方法.这篇博客的撰写参考了jQuery官网,jQuery Ajax API ...

  7. ajax拿table里的th值,Jquery Ajax 异步设置Table中某列的值

    可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...

  8. mvc php 分页,MVC+jQuery.Ajax异步实现增删改查和分页_jquery

    本文实例为大家分享了MVC+jQuery.Ajax异步实现增删改查和分页的具体代码,供大家参考,具体内容如下 1.Model层代码 using System; using System.Data; u ...

  9. 【前端用法】$.ajax()方法详解,以及$.ajax()标准写法

    使用JQuery中的异步请求$.ajax()方法,经常记不全参数,所以在这里记录一下,方便后续使用. 首先看一个标准的写法: $(document).ready(function () {$.ajax ...

最新文章

  1. android 点击热区,Android-android中有没有提供点击热区的功能
  2. 中文URL是否有利于网站SEO
  3. BundleFusion
  4. 漫画:如何用栈实现队列
  5. android unbound prefix
  6. excel拼接数据宏
  7. (20)System Verilog利用clocking块产生输出信号延迟激励
  8. mac r 导出csv文件_R在Max OS进行导入和导出xlsx文件
  9. JavaSE入门学习10:Java修饰符
  10. Atitit r2017 r4 doc list on home ntpc.docx 驱动器 D 中的卷是 p2soft 卷的序列号是 9AD0-D3C8 D:\ati ext\r2017
  11. 图片怎么转化word文档?分享一个实用的方法。
  12. 服务器上修改websphere变量,WebSphere常用设置
  13. c语言中的calloc函数
  14. 网吧管理系统C语言作业,C语言课程设计-网吧管理系统.doc
  15. 右键快捷创建mk文件
  16. 程序员们,国庆长假快乐呀!
  17. 计算机excel 的分栏在哪,excel分栏在哪里
  18. 论文阅读笔记《USAC: A Universal Framework for Random Sample Consensus》
  19. 发电机组工作安排问题
  20. python输出值报错_python:内建函数(一)数值相关、编码转换、help等

热门文章

  1. 高通骁龙处理器改名;联通承认4G时代犯错│IoT黑板报
  2. 读《20个月赚130亿》有感
  3. 网页嵌入Bilibili HTML5视频播放
  4. 【项目管理】聊聊需求管理跟踪
  5. 基于微服务的新零售业务中台OMS
  6. Gatsby精粹,面向未来的blog
  7. 数据库——数据库完整性
  8. RestTemplate中post请求实用分析
  9. 【MySQL】MySQL autocommit 以及隐式 自动提交 语句列表
  10. 三英战吕布:360与金山、腾讯、百度之间的恩怨情仇