Jquery .ajax方法分析（一）

转自：http://www.cnblogs.com/jams742003/archive/2009/12/30/1636152.html


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 服务