jQuery Ajax使用心得詳細整理及注意事項_AJAX相關

來源:互聯網
上載者:User
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很強大,但是也有兩個讓人蛋疼的地方,首先是安全性問題。
不管怎麼說你都是從別人的地盤倒騰資料,而且內容還是指令碼!也就是說如果人家是個壞人,給你點惡意代碼,那就不好辦了。

當然這個問題一般也不會發生。畢竟咱想請求資料的地方都是咱熟悉的要麼就是官方的(什麼Google地圖API,新浪微博API這些顯然不會給你坑)。

另一個問題就鬧心了。瀏覽器端對JSONP的請求是否失敗是無法直接知曉的。就算用jQuery,error也不起作用。就算出錯了try,catch也捕捉不到。

所以暫時知道的只有一種不完美方法,就是設定一個時限,如果超過時限還沒有資料返回,那麼就判定error。說不完美是因為,各家的網速是不同的,所以...你懂得。
--------------------------------------------------------------------------------
jQuery中contentType相關
jQuery官網原文
複製代碼 代碼如下:

contentType
Default: 'application/x-www-form-urlencoded; charset=UTF-8'
When sending data to the server, use this content type.
Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases.
If you explicitly pass in a content-type to $.ajax(),
then it'll always be sent to the server (even if no data is sent).
If no charset is specified, data will be transmitted to the server using the server's default charset;
you must decode this appropriately on the server side.

通過這段文字我們就可以知道在jQuery ajax中 contentType預設是'application/x-www-form-urlencoded; charset=UTF-8' 當然這是最新版jQuery的。相對於以前版本是有些許變化的。

如果想將一個對象序列化後傳向後台,可以將contentType設定為'application/json'
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.