jQuery与Ajax(一)

1.jQuery中的AJAX

使用jQuery在网站中应用AJAX实现各种效果将非常简单。

jQuery的AJAX工具包封装有三个层次。第一层是ajax()函数,它封装了一些基础的AJAX操作。第二层是load(),get(),post()等函数,它们是对ajax()函数的再次封装,这些函数的使用较为频繁。第三层是getScript(),getJSON()函数,它们进一步封装了get(),这些函数可以用于跨域操作。

http://kendezhu.iteye.com/blog/686888

①load(),get(),post()函数

这三个函数都是只有请求状态为success即请求成功时才调用回调函数callback

load(url,[data],[callback])  返回值:jQuery  参数-url:请求的HTML页的URL地址String    data:发送到服务器的key/value数据Object     callback:请求完成时的回调函数(不需要是success),自动会将请求的结果,状态,XMLHttp对象传递给该函数     载入远程HTML文件代码并插入到匹配的DOM元素中

这个函数默认使用GET方式来传递,如果[data]参数有数据,就会自动转换为POST方式。

load.aspx

<form id="form1" runat="server">

    <div id="load1">

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

         jQuery-Ajax-load()

    </div>

    <div id="load2">

        <asp:Button ID="Button1" runat="server" Text="Button" />

    </div>

</form>

load()函数页面

 <input type="button" id="load1" value="load()" />

 <div id="1"></div>

 <div id="2"></div>

$(function(){

$("#load1").click(function(){$("#1").load("load.aspx")})

})

操作结果是将load.aspx页面的HTML文件代码加载并插入到了#1元素中

如将jQuery代码改成

$(function(){

$("#load1").click(function(){$("#1").load("load.aspx #load2",function(responseHtml,responseStatus,XMLHttpRequest){

$("#2").append("请求的HTML内容:"+responseHtml+"<br/>");

$("#2").append("请求状态:"+responseStatus+"<br/>");

$("#2").append("XMLHttp对象:"+XMLHttpRequest);

})})})

注意第一个参数,在请求页面后面使用了选择器来对请求的内容进行筛选,这里只向#1插入load.aspx中ID是load2的元素,另外这里又把回调函数参数加上了,请求后会将请求内容(这里为responseHtml,并且此时还没被筛选,是完整的load.aspx页面)请求状态及XMLHttp对象作为参数传给该函数。

补：如果不写回调函数的话，默认就是将responseHtml加到指定的选择器元素中，我们可以在回调函数中指定要加到哪个元素里，就像上面的代码$("#2").append("请求的HTML内容:"+responseHtml+"<br/>");做的那样

其中前面的$("#1")可以是一个不存在的容器 比如$("<div />").load(url,function(){ })这样会将返回的数据加到回调函数中指定的元素中，而不需要一个像#1这样存在的容器元素

 

jQuery.get(url,[data],[callback],[type])  返回值:jQuery  参数-url:请求的HTML页的URL地址String    data:发送到服务器的key/value数据Object     callback:请求完成时的回调函数(不需要是success),自动会将请求的结果,状态,XMLHttp对象传递给该函数  Type:客户端请求的类型(JSON,XML,TEXT,HTML等最好大写http://kendezhu.iteye.com/blog/687110)String  使用GET方式进行异步请求

get()函数页面

<input type="button" id="get1" value="get()" />

<div id="2"></div>

$("#get1").click(function(){$.get("get.ashx",{QQ:encodeURI("333"),PW:encodeURI("kid")},function(responseData,responseStatus){

$("#2").append("服务器返回的数据:"+eval('('+responseData+')').res2+"<br/>");

$("#2").append("请求状态:"+responseStatus+"<br/>");

},"JSON")})

get.ashx

public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "application/JSON";

            string qq = context.Server.UrlDecode(context.Request.QueryString["QQ"]);

            string pw = context.Server.UrlDecode(context.Request.QueryString["PW"]);

            context.Response.Write("{res1:'"+qq+"',res2:'"+pw+"'}");

        }

向get.ashx异步传递QQ，PW俩数据,传递以get方式传最终会以get.ashx?QQ=333&PW=kid的方式传过去,注意这里分别在客户端和服务器端使用的防止传递汉字等特殊字符串时丢失一些数据的加码和解码用到的函数。本来$.get()的第四个参数设置为"JSON"以及在服务器端设置好  context.Response.ContentType = "application/JSON";之后返回的对象(此处是esponseData)就是一个JSON对象http://kendezhu.iteye.com/blog/687110,但不知为何老是只返回一个JSON对象的字符串,所以用到了eval()函数http://jelly.iteye.com/blog/138707将该特殊的字符串转化成JSON对象(注意里面要加一个括号),之后就可用点操作符访问对象的属性了。但有一点要特别注意,就是在服务器端返回JSON对象时JSON对象的值如果是字符串要用单引号引起来,就像上面红色加亮显示的单引号那样。如{res1:['aa','bb']} 值是数组不用单引号,但数组里的元素是字符串自然要加单引号。

jQuery.post(url,[data],[callback],[type])   $.post()函数在使用上与$.get()函数并无太大不同,这里不再讲述。

②ajax()函数

$.ajax(options)是jQuery的底层Ajax实现,前面讲述的$.get,$.post等都是$.ajax简单易用的高层实现。$.ajax返回的是其创建的XMLHttpRequest对象。

返回值:XMLHttpRequest  参数-所有参数都是可选的,由于参数巨多,下面会一一介绍 这些参数都是通过json对象的形式存在的,如$.ajax({url:"ajax.php",timeout:20,data:{1:2,3:4}})  通过Http请求加载远程数据

参数列表:

url:发送请求的地址(默认为当前页面)String

type:请求方式get或post(默认为get)String

timeout:请求超时时间,单位毫秒(默认为0)Number

data:发送到服务器的数据,key/value格式{1:2,3:4},GET请求中附加在URL后,如果值为数组{1:["2","3"]}将自动为不同值对应同一个名称,如1=2&1=3。查看processData的值决定是否自动转换为请求字符串格式Object

processData:默认为true,将发送数据转换为对象(技术上讲并非字符串)以配合默认内容类型application/x-www-form-urlencoded。如果要发送DOM树信息或其他不希望转换的信息,可以设置为false  Boolean

contentType:发送数据至服务器时内容编码类型,默认是application/x-www-form-urlencoded,适合多数场合String

username:如果服务器需要登录访问时的用户名,一般不需要String

password:如果服务器需要登录访问时的密码,一般不需要String

accepts:主要类型有{xml:"application/xml,text/xml",html:"text/html",script:"text/javaScript,application/javaScript",

json:"application/json,text/javaScript",text:"text/plain",_default:"*/*"}用于告诉服务器可接受的数据类型,和dataType是对应的,不需要修改Object

dataType:预期服务器返回的数据类型,如果不指定,jQuery将自动根据HTTP包MIME信息返回responseXML或responseText,并作为回调函数参数传递。xml:返回XML文档  html:返回纯文本HTML信息,包含script元素  script:返回纯文本javaScript代码,不会自动缓存结果  json:返回JSON数据  jsonp:JSONP格式,使用JSONP形式调用函数时,如myurl?callback=? jQuery会自动替换?为正确的函数名,以执行回调函数String

beforeSend:发送前可修改XMLHttpRequest对象的函数,如添加自定义HTTP头,XMLHttpRequest对象是唯一参数Function

error:(自动判断为XML/HTML)请求失败时将调用此方法。此方法有三个参数:XMLHttpRequest对象,错误信息,可能捕获的错误对象Function

complete:请求完成后(无论成功或失败)回调函数。参数XMLHttpRequest对象,成功信息字符串Function

success:请求成功后回调函数。参数 服务器返回数据,返回状态Function

global:是否触发全局AJAX事件,如ajaxStart或ajaxStop  默认为true  Boolean

ifModified:是否仅在服务器数据改变时获取新数据 默认为false  Boolean

cache:是否从浏览器缓存中加载请求信息 默认为true  Boolean

async:是否发送异步请求 默认为true Boolean

$.ajax()的使用比较麻烦,但却比较灵活,而且可以通过error参数定义在请求失败时调用的函数

ajax()函数页面

<input type="button" id="ajax1" value="ajax()" />

<div id="1"></div>

<div id="2"></div>

$("#ajax1").click(function(){$.ajax({type:"GET",url:"ajax.ashx",beforeSend:function(){$("#1").append("正在请求...")},data:{QQ:"222",PW:"sss"},success:function(data,status){$("#1").empty().append("数据"+eval('('+data+')').QQ);$("#2").empty().append("态"+status)},error:function(){$("#1").empty().append("请求失败");},dataType:"JSON"})

})

ajax.ashx

public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "application/json";

            string qq = context.Request.QueryString["QQ"];

            string pw = context.Request.QueryString["PW"];

            context.Response.Write("{QQ:'"+qq+"',PW:'"+pw+"'}");

        }

由于前面讲参数的讲解很详细,所以关于这里的ajax应用也不多说了

③getScript及getJSON函数

这两个函数进一步封装了$.get()函数,它们都支持跨域操作

⑴$.getScript(url,[callback])  返回值:XMLHttpRequest  参数-url:请求的javaScript文件地址String callback:载入成功时回调函数(只有当Response的返回状态是success时才调用该方法,不传递参数)Function  通过GET方式请求载入并执行一个javaScript文件

getScript()函数页面

<input type="button" id="getScript1" value="getScript()" />

<div id="1"></div>

<div id="2"></div>

$("#getScript1").click(function(){$.getScript("getScript.js",function(){$("#2").append("载入并执行文件成功")})})

getScript.js

$(function(){$("#1").append("执行了getScript")})

⑵$.getJSON(url,[data],[callback])  返回值:XMLHttpRequest  参数-url:请求的返回json数据的页面地址String  data:发送到服务器端的key/value数据Object  callback:载入成功时回调函数(只有当Response的返回状态是success时才调用该方法,传递参数)Function  通过GET方式请求载入JSON数据

使用方式跟$.get()没多大区别,在此不再讲述。只有一点值得一提,在$.getJSON()中传递给回调函数的数据肯定是json对象不需要像$.get()那样可能要用eval()函数转换。

 

由于javascript没有很好的IDE,所以出错的时候异常说明不是很明确,但对于以上函数一个经常出错的环节是服务器端返回的数据不规范,如不符合json格式,这个需要仔细检查。对于$.getScript()及$.getJSON()在返回状态不是success时不会执行回调函数。而$.get()及$.post()在返回状态不是success仍然执行回调函数,可以alert(typeof data)查看返回的数据是什么类型。 所以按正常步骤操作,如果没达到预期效果一般就是服务器端返回的数据没有符合格式。

对于返回json格式的数据,在确定是格式出错(很常用的检查方式就是用$.get()返回的data,在alert(data)时不报错,而在alert(eval('('+data+')'))时报错) 很有可能的出错环节就是你返回的json字符串(这里用的不是$.getJSON())的值没有用单引号括起来----正确格式{键:'值',键:[1,2,3]}{键:[{键:'值',键:'值'},{键:'值'}]}