首页 > 编程 > Java > 正文

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

2019-11-06 07:39:55
字体:
来源:转载
供稿:网友

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

 

 

 

 


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表