jQuery Ajax使用心得詳細整理及注意事項
2024-09-01 08:29:08
供稿：網友
IE7及以下請求方式用GET的話，URL的限制是個很容易忽視的問題(最大2083個字符)。所以如果URL有可能過長的話，一定要用POST。
--------------------------------------------------------------------------------
終止Ajax請求
終止請求需要調用XMLHttpRequest對象的abort()方法
而在jQuery中的$.get,$.post、$.ajax、$.getJSON、$.getScript...的返回值都是XMLHttpRequest對象.
調用abort()后，ajax請求立即停止，但仍然會執行success的回調函數
所以在success的回調函數中需要先判斷 ajaxGet 或 data是否存在，存在才執行回調函數
代碼如下:
var ajaxGet = $.get(someURL,someData,function(data){
if(!data)return true;
//TODO
});
ajaxGet.abort();
說到跨域資源共享(CORS Cross-Origin Resoure Sharing)，現在正變的越來越重要。各種地圖API，微博API等等，網站開發人員不必自己去放衛星，只要根據別人開放的接口，就能獲取到這些數據。
這得益于跨源策略。
JSONP就是跨源策略的一種方案。基本原理就是利用瀏覽器允許跨域獲取script資源(包括圖片)的特點,在服務器端生成script Tag,并傳回客戶端。
要注意的是，服務器端返回的不是JSON格式的字符串，而是callbackName+"("+JSON_string+")"也就是JSONP。
這就相當于服務器把一段JS代碼(被賦值的函數)返回瀏覽器，然后立即執行。
所以，在瀏覽器端發送的URL中(以GET的形式)，需要把回調函數名傳入。
客戶端：
代碼如下:
function deal(data){
//TODO
}
var s= document.createElement("script")
//不必一定叫callback，但是一定要跟服務器端的Request.QueryString匹配
s.src = "http://172.20.2.60:8088/newwebsite/MyHandler.ashx?callback=func";
document.body.appendChild(s)
服務器端(.Net)
代碼如下:
<%@ WebHandler Language="C#" Class="Test" %>
using System;
using System.Web;
public class Test : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.Charset = "utf-8";
context.Response.ContentType = "text/javascript";
string callback = context.Request.QueryString["callback"];//回調函數名
string json = "{'name':'Ray','msg':'hello world!'}";//JSON格式的字符串
string result = string.Format("{0}({1})", callback, json);
context.Response.Write(result);
context.Response.Flush();
context.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
}
用jQuery的話，URL中就不用加回調函數名了，因為jQuery已經為你代勞了，而這個回調函數就是success。
代碼如下:
$.ajax({
url: "http://172.20.2.60:8088/newwebsite/MyHandler.ashx"
, dataType: "jsonp"
, success: function(data) {
//TODO
}
});
JSONP很強大，但是也有兩個讓人蛋疼的地方，首先是安全性問題。
不管怎么說你都是從別人的地盤倒騰數據，而且內容還是腳本！也就是說如果人家是個壞人，給你點惡意代碼，那就不好辦了。
