JQuery中的AJAX详解

JQuery中的AJAX详解目录(?)[-]load()方法load(url,[data],[callback])url为被加载的页面地址data表示发送到服务器的数据，格式为key/valuecallback格式为：function(responseText,textStatus,XMLHttpRequest){ }//responseText:请求返回的内容//textStatus:请求状态：success、error、notmodified、timeout这4种//XMLHttpRequest:XMLHttpRequest对象load()方法的传递方式根据参数data来自动指定。

如果没有参数传递，则采用GET方式传递；反之，则自动转换为POST 方式[javascript]view plaincopyprint?1.$("#div1").load(2."jsp/feed.jsp", //如果为" jsp/feed.jsp .filterClass"，则表示获取jsp页面中类名为filterClass的全部元素3.{4. name ：clf, age : 255.//经测试，变量名加引号、单引号、不加引号，后台都能取到值6.//如果含有中文，必须用encodeURI()进行编码，然后再服务器端用decodeURI()解码即可，如7.// {name:encodeURI($("#uName").val()),"password":$("#uPassword").val()},8.}, //也可以用数组传值，{"attr []",["clf","25","male"]}9.function (){10. $("#div2").text("AJAX");11.}12.);[javascript]view plaincopyprint?1.$("div").load("wrongname.xml",function(response,status,xhr){2.if (status=="success")3. {4. $("div").html("<ol></ol>");5. $(response).find("artist").each(function(){6. <span style="white-space:pre"> </span>varitem_text = $(this).text();7. <span style="white-space:pre"> </span>$('<li></li>').html(item_text).appendTo('ol');8. <span style="white-space:pre"> </span> });9. }10.else11. {12. $("div").html("Anerror occured: <br/>" + xhr.status + " " + xhr.statusText)13. }14. });getJSON()方法getJSON(url,[data],[callback])callback格式为function(data,textStatus) { }data是一个返回的json对象[javascript]view plaincopyprint?1.$.getJSON("test.js",{ name: "John", time: "2pm" }, function(json){2. alert("JSON Data: " +ers[3].name);3.});getScript()方法getScript(url,[callback])callback格式为function(response,status)response - 包含来自请求的结果数据status - 包含请求的状态（"success","notmodified", "error", "timeout" 或"parsererror"）通过此函数注入的脚本会自动执行get()方法get(url,data,callback(response,status,xhr),dataType)dataType可能的类型："xml"、"html" 、"text"、"script"、"json"、"jsonp"get() 方法通过远程HTTPGET 请求载入信息。

post()方法post(url,data,callback(response,status,xhr),dataType)与get()方法类似get()方法不适合传递数据量较大的数据，同时，其请求的历史信息会保存在浏览器的缓存中，有一定的风险，而以post()方法则不存在这方面的不足serialize()方法serialize() 方法通过序列化表单值，创建URL 编码文本字符串。

可以选择一个或多个表单元素（比如input 及/或文本框），或者form 元素本身。

序列化的值可在生成AJAX 请求时用于URL 查询字符串中。

[html]view plaincopyprint?1.<form>2.<div><input type="text"name="a" value="1"id="a"/></div>3.<div><input type="text"name="b" value="2"id="b"/></div>4.<div><input type="hidden"name="c" value="3"id="c"/></div>5.<div>6.<textarea name="d"rows="8" cols="40">4</textarea>7.</div>8.<div><select name="e">9.<option value="5"selected="selected">5</option>10.<option value="6">6</option>11.<option value="7">7</option>12.</select></div>13.<div>14.<input type="checkbox"name="f" value="8"id="f"/>15.</div>16.<div>17.<input type="submit"name="g" value="Submit"id="g"/>18.</div>19.</form>[javascript]view plaincopyprint?1.$('form').submit(function(){2. alert($(this).serialize());3.return false;4.});输出标准的查询字符串：a=1&b=2&c=3&d=4&e=5注释：只会将”成功的控件“序列化为字符串。

如果不使用按钮来提交表单，则不对提交按钮的值序列化。

如果要表单元素的值包含到序列字符串中，元素必须使用name 属性。

当表单中有多项被选中时，该方法只能传递一项的值ajax()方法1.url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。

2.type:要求为String类型的参数，请求方式（post或get）默认为get。

注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

3.timeout:要求为Number类型的参数，设置请求超时时间（毫秒）。

此设置将覆盖$.ajaxSetup()方法的全局设置。

4.async:要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。

如果需要发送同步请求，请将此选项设置为false。

注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

5.cache:要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

6.data:要求为Object或String类型的参数，发送到服务器的数据。

如果已经不是字符串，将自动转换为字符串格式。

get请求中将附加在url后。

防止这种自动转换，可以查看processData选项。

对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。