第四天 进入Ajax学习
Ajax(Asynchronous javaScript and xml)使用脚本操纵HTTP的Web应用架构。
jQuery对Ajax的操作进行了封装。常用方法如下。
Load()方法 | load()可以远程载入HTML并插入到DOM中。结构为: load(url [,data] [,callback]) · url(String):服务端资源的url。 · data(Obejct):发送到服务器的key/value数据 · callback(Function):请求完成时(无论成功或失败)的回调函数,在响应数据已经加载到包装集元素之后被调用。传入这个函数的参数是响应文本、状态码、以及xhr实例。 |
get()方法
| .get()使用GET进行异步请求。服务器的状态和应用的模型数据不受GET操作的影响。无论进行多少次GET操作,返回的结果是完全一致的。 $.get()结构为: $.get(url [, data] [, callback] [, type]) $.get()参数说明: · url(String):请求的服务器端资源的url · data(Object):以key/value的形式构造查询字符串追加到url · callback(Function):在请求成功(success)时被调用。将请求结果和状态传递给该方法。 · type(String):服务器端返回内容的格式。 · GET请求会将参数跟在url后进行传递,GET对传输的数据大小有限制(通常不大于2kb),GET方式请求的数据会被浏览器缓存,这种情况可能带来安全问题。 |
post()方法
| .post()发送到服务器的数据可以用来修改应用的模型状态。例如,可以添加或删除信息。 · POST请求则作为HTTP消息的实体内容发送给Web服务器,使用POST方式传递的数据量比GET大得多(理论上不受限制)
|
getScript()方法
| $.getScript()用来加载.js文件,与加载一个HTML片段一样,js文件会自动执行。
|
getJson()方法 | getJSON()用于加载JSON文件,用法与getScript()相同。
|
$.ajax()方法 | $.ajax()是jquery最底层的实现。 $.ajax(options) 这个方法只包含了1个参数,这个参数里面包含了$.ajax()所需要的请求设置以及回调函数,参数以key/value形式存在。 $.ajax()参数说明: · url(String):发送请求地址。 · type(String):请求方式(POST或GET),默认为GET。其他HTTP请求方法如PUT、DELETE,仅部分浏览器支持。 · data(Object或String):发送到服务器的数据。如果不是字符串,将自动转换为字符串格式。GET请求中将附加在url后。对象必须是key/value格式,例如{id:"xxyh", passWord:"123456"}转换为&id=xxyh&password=123456。如果是数组,将自动为不同值对应同一个名称。例如{name:["xxyh","dudu"]}转换:&name=xxyh&name=dudu。 · dataType(String):预期服务器返回的数据类型。如果不指定,jquery将根据HTTP包MINE信息返回responseXML或responseText,并作为回调函数参数传递。可用类型: o xml:返回XML文档,可用jquery处理 o html:返回纯文本HTML信息,包含的script标签会插入DOM时执行。 o script:返回纯文本Javascript代码。如果没有设置cache参数,不会自动缓存结果。在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。 o json:返回JSON数据。 o jsonp:JSONP格式。使用JSONP形式调用函数时,例如myurl?callback=?,jquery将自动替换后一个“?”为正确的函数名,以执行回调函数。 o text:返回纯文本字符串。 complete(Function):请求完成后回调函数(请求成功或失败后均调用)。 参数:xmlhttpRequest对象和一个描述成功请求类型的字符串。 function(XMLHttPRequest,textStatus){ this; // 调用本次Ajax请求时传递的options参数} success(Function):请求成功回调函数。有2个参数: 参数:由服务器返回,并根据dataType参数进行处理后的数据和描述状态的字符串。 function(data, textStatus) { // data 可能是xmlDoc,jsonObj,html,text等 this; // 调用本次Ajax请求时传递的options参数} error(Function):请求失败时被调用的函数。这个函数有3个参数,即XMLHttpRequest对象、错误信息和捕获的错误对象 function(XMLHttpRequest, textStatus, errorThrown){ // 通常情况下textStatus和errorThrown只有一个包含信息 this; // 调用本次Ajax请求时传递的options参数} contentType(String):当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。 jsonp(String):在一个jsonp请求中重写回调函数的名字。用来替代在“callback=?”这种GET或POST请求中URL参数里的“callback”部分,例如{jsonp:'onJsonPLoad'}会导致将“onJsonPLoad=?”传给服务器。
|
AJAX代码调用示例: $.ajax()方式:(dataType:xml) $.ajax({ type:"get", dataType:"xml", url:"http://mp.toutiao.com/articles/?source_type=0", //返回xml格式信息 beforeSend:function(xmlhttprequest){ $("img").show(); }, success:function(data,status){ $("div").html(""); $("item",data).each(function(i, domEle){ $("div").append("<li>"+$(domEle).children("title").text()+"</li>"); }); }, complete:function(){ $("img").hide(); }, error:function(xmlhttprequest,error){ alert(error); }});
$.ajax()方式:(dataType:html) $.ajax({ type:"post", url:"test.jsp", //返回xml格式字符串,如:<ul><li>aa</li><li>bb</li></ul> data:"index=3&name="+$("#name").val()+"&age="+$("#age").val()+"&sex="+$("input:radio:checked").val(), dataType:"html", timeout:50000, beforeSend:function(xmlhttprequest){ $("div").html("<img id='imgid' src='http://127.0.0.1/imges/loading.gif' />"); }, success:function(xml,status){ $(xml).each(function(){ $(this).children().each(function(){ $("<li></li>").html($(this).text()).appendTo("div"); }); }); }, error:function(xmlhttprequest,error){ alert(error); }, complete:function(){ $("#imgid").hide(); } });
$.ajax()方式:(dataType:script) $.ajax({ type: "post", url: "ajax.jsp", //返回格式如:"var a = {name:'lidi',age:20};" data: "index=5", dataType: "script", success:function(){ alert(a.name); }});
$.ajax()方式:(dataType:json) $.ajax({ type: "post", url: "ajax.jsp", //返回格式如:"{name:'lidi',age:20}" data: "index=5", dataType: "json", success:function(data){ alert(data.name); }}); |
新闻热点
疑难解答