重走JAVA编程路，还是熟悉的那个入门道路-AJAX回顾

第四天 进入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);     } });