本文实例讲述了jquery学习笔记之ajax用法。分享给大家供大家参考，具体如下：
一、ajax请求
1、jquery.ajax(options)
通过 http 请求加载远程数据。jquery 底层 ajax 实现。简单易用的高层实现见 .get,.post 等。
.ajax()返回其创建的xmlhttprequest对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。
注意： 如果你指定了 datatype 选项，请确保服务器返回正确的 mime 信息，(如 xml 返回 text/xml)。错误的 mime 类型可能导致不可预知的错误。
注意：如果datatype设置为script，那么在远程请求时(不在同一个域下)，所有post请求都将转为get请求。(因为将使用dom的script标签来加载)
jquery 1.2 中，您可以跨域加载 json 数据，使用时需将数据类型设置为 jsonp。使用 jsonp 形式调用函数时，如 myurl?callback=? jquery 将自动替换 ? 为正确的函数名，以执行回调函数。数据类型设置为 jsonp 时，jquery 将自动调用回调函数。
返回值 xmlhttprequest
参数
options (可选) : ajax 请求设置。所有选项都是可选的。
选项
（1）、async (boolean) : (默认: true)
默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
（2）beforesend (function) : 发送请求前可修改 xmlhttprequest 对象的函数，如添加自定义 http 头。
xmlhttprequest 对象是唯一的参数。这是一个 ajax 事件。如果返回false可以取消本次ajax请求。
function (xmlhttprequest) { this; // 调用本次ajax请求时传递的options参数}
（3）、cache (boolean) : (默认: true,datatype为script时默认为false)
jquery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
（4）、complete (function) : 请求完成后回调函数 (请求成功或失败时均调用)。
参数： xmlhttprequest 对象和一个描述成功请求类型的字符串。 这是一个 ajax 事件
function (xmlhttprequest, textstatus) { this; // 调用本次ajax请求时传递的options参数}
（5）、contenttype (string) : (默认: application/x-www-form-urlencoded) 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
（6）、data (object,string) : 发送到服务器的数据。将自动转换为请求字符串格式。get 请求中将附加在url 后。查看processdata选项说明以禁止此自动转换。
必须为 key/value 格式。如果为数组，jquery 将自动为不同值对应同一个名称。如 {foo:[bar1, bar2]} 转换为 '&foo=bar1&foo=bar2'。
（7）、datafilter (function) :给ajax返回的原始数据的进行预处理的函数。提供data和type两个参数：data是ajax返回的原始数据，type是调用jquery.ajax时提供的datatype参数。函数返回的值将由jquery进一步处理。
function (data, type) { // 对ajax返回的原始数据进行预处理 return data // 返回处理后的数据}
（8）、datatype (string) : (默认值：智能判断xml或者html)
预期服务器返回的数据类型。如果不指定，jquery 将自动根据 http 包 mime 信息返回responsexml 或 responsetext，并作为回调函数参数传递，可用值:
xml: 返回 xml 文档，可用 jquery 处理。
html: 返回纯文本 html 信息；包含的script标签会在插入dom时执行。
script: 返回纯文本 javascript 代码。不会自动缓存结果。除非设置了cache参数。注意：在远程请求时(不在同一个域下)，所有post请求都将转为get请求。(因为将使用dom的script标签来加载)
json: 返回 json 数据 。
jsonp: jsonp 格式。使用 jsonp 形式调用函数时，如 myurl?callback=? jquery 将自动替换 ? 为正确的函数名，以执行回调函数。
text: 返回纯文本字符串
（9）、error (function) : (默认: 自动判断 (xml 或 html)) 请求失败时调用时间。参数有以下三个：xmlhttprequest 对象、错误信息、（可选）捕获的错误对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是timeout, error, notmodified 和 parsererror。ajax 事件。
function (xmlhttprequest, textstatus, errorthrown) { // 通常 textstatus 和 errorthrown 之中 // 只有一个会包含信息 this; // 调用本次ajax请求时传递的options参数}
（10）、global (boolean) : (默认: true) 是否触发全局 ajax 事件。设置为 false 将不会触发全局 ajax 事件，如 ajaxstart 或 ajaxstop 可用于控制不同的 ajax 事件。
（11）、ifmodified (boolean) : (默认: false) 仅在服务器数据改变时获取新数据。使用 http 包 last-modified 头信息判断。
（12）、jsonp (string) : 在一个jsonp请求中重写回调函数的名字。这个值用来替代在callback=?这种get或post请求中url参数里的callback部分，比如{jsonp:'onjsonpload'}会导致将onjsonpload=?传给服务器。
（13）、password (string) : 用于响应http访问认证请求的密码
（14）、processdata (boolean) : (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 application/x-www-form-urlencoded。如果要发送 dom 树信息或其它不希望转换的信息，请设置为 false。
（15）、scriptcharset (string) : 只有当请求时datatype为jsonp或script，并且type是get才会用于强制修改charset。通常在本地和远程的内容编码不同时使用。
（16）、success (function) : 请求成功后的回调函数。参数：由服务器返回，并根据datatype参数进行处理后的数据；描述状态的字符串。 ajax 事件。
function (data, textstatus) { // data 可能是 xmldoc, jsonobj, html, text, 等等 this; // 调用本次ajax请求时传递的options参数}
（17）、timeout (number) : 设置请求超时时间（毫秒）。此设置将覆盖全局设置。
（18）、type (string) : (默认: get) 请求方式 (post 或 get)， 默认为 get。注意：其它 http 请求方法，如 put 和 delete 也可以使用，但仅部分浏览器支持。
（19）、url (string) : (默认: 当前页地址) 发送请求的地址。
（20）、username (string) : 用于响应http访问认证请求的用户名
（21）、xhr (function) : 需要返回一个xmlhttprequest 对象。默认在ie下是activexobject 而其他情况下是xmlhttprequest 。用于重写或者提供一个增强的xmlhttprequest 对象。这个参数在jquery 1.3以前不可用。
ps:上述红色标出的部分是大多数ajax调用常用的参数设置，利用这几个参数就可以成功实现ajax调用了.
示例
//jqtest.jsfunction jqajaxtest() { var jqrequesturl = ajaxhandler.ashx; //1、 加载并执行一个 js 文件 $.ajax({ type: get, url: js/jqloadjs.js, datatype: script }); //2、装载一个 html 网页最新版本 $.ajax({ url: test.htm, cache: false, //没有缓存的说 success: function(html) { //alert(html); $(#spangethtml).css(display, block); $(#spangethtml).css(color, red); $(#spangethtml).append(html); } }); //3、获取并解析一个xml文件(从服务端获取xml) $.ajax({ type: 'get', datatype: 'xml', //这里可以不写，但千万别写text或者html url: jqrequesturl + ?action=jquergetxmlrequest, success: function(xml) { //正确解析服务端的xml文件 $(xml).find(profile).each(function(i) { var name = $(this).children(username).text(); //取对象文本 var location = $(this).children(location).text(); alert(xml at server is gotten by client: + name + is living in + location); }); }, error: function(xml) { alert('an error happend while loading xml document '); } }); //4、发送 xml 数据至服务器(客户端发送xml到服务端) var xmldocument = + jeff wong + beijing + ; $.ajax({ url: jqrequesturl + ?action=jqueryxmlrequest, processdata: false, //设置 processdata 选项为 false，防止自动转换数据格式。 //type: xml, cache: false, type: xml, data: xmldocument, success: function(html) { alert(html); //弹出提示 $(#spanresult).css(display, block); $(#spanresult).css(color, red); $(#spanresult).html(html); //给当前dom的一个span元素赋值 }, error: function(oxmlhttpreq, textstatus, errorthrown) { alert(jquery ajax xml request failed); $(#spanresult).css(display, block); $(#spanresult).css(color, red); $(#spanresult).html(jquery ajax xml request failed); //提示出错 } }); //5、同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。 var html = $.ajax({ //没有type 默认为get方式 url: jqrequesturl + ?action=syncrequest, async: false }).responsetext; alert(html); //6、显式get测试 $.ajax({ type: get, url: jqrequesturl + ?action=jquery&username= + $(#txtusername).val(), cache: false, success: function(html) { // alert(html); //弹出提示 $(#spanresult).css(display, block); $(#spanresult).css(color, red); $(#spanresult).html(html); //给当前dom的一个span元素赋值 }, error: function(oxmlhttpreq, textstatus, errorthrown) { alert(jquery ajax request failed); $(#spanresult).css(display, block); $(#spanresult).css(color, red); $(#spanresult).html(jquery ajax request failed); //提示出错 } }); //7、显式post测试 $.ajax({ type: post, url: jqrequesturl, data: action=jquerysavedata&username=jeffwong&location=beijing, success: function(html) { alert(html); } });}
几个相关文件：
a、处理ajax请求的服务端文件：ajaxhandler.ashx，对应的cs文件：
using system;using system.collections.generic;using system.linq;using system.web;using system.web.sessionstate;using system.xml;namespace myjqtest{ public class ajaxhandler : ihttphandler, irequiressessionstate { /// /// 可复用 /// public bool isreusable { get { return true; } } public void processrequest(httpcontext context) { ajaxoperations(context); } private void ajaxoperations(httpcontext context) { string action = context.request[action]; if (!string.isnullorempty(action)) { switch (action) { default: break; case jquery: processjqueryrequest(context); break; case jquerysavedata: processjquerysavedata(context); break; case syncrequest: processjquerysyncrequest(context); break; case jqueryxmlrequest: processjqueryxmlrequest(context); break; case jquergetxmlrequest: processjquerygetxmlrequest(context); break; } } } private void processjqueryrequest(httpcontext context) { context.response.clearcontent(); context.response.contenttype = text/plain; //设置输出流类型 context.response.cache.setcacheability(httpcacheability.nocache); //没有缓存 string result = context.request[username].trim(); context.response.write(you have entered a name: + result); } private void processjquerysavedata(httpcontext context) { context.response.clearcontent(); context.response.contenttype = text/plain; //设置输出流类型 context.response.cache.setcacheability(httpcacheability.nocache); //没有缓存 string name = context.request[username].trim(); string location = context.request[location].trim(); context.response.write(your data have been saved:your name is + name + ,living in + location); } private void processjquerysyncrequest(httpcontext context) { context.response.clearcontent(); context.response.contenttype = text/plain; //设置输出流类型 context.response.cache.setcacheability(httpcacheability.nocache); //没有缓存 context.response.write(your sync ajax request has been processed.); } /// /// 简单的xml请求处理(服务端从客户端获取xml) /// /// private void processjqueryxmlrequest(httpcontext context) { context.response.clearcontent(); context.response.cache.setcacheability(httpcacheability.nocache); //没有缓存 xmldocument doc = new xmldocument(); try { doc.load(context.request.inputstream); //获取xml (这里需要注意接受xml数据的方法) context.response.contenttype = text/plain; //设置输出流类型 string name = doc.selectsinglenode(profile/username).innertext; string location = doc.selectsinglenode(profile/location).innertext; context.response.write(your xml data have received,and your name is + name + ,living in + location); } catch (exception ex) { context.response.write(get xml data failed.); throw ex; } } /// /// 返回简单的xml(服务端返回客户端xml) /// /// private void processjquerygetxmlrequest(httpcontext context) { context.response.clearcontent(); context.response.cache.setcacheability(httpcacheability.nocache); //没有缓存 xmldocument doc = new xmldocument(); try { doc.load(context.server.mappath(/jeffwong.xml)); context.response.contenttype = text/xml;charset=utf-8; //设置输出流类型 context.response.write(doc.outerxml); } catch (exception ex) { context.response.write(load xml data failed.); throw ex; } } }}
b、aspx，html和xml文件（直接放在根目录下）
aspx文件是ajax请求页面：
please input a name:

html很简单：
test.htm：
it is a simple ajax test

xml文件：
jeffwong.xml：
jeff wong beijing
c、js文件（放在根目录js文件夹下）
jqloadjs.js 测试ajax加载js文件用
复制代码 代码如下:
alert(this is a ajax request script test);
2、load(url,[data],[callback])
载入远程 html 文件代码并插入至 dom 中。
默认使用 get 方式 - 传递附加参数时自动转换为 post 方式。jquery 1.2 中，可以指定选择符，来筛选载入的 html 文档，dom 中将仅插入筛选出的 html 代码。语法形如 url #some > selector。请查看示例。
返回值 jquery
参数
url (string) : 待装入 html 网页网址。
data (map,string) : (可选) 发送至服务器的 key/value 数据。在jquery 1.3中也可以接受一个字符串了。
callback (callback) : (可选) 载入成功时回调函数。
示例：
function jqajaxtest() { $(#spanresult).load(test.htm); $(#spanresult).css(display, block); $(#spanresult).css(color, red);}
3、jquery.get(url,[data],[callback],[type])
通过远程 http get 请求载入信息。
这是一个简单的 get 请求功能以取代复杂 .ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用.ajax。
返回值 xmlhttprequest
参数
url (string) : 待载入页面的url地址
data (map) : (可选) 待发送 key/value 参数。
callback (function) : (可选) 载入成功时回调函数。
type (string) : (可选) 返回内容格式，xml, html, script, json, text, _default。
示例
function jqajaxtest() { var jqrequesturl = ajaxhandler.ashx; $.get(jqrequesturl + ?action=jquery, { username: jeff wong, location: beijing }, jqgetnormalcallback, 'text'); //返回数据类型}function jqgetnormalcallback(odata) { $(#spanresult).html(odata);//这里直接json数据绑定了，下一个jquery方法会有处理 $(#spanresult).css(display, block); $(#spanresult).css(color, red);}
ajaxhandler.ashx代码：
using system;using system.collections.generic;using system.linq;using system.web;using system.web.sessionstate;using system.xml;namespace myjqtest{ public class ajaxhandler : ihttphandler, irequiressessionstate { /// /// 可复用 /// public bool isreusable { get { return true; } } public void processrequest(httpcontext context) { ajaxoperations(context); } private void ajaxoperations(httpcontext context) { string action = context.request[action]; if (!string.isnullorempty(action)) { switch (action) { default: break; case jquery: processjqueryrequest(context); break; } } } private void processjqueryrequest(httpcontext context) { context.response.clearcontent(); context.response.contenttype = text/plain; //设置输出流类型 context.response.cache.setcacheability(httpcacheability.nocache); //没有缓存 string username = context.request[username].trim(); string location = context.request[location].trim(); string jsonobject = {\username\:\ + username + \,\location\:\ + location + \}; context.response.write(jsonobject); } }}
ps：本例中，我们返回的是一段json类型的数据，在客户端没有对json类型数据进行处理，在下一个方法（jquery.getjson）中会改进处理的。
4、jquery.getjson(url,[data],[callback])
通过 http get 请求载入 json 数据。
在 jquery 1.2 中，您可以通过使用jsonp 形式的回调函数来加载其他网域的json数据，如 myurl?callback=?。jquery 将自动替换 ? 为正确的函数名，以执行回调函数。
注意：此行以后的代码将在这个回调函数执行前执行。
返回值 xmlhttprequest
参数
url (string) : 发送请求地址。
data (map) : (可选) 待发送 key/value 参数。
callback (function) : (可选) 载入成功时回调函数。
示例
function jqajaxtest() { var jqrequesturl = ajaxhandler.ashx; //getjson方法调用 $.getjson(jqrequesturl + ?action=jquery, { username: jeff wong, location: beijing }, jqgetjsoncallback); //返回json数据类型}//对json数据进行处理 (odata是json类型的数据)function jqgetjsoncallback(odata) { var ojsonstr = ; //取json中的数据,并呈现 ojsonstr += username: + odata.username + location: + odata.location +
; //在div中显示所有数据 $(#divresult).html(ojsonstr); $(#divresult).css(display, block); $(#divresult).css(color, red);}
5、jquery.getscript(url,[callback])
通过 http get 请求载入并执行一个 javascript 文件。
jquery 1.2 版本之前，getscript 只能调用同域 js 文件。 1.2中，您可以跨域调用 javascript 文件。注意：safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getscript 加入脚本，请加入延时函数。
返回值 xmlhttprequest
参数
url (string) : 待载入 js 文件地址。
callback (function) : (可选) 成功载入后回调函数。
示例
function jqajaxtest() { var jsurl = js/jqloadjs.js; //getscript方法调用 $.getscript(jsurl, jqgetjscallback);}//odata返回的是整个js路径下js文件内容function jqgetjscallback(odata) { alert(odata);}
6、jquery.post(url,[data],[callback],[type])
通过远程 http post 请求载入信息。
这是一个简单的 post 请求功能以取代复杂 .ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用.ajax。
返回值 xmlhttprequest
参数
url (string) : 发送请求地址。
data (map) : (可选) 待发送 key/value 参数。
callback (function) : (可选) 发送成功时回调函数。
type (string) : (可选) 返回内容格式，xml, html, script, json, text, _default。
示例
function jqajaxtest() { var jqrequesturl = ajaxhandler.ashx; $.post(jqrequesturl + ?action=jquery, { username: jeff wong, location: beijing }, jqpostcallback, text); //返回text数据类型}function jqpostcallback(odata) { //在div中显示所有数据 $(#divresult).html(odata); $(#divresult).css(display, block); $(#divresult).css(color, red);}
二、ajax事件
1、ajaxcomplete(callback)
ajax 请求完成时执行函数。ajax 事件。
xmlhttprequest 对象和设置作为参数传递给回调函数。
返回值 jquery
参数
callback (function) : 待执行函数
示例
function jqajaxtest() { var jqrequesturl = ajaxhandler.ashx; $.post(jqrequesturl + ?action=jquery, { username: jeff wong, location: beijing }, jqpostcallback, text); //返回text数据类型 //ajax 请求完成时执行函数 $(#divresult).ajaxcomplete(function(event, request, settings) { $(this).append(
请求完成.); });}function jqpostcallback(odata) { //在div中显示所有数据 $(#divresult).html(odata); $(#divresult).css(display, block); $(#divresult).css(color, red);}
2、ajaxerror(callback)
ajax 请求发生错误时执行函数。ajax 事件。
xmlhttprequest 对象和设置作为参数传递给回调函数。捕捉到的错误可作为最后一个参数传递。
返回值 jquery
参数
callback (function) : 待执行函数
function (event, xmlhttprequest, ajaxoptions, thrownerror) { // thrownerror 只有当异常发生时才会被传递 this; // 监听的 dom 元素}
示例
function jqajaxtest() { var jqrequesturl = ajaxhandlers.ashx; //正确的文件名 ajaxhandler.ashx 这里故意写错 引发ajaxerror事件 $.post(jqrequesturl + ?action=jquery, { username: jeff wong, location: beijing }, jqpostcallback, text);}//ajax 请求发生错误时执行函数 (这一段放在jqajaxtest函数内也可以)$(#divresult).ajaxerror(function(event, request, settings) { $(#divresult).css(display, block); $(#divresult).css(color, red); $(this).append(
出错页面: + settings.url);});function jqpostcallback(odata) { //在div中显示所有数据 $(#divresult).html(odata); $(#divresult).css(display, block); $(#divresult).css(color, red);}
3、ajaxsend(callback)
ajax 请求发送前执行函数。ajax 事件。
xmlhttprequest 对象和设置作为参数传递给回调函数。
返回值 jquery
参数
callback (function) : 待执行函数
示例
function jqajaxtest() { var jqrequesturl = ajaxhandler.ashx; $.post(jqrequesturl + ?action=jquery, { username: jeff wong, location: beijing }, jqpostcallback, text);}//ajax 请求发送前执行函数$(#divresult).ajaxsend(function(evt, request, settings) { $(#divresult).css(display, block); $(#divresult).css(color, red); $(this).append(
开始请求: + settings.url +
);});function jqpostcallback(odata) { //在div中显示所有数据 $(#divresult).append(odata); $(#divresult).css(display, block); $(#divresult).css(color, red);}
4、ajaxstart(callback)
ajax 请求开始时执行函数。ajax 事件。
返回值 jquery
参数
callback (function) : 待执行函数
示例
function jqajaxtest() { var jqrequesturl = ajaxhandler.ashx; $.post(jqrequesturl + ?action=jquery, { username: jeff wong, location: beijing }, jqpostcallback, text);}//ajax 请求开始时执行函数$(#divresult).ajaxstart(function() { $(#divresult).css(display, block); $(#divresult).css(color, red); $(this).append(
请求开始了
);});function jqpostcallback(odata) { //在div中显示所有数据 $(#divresult).append(odata); $(#divresult).css(display, block); $(#divresult).css(color, red);}
5、ajaxstop(callback)
ajax 请求结束时执行函数。ajax 事件。
返回值 jquery
参数
callback (function) : 待执行函数
示例
function jqajaxtest() { var jqrequesturl = ajaxhandler.ashx; $.post(jqrequesturl + ?action=jquery, { username: jeff wong, location: beijing }, jqpostcallback, text);}//ajax 请求开始时执行函数$(#divresult).ajaxstop(function() { $(this).append(
请求已经结束了
);});function jqpostcallback(odata) { //在div中显示所有数据 $(#divresult).append(odata); $(#divresult).css(display, block); $(#divresult).css(color, red);}
6、ajaxsuccess(callback)
ajax 请求成功时执行函数。ajax 事件。
xmlhttprequest 对象和设置作为参数传递给回调函数。
返回值 jquery
参数
callback (function) : 待执行函数
示例
function jqajaxtest() { var jqrequesturl = ajaxhandler.ashx; $.post(jqrequesturl + ?action=jquery, { username: jeff wong, location: beijing }, jqpostcallback, text);}//ajax 请求成功时执行函数$(#divresult).ajaxsuccess(function(evt, request, settings) { $(this).append(
请求成功
); $(this).append(settings.url);});function jqpostcallback(odata) { //在div中显示所有数据 $(#divresult).append(odata); $(#divresult).css(display, block); $(#divresult).css(color, red);}
三、其他
1、jquery.ajaxsetup(options)
设置全局 ajax 默认选项。
参数见 '$.ajax' 说明。
返回值 jquery
参数
options (可选) : 选项设置。所有设置项均为可选设置。
示例
//设置 ajax 请求默认地址为 ajaxhandler.ashx，禁止触发全局 ajax 事件，用 post 代替默认 get 方法。其后的 ajax 请求不再设置任何选项参数。 $.ajaxsetup({ url: ajaxhandler.ashx, global: false, type: post});
2、serialize()
序列化表单内容为字符串。
返回值 jquery
参数
序列化表单内容为字符串，用于 ajax 请求。
示例
$(document).ready(function() { var oserializedstr = $(form).serialize(); //序列化表单内容为字符串 $(#results).append( + oserializedstr + );});
文档片段：
results:
single single2 multiple multiple2 multiple3
check1 check2 radio1 radio2
3、serializearray()
序列化表单内容，返回 json 数据结构数据。
返回值 jquery
参数
序列化表单内容为json ，用于 ajax 请求。
示例
$(document).ready(function() { var fields = $(select, :radio).serializearray(); //序列化表单select和raido为json jquery.each(fields, function(i, field) { $(#results).append(field.value + ); }); });
好了，关于jquery的ajax就介绍到这里，笔者的每个示例都测试通过了。jquery封装好的ajax函数用起来确实方便，有了这样的“神兵利器”，以后写ajax的应用程序肯定会更加得心应手。
希望本文所述对大家jquery程序设计有所帮助。