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)设置客户端请求等待图标

·<img src=”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 服务

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/13600.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论