JQuery - Ajax

一、$.ajax(options)
它是最根本的JQuery Ajax方法，它只有一个参数options，该options参数中包含了请求信息和回调函数的信息。参数内容都是key:value对形式出现，并且都是可选的。
语法：
$.ajax({options});
url：(string)发送请求的地址，可以是服务器页面也可以是WebService动作。
type：(string)请求方式，POST或GET
data：(object)向服务器发送请求时带去的数据。是key:value对形式，如：{name:"grayworm",sex:"male"}，如果是数组{works:["work1","work2"]}
dataType：(string)预期返回的数据类型。xml,html,json,text等
beforeSend：（Function）发送ajax请求前被触发，如果返回false则取消本次请求。如果异步请求需要显示gif动画，那应当在这里设置相应<img>的可见。
function(XMLHttpRequest){ }

complete：(Function)请求调用完成后的回调函数（请求成功或失败时均调用），如果异步请求显示gif动画，那应当在这里设置相应的<img>不可见。
function(XMLHttpRequest,textStatus){
   //textStatus是描述返回状态的字符串
}

success：(Function)请求执行成功时的回调函数
function(data,textStatus){
   //data是服务端返回的数据可以是xml、json、text等格式
   //textStatus是描述返回状态的字符串
}

error：(Function)请求执行失败时的回调函数
function(XMLHttpRequest,textStatus,errorThrown){
   //data是服务端返回的数据可以是xml、json、text等格式
   //textStatus,errorThrown是描述返回状态的信息
}

应用举例：
1.向页面发出请求，返回XML格式数据
页面端代码：


《图3》
JQuery代码：


《图1》

2.向页面发出请求，返回Json格式数据
页面端代码：


《图4》
JQuery代码：


《图2》

3.向WebService发出请求，无参返回简单类型异步调用
服务端代码：


《图5》
JQuery代码：


《图6》

4.向WebService发出请求，有参返回简单类型异就调用
服务端代码：


《图7》
JQuery代码：


《图8》

5.向WebService发出请求，返回实体对象的异步调用
服务端代码：


《图9》
JQuery代码：


《图10》

6.向WebService发出请求，返回集合对象的异步调用
服务端代码：


《图11》
JQuery代码：


《图12》

说明：
        WebService请求类型都为Post，WebService的Url为“[WebServiceUrl]/[WebMethod]”
        data要用Json的字符串格式传入
        设置了dataType为json后，result就直接为返回的Json对象。

二、$.get()和$.post()
$.ajax()是最基本的Ajax方法，在JQuery中又提供了两个简捷的Ajax调用方法$.get()和$.post()，这两个方法实现了对$.ajax()的封装。有了$.ajax()的基础，下面两个方法学习起来就很简单了。
1.$.get()
语法：
$.get(url [,data] [,callback] [,type])
url：(string)请求的HTML页的URL地址
data：(object)发送到服务器的数据，以key/value对形式书写，如：{name:"张三",age:"18"}
callback：(function)回调函数，只有返回的状态是success时才调用该方法。
type：(string)服务端返回的内容的格式。xml,html,json,text等

2.$.post()
语法：
$.post(url [,data] [,callback] [,type])
url：(string)请求的HTML页的URL地址
data：(object)发送到服务器的数据，以key/value对形式书写，如：{name:"张三",age:"18"}
callback：(function)回调函数，只有返回的状态是success时才调用该方法。
type：(string)服务端返回的内容的格式。xml,html,json,text等

$.post()与$.get()很相似，只是数据参数传递方式不一样，这二者与传统的get/post提交方式相同。

应用举例：
1.$.get()和$.post()向页面发送异步请求，返回XML数据
服务端代码：


《图3》
JQuery代码：


《图13》

2.$.get()和$.post()向页面发送异步请求，返回json数据
服务端代码：


《图4》
JQuery代码：


《图14》
3.$.get()和$.post()向WebService发送异步请求


《图15》：

三、序列化元素
如果页面表单元素比较多，在发出ajax请求的时候需要将表单中所有的元素一起发送到服务端，如果还是使用key/value对形式的json语法传递参数的话，那需要在$.get()或$.post()中手写很长的json参数。
在JQuery中为我们提供了序列化的方式来解决这个问题，序列化的方法是serialize()
示例代码：


《图16》


《图17》

 

(原创：灰灰虫的家http://hi.baidu.com/grayworm)