Lightweight Footprint
Only 32kB minified and gzipped. Can also be included as an AMD module
CSS3 Compliant
Supports CSS3 selectors to find elements as well as in style property manipulation
Cross-Browser
What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It makes
things like HTML document traversal and manipulation, event handling,
animation, and Ajax much simpler with an easy-to-use API that works across
a multitude of browsers. With a combination of versatility and
extensibility, jQuery has changed the way that millions of people write
JavaScript.
Corporate Members
Support from our corporate members makes it possible for the jQuery
Foundation to continue our work on our JavaScript libraries and pushing
the open web forward with events and participation in the standards process.
for a full
list of corporate and individual members.
Other jQuery Foundation Projects
A Brief Look
DOM Traversal and Manipulation
Get the &button& element with the class &continue& and change its HTML to &Next Step...&
$( &button.continue& ).html( &Next Step...& )
Event Handling
Show the #banner-message element that is hidden with
display:none in its CSS when any button in #button-container is
var hiddenBox = $( &#banner-message& );$( &#button-container button& ).on( &click&, function( event ) {
hiddenBox.show();});
Call a local script on the server /api/getWeather
with the query parameter zipcode=97201
and replace the element #weather-temp&s html with the returned text.
url: &/api/getWeather&,
zipcode: 97201
success: function( result ) {
$( &#weather-temp& ).html( &&strong&& + result + &&/strong& degrees& );jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。
废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到).
1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。
url (String) : 请求的HTML页的URL地址。
data (Map) : (可选参数) 发送至服务器的 key/value 数据。
callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。
这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some & selector"。
这个方法可以很方便的动态加载一些HTML文件，例如表单。
示例代码：
$(".ajax.load").load("/yeer/archive//1500682.html .post",
function (responseText, textStatus, XMLHttpRequest){
this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0]
//alert(responseText);//请求返回的内容
//alert(textStatus);//请求状态：success，error
//alert(XMLHttpRequest);//XMLHttpRequest对象
这里将显示结果。
注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。
2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求
url (String) :& 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。示例代码：
$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){
//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
this; // 在这里this指向的是Ajax请求的选项配置信息，请参考下图
alert(data);
//alert(textStatus);//请求状态：success，error等等。
当然这里捕捉不到error，因为error的时候根本不会运行该回调函数
//alert(this);
点击发送请求：
jQuery.get()回调函数里面的 this ，指向的是Ajax请求的选项配置信息：
3. jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。示例代码：
Ajax.aspx：
Response.ContentType = "application/json";
Response.Write("{result: '" + Request["Name"] + ",你好！(这消息来自服务器)'}");
jQuery 代码：
$.post("Ajax.aspx", { Action: "post", Name: "lulu" },
function (data, textStatus){
// data 可以是 xmlDoc, jsonObj, html, text, 等等.
// // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this
alert(data.result);
}, "json");
点击提交：
这里设置了请求的格式为"json"：
如果你设置了请求的格式为"json"，此时你没有设置Response回来的ContentType 为：Response.ContentType = "application/json"; 那么你将无法捕捉到返回的数据。
注意一下，alert(data.result); 由于设置了Accept报头为“json”，这里返回的data就是一个对象，并不需要用eval()来转换为对象。
4. jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。
url (String) : 待载入 JS 文件地址。
callback (Function) : (可选) 成功载入后回调函数。
jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。 1.2中，您可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。
这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码：
加载并执行 test.js。
jQuery 代码:
$.getScript("test.js");
加载并执行 AjaxEvent.js ，成功后显示信息。
jQuery 代码:
$.getScript("AjaxEvent.js", function(){
alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同？");
加载完后请重新点击一下上面的 Load 请求看看有什么不同。
jQuery Ajax 事件
Ajax请求会产生若干不同的事件，我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件：局部事件 和 全局事件。
局部事件就是在每次的Ajax请求时在方法内定义的，例如：
beforeSend: function(){
// Handle the beforeSend event
complete: function(){
// Handle the complete event
全局事件是每次的Ajax请求都会触发的，它会向DOM中的所有元素广播，在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义：
$("#loading").bind("ajaxSend", function(){
$(this).show();
}).bind("ajaxComplete", function(){
$(this).hide();
$("#loading").ajaxStart(function(){
$(this).show();
我们可以在特定的请求将全局事件禁用，只要设置下 global 选项就可以了：
url: "test.html",
global: false,// 禁用全局Ajax事件.
下面是jQuery官方给出的完整的Ajax事件列表：
ajaxStart (Global Event)
This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.
beforeSend (Local Event)
This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)
ajaxSend (Global Event)
This global event is also triggered before the request is run.
success (Local Event)
This event is only called if the request was successful (no errors from the server, no errors with the data).
ajaxSuccess (Global Event)
This event is also only called if the request was successful.
error (Local Event)
This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).
ajaxError (Global Event)
This global event behaves the same as the local error event.
complete (Local Event)
This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.
ajaxComplete (Global Event)
This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
ajaxStop (Global Event)
This global event is triggered if there are no more Ajax requests being processed.
具体的全局事件请参考API文档。
好了，下面开始说jQuery里面功能最强的Ajax请求方法 $.ajax();&&
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。
注意： 如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见
当设置 datatype 类型为 'script' 的时候，所有的远程(不在同一个域中)POST请求都回转换为GET方式。
$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。
jQuery 1.2 中，您可以跨域加载 JSON 数据，使用时需将数据类型设置为 。使用
形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。数据类型设置为 "jsonp" 时，jQuery 将自动调用回调函数。(这个我不是很懂)
参数列表：
(默认: 当前页地址) 发送请求的地址。
(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
设置请求超时时间（毫秒）。此设置将覆盖全局设置。
(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend
发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
function (XMLHttpRequest) {
this; // the options for this ajax request
(默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。
function (XMLHttpRequest, textStatus) {
this; // the options for this ajax request
contentType
(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含 script 元素。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。
"json": 返回 JSON 数据 。
格式。使用
形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。
function (XMLHttpRequest, textStatus, errorThrown) {
// 通常情况下textStatus和errorThown只有其中一个有值
this; // the options for this ajax request
(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified
(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData
(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态
function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this; // the options for this ajax request
这里有几个Ajax事件参数：beforeSend ，success ，complete ，error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下，这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。
请认真阅读上面的参数列表，如果你要用jQuery来进行Ajax开发，那么这些参数你都必需熟知的。
示例代码，获取博客园首页的文章题目：
type: "get",
url: "/rss",
beforeSend: function(XMLHttpRequest){
//ShowLoading();
success: function(data, textStatus){
$(".ajax.ajaxResult").html("");
$("item",data).each(function(i, domEle){
$(".ajax.ajaxResult").append("&li&"+$(domEle).children("title").text()+"&/li&");
complete: function(XMLHttpRequest, textStatus){
//HideLoading();
error: function(){
//请求出错处理
这里将显示首页文章列表。
jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。
设置 AJAX 请求默认地址为 "/xmlhttp/"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。
jQuery 代码:
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
$.ajax({ data: myData });
serialize() 与 serializeArray()
serialize() : 序列表表格内容为字符串。
serializeArray() : 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
HTML代码：
&p id="results"&&b&Results: &/b& &/p&
&select name="single"&
&option&Single&/option&
&option&Single2&/option&
&select name="multiple" multiple="multiple"&
&option selected="selected"&Multiple&/option&
&option&Multiple2&/option&
&option selected="selected"&Multiple3&/option&
&/select&&br/&
&input type="checkbox" name="check" value="check1"/& check1
&input type="checkbox" name="check" value="check2"
checked="checked"/& check2
&input type="radio" name="radio" value="radio1"
checked="checked"/& radio1
&input type="radio" name="radio" value="radio2"/& radio2
serializeArray() 结果为：
阅读(...) 评论()3035人阅读
PHP/Python/前端（20）
& & 在项目推进过程中经常使用Ajax，通过Jquery提供的函数可以非常方便的使用Ajax，但是在实际使用中也遇到一些问题，例如如何防止浏览器使用缓存，如何使用同步方式等。通过博文整理总结希望自身有所提高。
& & 在这里通过一个加法例子说明问题.为了突出ajax，前端网页和后端PHP程序尽可能的简单。
& & 【前端】——add.html
图1 add页面
& & 【后端】——add.php
// 返回JSON格式
header('Content-Type:application/charset=utf-8');
$result = array();
$result[&result&] = $_GET[&a&] + $_GET[&b&];
echo json_encode($result, JSON_NUMERIC_CHECK);
& & 【代码仓库】——
& & &代码仓库位于bitbucket使用Hg(而不是Git)，Hg在windows或ubuntu上均有很好用的GUI工具——TortoiseHg，本人愚笨没能熟练掌握Git。
& & 【】——如果没有使用过Hg请参考博文hg clone部分操作即可。& &
1.常用的getJSON
& & 在项目推进过程中使用的最多的便是getJSON，getJSON可从服务器获得一个JSON数据包，请注意若使用JSON格式服务器HTTP首部中应包含application/json信息，否则会产生兼容性问题（简单说IE就可能出问题）。
var submit_async = function() {
$.getJSON('add.php', {
a: $('input[name=&a&]').val(),
b: $('input[name=&b&]').val()
function(data) {
$('#result').text(data.result);
& & 【HTTP请求和响应】
图2 完整的HTTP请求和响应
2.防止浏览器使用缓存
& & 浏览器为了加快运行速度，如果反复请求同一个URL，那么浏览器会使用缓存中的内容而不在向服务器重新请求。为了防止浏览器使用缓存，可以在URL之后加入一些变化的内容，最常用的方法便是加入当前时间的毫秒值，例如加入&now=&当前时间毫秒值&。（即使用这种方法也存在一些“顽固派”，例如运行iOS6系统的safari浏览器）。
var submit_async = function() {
$.getJSON('add.php', {
a: $('input[name=&a&]').val(),
b: $('input[name=&b&]').val(),
now: new Date().getTime() // 防止浏览器使用缓存
function(data) {
$('#result').text(data.result);
& & 【HTTP请求和响应】
图3 完整的HTTP请求和响应
3.使用同步方式
& & getJSON方法并没有同步选项，如果使用同步方式可使用ajax原生方法。同步方式需要设置async选项为false。
var submit_sync = function() {
type: &get&,
url: 'add.php',
async: false, // 使用同步方式
a: $('input[name=&a&]').val(),
b: $('input[name=&b&]').val(),
now: new Date().getTime() // 注意不要在此行增加逗号
contentType: &application/ charset=utf-8&,
dataType: &json&,
// cache: false,
success: function(data) {
$('#result').text(data.result);
} // 注意不要在此行增加逗号
& & 【HTTP请求和响应】
& & HTTP请求和响应同图3.
4.再议防止浏览器使用缓存
& & 在ajax方法中有一个cache选项，如果设置为cache:false意为禁止浏览器缓存。实现的方法和【2】非常相似，该参数在URL之后加入&_=&当前时间毫秒值&
var submit_sync = function() {
type: &get&,
url: 'add.php',
async: false, // 使用同步方式
a: $('input[name=&a&]').val(),
b: $('input[name=&b&]').val()
contentType: &application/ charset=utf-8&,
dataType: &json&,
cache: false,
success: function(data) {
$('#result').text(data.result);
} // 注意不要在此行增加逗号
& & 【HTTP请求和响应】
图4 完整的HTTP请求和响应
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1714356次
积分：16368
积分：16368
排名：第381名
原创：187篇
评论：1257条
所在地： 江苏无锡
(1)(2)(1)(1)(3)(1)(3)(2)(1)(7)(16)(17)(14)(5)(13)(9)(4)(15)(11)(13)(12)(1)(3)(2)(21)(1)(4)(2)(1)(5)(2)(1)评论-2063&
trackbacks-0
示例源码：
AJAX 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。它并非一种新的技术，而是以下几种原有技术的结合体。
1)使用CSS和XHTML来表示。
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是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或接收XML及其他数据的一套API。
XMLHttpRequest对象首次以ActiveX对象形式在微软Internet Explorer(IE) 5中以引入。其他浏览器制造商在认识到这一对象重要性后也纷纷实现了XMLHttpRequest对象，但是以一个本地JavaScript对象而不是作为一个ActiveX对象实现。而如今，由于安全性、标准等问题，微软已经在其IE 7中把XMLHttpRequest实现为一个本地JavaScript对象。
客服端请求
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()之前调用，才能成功发送请求头部信息。
浏览器申明自己接收的字符集
浏览器申明自己接收的编码方法，通常指定压缩方法，是否支持压缩，支持什么压缩方法（gzip，deflate）
客户端指定要请求的WEB服务器的域名/IP 地址和端口号
发出请求的页面的URI
标明发送或者接收的实体的MIME类型。传送门：
非标准HTTP头，只为firefox3标注是否为ajax异步请求，null表示为同步请求。
默认情况下，服务器对POST请求和提交Web表单不会一视同仁，将Content-Type头部信息设置为application/x-www-form-urlencoded (模拟表单提交)
send(string)
将请求发送到服务器。参数string仅用于POST请求；对于GET请求的参数写在url后面，所以string参数传递null。
调用此方法可取消异步请求，调用后，XHR对象停止触发事件，不允许访问任何与响应相关的属性；
服务端响应
onreadystatechange事件
对于异步请求，如果需要对服务器获取和操作响应结果，则在send() 之前，需要为onreadystatechange属性指定处理方法。该函数用于对服务器响应进行处理。
readyState
存有XMLHttpRequest的状态。每当readyState改变时，就会触发onreadystatechange事件。
从 0 到 4 发生变化：
对象已建立，尚未调用send方法
send方法已调用，但是当前的状态及http头未知
已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误
数据接收完毕,此时可以通过responseXml和responseText获取完整的回应数据
status（数字表示）
返回当前请求的http状态码。
表示成功处理了请求的状态代码。Eg：200
表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向。Eg：304
这些状态代码表示请求可能出错，导致服务器无法正常处理。Eg：404
这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。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/ 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) {
alert(data);
XMLHttpRequest Level 2
XMLHttpRequest是一个浏览器接口，使得Javascript可以进行 HTTP (S) 通信。但是，这个接口一直没有标准化，每家浏览器的实现或多或少有点不同。HTML 5 的概念形成后，W3C 开始考虑标准化这个接口。2008年 2 月，提出了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 新增的成员
设置ajax请求超时时限，过了这个时限，就自动停止 HTTP 请求。
ontimeout事件
当ajax超过timeout 时限时触发的回调函数。
指定响应格式
responseType
(默认：&text&)在发送请求前，根据您的数据需要，将xhr.responseType设置为&text&、&arraybuffer&、&blob&或&document&。
成功发送请求后，xhr的响应属性会包含DOMString、ArrayBuffer、Blob 或 Document 形式（具体取决于responseTyp的设置）的请求数据。
progress 事件
在XMLHttpRequest对象传递数据的时候用来返回进度信息。它分成上传和下载两种情况。下载的 progress 事件属于XMLHttpRequest对象，上传的 progress 事件属于XMLHttpRequest.upload对象。即：
xhr.onprogress = updateP
xhr.upload.onprogress = updateP
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/ charset=x-user-defined',
success: function (data) {
if (data) {
var byte = [];
for (var i = 0, len = data. i & ++i) {
var c = data.charCodeAt(i);
byte[byte.length] = c & 0
alert(byte);
浏览器会把相应数据当做文本数据接收，所以我们还必须再一个个字节地还原成二进制数据。位运算"c & 0xff"，表示在每个字符的两个字节之中，只保留后一个字节，将前一个字节扔掉。原因是浏览器解读字符的时候，会把字符自动解读成Unicode 的 0xF700-0xF7ff 区段。
截图如下：（测试环境：google Chrome 版本 26.0.1410.43）
服务器端返回二进制数据：
客服端输出：
a)使用mimeType: 'text/ charset=x-user-defined'参数。
b)没有对服务器的MIME类型进行重写，导致返回信息被浏览器格式化后输出的二进制数据与服务器不同。并且不同浏览器格式化后输出的二进制数据都有差异。
2)接收二进制数据（方法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.
if (arrayBuffer) {
var byteArray = new Uint8Array (arrayBuffer);
for (vari = 0; i&byteArray.byteL i++) {
// do something
5.更多XMLHttpRequest Level 2新功能描述请看：
jQuery框架的Ajax
&&& jQuery是一个快速、简单的JavaScript library，核心理念是write less,do more(写的更少,做的更多)。它简化了HTML 文件的traversing，事件处理、动画、Ajax 互动，从而方便了网页制作的快速发展。jQuery是为改变你编写JavaScript 的方式而设计的。更多jQuery科普知识请看：
&&& 下面介绍下jQuery框架中ajax相关API:
&&& 版本Jquery-1.7.1.js。
1.jQuery.ajax( [url,] options )
&&& 通过 HTTP 请求加载远程数据。
返回值：$.ajax() 返回jqXHR对象（jqXHR对象：为XMLHttpRequest对象的超集）。可用于手动终止请求abort()、为ajax函数设置额外的回调函数等。
ajax内部实现的两个重要对象：s对象和jqXHR对象。
由默认设置jQuery.ajaxSettings对象、options参数集合和jQuery.ajaxSetup({})默认设置合并而成s对象。
可由ajax的options参数设置
(默认: 当前页地址) 要请求的目的URL地址。
用于响应HTTP访问认证请求的用户名及密码
(默认: "GET") 请求方式 ("POST" 或 "GET")。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
预期服务器返回的数据类型。如果不指定，jQuery将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。
必须确保网页服务器报告的 MIME 类型与我们选择的dataType所匹配。比如说，XML的话，服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。
文档，可用jQuery处理。
返回纯文本 HTML 信息；包含的 script 标签会在插入dom时执行。
返回纯文本 JavaScript 代码，常常用于跨域请求。不会触发全局事件和局部事件；只支持GET方式（POST请求会自动转化为GET请求）；默认不启用缓存(cache:false)
返回 JSON 数据。JSON 数据是一种能很方便通过 JavaScript 解析的结构化数据。
JSONP 格式，用于跨域请求。
返回纯文本字符串
其中，text 和 xml 类型返回的数据不会经过处理。数据仅仅简单的将XMLHttpRequest的responseText或responseHTML属性传递给 success 回调函数。
如果指定了 script 或者jsonp类型，那么当从服务器接收到数据时，实际上是用了&script&标签而不是XMLHttpRequest对象。这种情况下，$.ajax() 不再返回一个XMLHttpRequest对象，并且也不会传递事件处理函数，比如beforeSend。
contentType
(默认: "application/x-www-form-urlencoded")标明发送或者接收的实体的MIME类型。当&非GET或HEAD请求&的HTTP请求时，会被设置为HTTP头请求信息。
多用途互联网邮件扩展（MIME，Multipurpose Internet Mail Extensions）；用于重写服务器端响应的MIME类型。
发送到服务器的数据。可以是一个查询字符串，比如 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 );
(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
设置请求超时时间（毫秒）。通过setTimeout(fn,time)实现。
(默认: 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&_=5
ifModified
(默认: false) 仅在服务器数据改变时获取新数据。通过响应头If-Modified-Since、IF-None-Match和请求头Last-Modified、Etag提高GET或HEAD方式请求效率。（只有GET和HEAD方式的请求浏览器才会缓存）
(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局AJAX 事件：ajaxStart、ajaxSend、ajaxSuccess、ajaxError、ajaxComplete、ajaxStop。（比如请求频繁时可禁用全局AJAX事件提高效率）
(默认：true)& 这个对象用于设置Ajax相关回调函数的上下文，让回调函数内this指向这个对象。如果不设定这个参数，那么回调函数中的this就指向调用本次AJAX请求时传递的options参数载体&s对象&。但对于全局Ajax事件来说，this都是指向全局事件所绑定的元素。
指定获得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。
因为此时是动态创建&script&来完成脚本加载，但是如果js中的编码与页面的编码不一致时，js可能加载失败或者显示乱码或者IE下报某符号错误。设置此参数就相当于为&script&标签设置charset属性。
(默认：{})& 设置HTTP请求头数据"{键:值}"。此设置发生在：jQuery所有影响HTTP头的参数(options)设置之后，beforeSend回调函数之前。
statusCode
(默认：{})& 定义一组HTTP状态码与回调函数的映射，当响应的状态码有匹配statusCode则会触发对应回调函数。例如，如果响应状态是404，将触发以下警报：
statusCode: {404: function() {
alert('page not found');
traditional
如果你想要用传统的方式来序列化数据，那么就设置为true。请参考。
声明附加到XMLHttpRequest对象的自定义&key-value&数组。例如，如果需要的话，你可以用它来设置为true，即：
xhrFields: { withCredentials: true }&&
5个局部事件
beforeSend、dataFilter、success、error、complete。（详见后面事件介绍部分）
由ajax函数内部解析或内部提供
由dataType按空格拆分所得。
根据协议确定当前url请求的是否为本地请求。
jQuery中定义默认值为：
isLocal:/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/.test(/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/.exec(url))
hasContent
非GET或HEAD请求为true，用于处理data和contentType参数。
一个"{类型字符串:正则表达式}"的对象，倘若dataTypes[0]为&*&时，用contents中的正则表达式去匹配contentType，匹配成功则用&类型字符串&覆盖dataTypes[0]。
jQuery内部定义如下：
contents: {
xml: /xml/,
html: /html/,
json: /json/,
script: /javascript|ecmascript/
浏览器能够处理的媒体类型，其值取决于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 );
// 执行脚本
2)jqXHR对象
为不同浏览器内置的XMLHttpRequest提供了一致的超集。对于XMLHttpRequest之外的传输机制，比如JSONP请求，jXHR对象也可以进行处理。
超集与真子集：
如果一个集合S2中的每一个元素都在集合S1中，且集合S1中可能包含S2中没有的元素，则集合S1就是S2的一个超集。 S1是S2的超集，则S2是S1的真子集，反之亦然。
&&& jqXHR对象我们常常使用如下成员，这些成员主要用于ajax的全局事件和局部事件，并且做为$.ajax()函数返回值返回。
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对象的含义就是"延迟"到未来某个点再执行。 它解决了如何处理耗时操作的问题，对那些操作提供了更好的控制，以及统一的编程接口。
更专业的资源：
2.jQuery Ajax事件
jQuery框架中，伴随Ajax请求会触发若干事件，我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery中有两种Ajax事件：局部事件和全局事件。
1)局部事件（回调函数），在$.ajax()方法的options参数中声明，可以用来设置请求数据和获取、处理响应数据。
beforeSend
该函数可在发送请求前修改XMLHttpRequest对象，如添加自定义 HTTP 头。
签名：function (jqXHR,s) { }
函数说明：传入jqXHR、s对象
dataFilter
在请求成功之后调用。若状态码为304(未修改)则不触发此回调。
签名：function (data, dataType) { return newD }
函数说明：传入返回的数据、"dataType"参数的值。并且必须返回新的数据传递给success回调函数
请求成功时触发。
签名：function (data,statusText,jqXHR) { }
函数说明：传入返回的数据、描述状态的字符串&success&、jqXHR对象
请求失败时调用此函数。
签名：function (jqXHR, textStatus, errorThrown) { }
函数说明：传入jqXHR对象、描述状态的字符串&error&、错误信息
请求完成后回调函数 (请求成功或失败之后均调用)
签名：function (jqXHR, textStatus) { }
函数说明：传入jqXHR对象、描述状态的字符串（可能值："No Transport"、"timeout"、"notmodified"---304 "、"parsererror"、"success"、"error"）
&&& &&& 定义方式例如：
beforeSend: function(){
// Handle the beforeSend event
complete: function(){
// Handle the complete event
2)全局事件，每次Ajax请求都会触发，它会向DOM中的所有元素广播，你只需为DOM中任意元素bind好全局事件即会触发（若绑定多次，则会依次触发为事件注册的回调函数）。
开始新的Ajax请求，并且此时jQuery对象上没有其他ajax请求正在进行。
签名：function(e)
函数说明：传入事件对象
当一个Ajax请求开始时触发
签名：function(e,jqXHR,s)
函数说明：传入事件对象、jqXHR、s对象
ajaxSuccess
全局的请求成功
签名：function(e,jqXHR,s,data)
函数说明：传入事件对象、jqXHR、s对象、请求成功返回的相应数据
全局的发生错误时触发
签名：function(e,jqXHR,s,errorData)
函数说明：传入事件对象、jqXHR、s对象、请求失败返回的错误信息
ajaxComplete
全局的请求完成时触发
签名：function(e,jqXHR,s)
函数说明：传入事件对象、jqXHR、s对象
当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.
var global = e.data.
$.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()加上beforeSend、success、complete回调函数，在回调函数中加上处理提示框。
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() :
s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value );
对于 jQuery 1.4，$.param() 方法将会通过深度递归的方式序列化对象，以便符合现代化脚本语言的需求，比如 PHP、Ruby on Rails 等。你可以传递traditional = true 或在ajax功能中传递包含traditional的options参数。
&&&&&&&&&& 传送门：和
b)$("").serializeArray()
可以将一个或多个表单元素（比如 input、 textarea等），或者 form 元素本身的jQuery对象序列化为JSON对象。（非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作）
特别说明，元素不能被禁用（禁用的元素不会被包括在内），并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。
&&&&&&&&&& 传送门：
c)$("").serialize()
可以将一个或多个表单元素（比如 input、 textarea等），或者 form 元素本身的jQuery对象序列化为经过URL编码转换后的字符串，可直接用在URL查询字符串中。
&&&&&& jQuery内部定义：
serialize: function() {
return jQuery.param( this.serializeArray() );
$.ajax()中常见应用示例
1.cache和ifModified参数
1)cache参数：GET和POST最重要的区别
语义上，GET是获取指定URL上的资源，是读操作，重要的一点是不论对某个资源GET多少次，它的状态是不会改变的，在这个意义上，我们说GET是安全的（不是被密码学或者数据保护意义上的安全）。因为GET是安全的，所以GET返回的内容可以被浏览器，Cache服务器缓存起来。
而POST的语意是对指定资源&追加/添加&数据，所以是不安全的，每次提交的POST，参与的代码都会认为这个操作会修改操作对象资源的状态，于是，浏览器在你按下F5的时候会跳出确认框，缓存服务器不会缓存POST请求返回内容。
2)ifModified参数：通过ifModified参数提高请求性能（即：&条件GET&：Last-Modified / If-Modified-Since和ETag / If-None-Match）
当你请求的资源并不是一层不变的时候，即不能简单的一直使用客户端缓存时，你可能通过将cache设置为false来发送请求，这实际上是在url加上时间戳组合成新的url，每次发送新的请求，这明显加大了服务器的压力。
对于这种情况，我们可以通过ifModified参数改进缓存方式（即：cache和ifModified都设置为true），仅在请求的数据改变时重新获取。通过这种方式请求的url不会改变，并且每次都会发送到服务器，只是会有检验方法验证是否需要重新获取数据从而节省带宽和开销。
过程如下：
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) {
alert(data);
if(!String.IsNullOrEmpty(context.Request.Headers["If-Modified-Since"]))
if (CheckResourceValidate())
// 检查资源有效性
// 如果资源有效，则直接返回304状态码，客户端回去到此状态码后会从缓存中取值。
context.Response.StatusCode = 304;
// 请求数据
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)相同。&&&
是否允许通信
能否通过javascript解决
同一域名下
/script/b.js
同一域名下不同文件夹
:8000/a.js
同一域名，不同端口
同一域名，不同协议（http和https）
http://70.32.92.74/b.js
http://a.com/b.js
不同域名(host)
1)$.ajax()为我们提供了两种解决方案，不过都是只支持get方式，分别是jQuery的jQuery.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()的jsonp和script方式的异同点：
a)相同：都走$.ajax() script格式的流程；不会触发全局事件和局部事件；只支持GET方式（POST请求会自动转化为GET请求）；默认不启用缓存(cache:false)
b)不同：jsonp方式可以通过jsonp和jsonpCallback参数指定一个特定回调函数。
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)因jsonp和jsonpCallback参数而改变的url如下。（即默认为：callback=jQuery随机值，更改为：jsonpParamName=crossCallback）
URL:http://192.168.1.100:6567/AjaxHandler.ashx?func=CrossRequest&jsonpParamName=crossCallback&_=8
b)服务器端获取到jsonp回调函数名后，返回一个函数表达式。
6)在XMLHttpRequest Level 2中新增了跨域访问方式、接收二进制等新功能，详细请看：
最后，再来一张示例截图吧！！！
示例源码：
本篇博文到此结束，主要介绍内容是使用XMLHttpRequest实现ajax请求和XMLHttpRequest Level 2为我们所带来的改进，最后重点讲解了jQuery中通过$.ajax()方法实现ajax以及各个参数的详细介绍，并立举了经典示例说明了：跨域请求、ajax全局事件、ajax局部事件、xhr二进制数据处理、如何高效使用缓存&&
做为一个后台工程师，你是否想深入了解一些前台必须的技术呢？是的，我想了解，并且会慢慢把所了解到的技术以博文的方式整理分享给大家。
谢谢大家查阅，如果觉得文章不错，还请多多帮推荐&&
文中出现比较多的相关资源链接，这里整理下方便大家日后快速找到链接：
1)jQuery相关
这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
2)XMLHttpRequest Level 2 的新功能相关
3)跨域请求相关
总结了5种js跨域方式：利用&iframe&标签和document.domain属性、动态创建scrip、利用&iframe&标签和location.hash属性、window.name实现的跨域数据传输、使用HTML5 postMessage、。
4)HTTP相关
1)介绍了一次HTTP通信的7个步骤：建立TCP连接、Web浏览器向Web服务器发送请求命令、Web浏览器发送请求头信息、Web服务器应答、Web服务器发送应答头信息、Web服务器向浏览器发送数据、Web服务器关闭TCP连接
2)介绍HTTP请求格式
&&&&&&& &&&
& & 5）Jquery其他部分
================================================
求职：ASP.NET高级工程师。（地点：广州，深圳）
今晚准备简历，步上新的求职之旅。希望有好工作推荐的园友给点帮助。
另外，我有关注 广州多益、3g门户网、广州39健康网 公司，如有内部信息或你是内部员工，我很希望能与你交流。QQ：
如果你想认识.net朋友的可以加入群：（广深莞&NET技术）& （.Net高级部落）
================================================
阅读(...) 评论()}