Jquery .ajax方法分析

jQuery.ajax( options )

有很多选项，介绍其中的几个：

·dataType：想从服务器得到哪种类型的数据。xml,html,script,json,jsonp,text

·success：请求成功后的处理函数

·type：以POST或GET的方式请求。默认GET。PUT和DELETE也可以用，但并不是所有的浏览器都支持

·url：请求的目的地址，须是一个字符串。

·complete：不管请求成功还是错误，只要请求完成，可以执行的事件。

·beforeSend：传递异步请求之前的事件。

这次说解，使用firedebug来配合说解。

（一）请求ashx文件，并添加ajax事件，添加缓冲提示

描述：请求数据，请求超时时间设置为5秒，如果超时，那么输出超时提示，且在这5秒中的等待过程中，提供等图标，5秒之后，提示请求超时。

（1）ashx文件

Customer customer = new Customer

{ Unid = 1, CustomerName = "宋江", Memo ="天魁星", Other ="黑三郎" };

string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);

System.Threading.Thread.Sleep(1000*7);

context.Response.Write(strJson);

为了让客户端请求超时，服务设置延时7秒。

（2）ajax post请求

function ajax_ashx() {

$.ajax({

url: "webdata/ajax_1.ashx",

type: "post",

success: function(data) {

var jsonObject = $.jsonToObject(data);

var tt = '';

$.each(jsonObject, function(k, v) {

tt += k + "：" + v +"<br/>";

});

$("#divmessage").html(tt);

},

cache: false,

timeout: 5000,

error: function() {

alert("超时");

}

});}

设置超时时间5000ms，超时错误出示超时错误。

（3）设置客户端请求等待图标

·<imgsrc="images/loader.gif"id="ajaximg" />找个小图标

·为这个图标设置ajax事件

$("#ajaximg").bind("ajaxSend",function() { Show(); });

$("#ajaximg").bind("ajaxComplete",function() { Hide(); });

function Hide() {

$("#ajaximg").hide();

}

function Show() {

$("#ajaximg").show();

}

在客户端5秒请求的时间限制下，请求超时，提示超时错误。

·在ashx端contentType的设置对返回的数据没有影响

·客户端dataType也没有影响，可以省略。

·在firebug里可以看到返回的数据为：

{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"}

所以可以按以前我说过的方法进行解析。

（二）正常请求，并解析

·ashx

Customer customer = new Customer

{ Unid = 1, CustomerName = "宋江", Memo ="天魁星", Other ="黑三郎" };

Customer customer2 = new Customer

{ Unid = 2, CustomerName = "吴用", Memo ="天机星", Other ="智多星" };

List<Customer> _list =new List<Customer>();

_list.Add(customer);

_list.Add(customer2);

string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);

System.Threading.Thread.Sleep(1000 * 3);

context.Response.Write(strJson);

·ajax post

function ajax_ashxList() {

$.ajax({

url: "webdata/ajax_1.ashx",

type: "post",

dataType: "json",

success: function(data) {

var tt = '';

$.each(data, function(k, v) {

$.each(v, function(kk, vv) {

tt += kk + "：" + vv +"<br/>";

});

});

$("#divmessage").html(tt);

},

cache: false,

timeout: 5000,

error: function() {

alert("超时");

}

});

}

·dataType要是json

·在firebug里

[

{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"},

{"Unid":2,"CustomerName":"吴用","Memo":"天机星","Other":"智多星"}

]

虽然是字串,但这里直接用就行,不用转换为json对象。这一点我现在还不明白怎么回事。

（三）请求ws

这次请求返回字串类型的web方法。

（1）Hello

[WebMethod]

public string HelloWorld()

{

return "Hello World";

}

function ajax_webserviceHello() {

$.ajax({

type: "post",

contentType: "application/json",

url: "ajax_1.asmx/HelloWorld",

data: "{}",

dataType: 'json',

success: function(data) {

alert(data.d);

}

});

}

·contentType，data都不能为空，即使data为空，也要带空参数

{"d":"Hello World"}

发现服务端请求到的数据是这样的。所以，访问时，要以data.d来访问。（在.net3.5中）。但也可以如下访问：

$.each(data, function(k, v) {

alert(v);

});

（2）Customer

这次得到一个客户实体

[WebMethod]

public string GetCustomer()

{

Customer customer = new Customer { Unid = 1, CustomerName ="宋江", Memo ="天魁星", Other ="黑三郎" };

string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);

return strJson;

}

function ajax_webserviceCustomer() {

$.ajax({

type: "post",

contentType: "application/json",

url: "ajax_1.asmx/GetCustomer",

data: "{}",

dataType: 'json',

success: function(data) {

var tt = '';

var jsonObject = $.jsonToObject(data.d);

$.each(jsonObject, function(k, v) {

tt += k + "：" + v +"<br/>";

});

$("#divmessage").html(tt);

}

});

}

发现返回的也是以d为key的一个object。

{"d":"{\"Unid\":1,\"CustomerName\":\"宋江\",\"Memo\":\"天魁星\",\"Other\":\"黑三郎\"}"}

这点应该注意。

（3）customer list

[WebMethod]

public string GetCustomerList()

{

Customer customer = new Customer

{ Unid = 1, CustomerName = "宋江", Memo ="天魁星", Other ="黑三郎" };

Customer customer2 = new Customer

{ Unid = 2, CustomerName = "吴用", Memo ="天机星", Other ="智多星" };

List<Customer> _list =new List<Customer>();

_list.Add(customer);

_list.Add(customer2);

string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(_list);

return strJson;

}

function ajax_webserviceCustomerList() {

$.ajax({

type: "post",

contentType: "application/json",

url: "ajax_1.asmx/GetCustomerList",

data: "{}",

dataType: 'json',

success: function(data) {

var tt = '';

var jsonObject = $.jsonToObject(data.d);

$.each(jsonObject, function(k, v) {

$.each(v, function(kk, vv) {

tt += kk + "：" + vv +"<br/>";

});

});

$("#divmessage").html(tt);

}

});

}

{

"d":

"[{\"Unid\":1,\"CustomerName\":\"宋江\",\"Memo\":\"天魁星\",\"Other\":\"黑三郎\"},

{\"Unid\":2,\"CustomerName\":\"吴用\",\"Memo\":\"天机星\",\"Other\":\"智多星\"}]"

}

这也是一个以d为key的对象。

（4）with para

[WebMethod]

public string GetCustomerListWithPara(int iUnid)

{

Customer customer = new Customer

{ Unid = 1, CustomerName = "宋江", Memo ="天魁星", Other ="黑三郎" };

Customer customer2 = new Customer

{ Unid = 2, CustomerName = "吴用", Memo ="天机星", Other ="智多星" };

List<Customer> _list =new List<Customer>();

_list.Add(customer);

_list.Add(customer2);

var cus = from q in _list

where q.Unid == iUnid

select q;

string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(cus);

return strJson;

}

function ajax_webserviceCustomerListWithPara() {

$.ajax({

type: "post",

contentType: "application/json",

url: "ajax_1.asmx/GetCustomerListWithPara",

data: "{iUnid:"+1+"}",

dataType: 'json',

success: function(data) {

var tt = '';

var jsonObject = $.jsonToObject(data.d);

$.each(jsonObject, function(k, v) {

$.each(v, function(kk, vv) {

tt += kk + "：" + vv +"<br/>";

});

});

$("#divmessage").html(tt);

}

});

}

{

"d":

"[{\"Unid\":1,\"CustomerName\":\"宋江\",\"Memo\":\"天魁星\",\"Other\":\"黑三郎\"}]"

}

这也是一个以d为key的对象。

综上所述，在对web服务进行请求时：

·在.net3.5中，访问web服务时，返回的元素是一个以d为key的k/v对。如果要进行下一步解析，要认识d属性。（这是在当web方法返回json字串时成立）

·在.net3.5中，访问web服务，要对web服务添加修饰：[System.Web.Script.Services.ScriptService] 否则，当.ajax()请求服务时，会有异常：

只能从脚本中调用在类定义上有[ScriptService]属性的 Web 服务