佳木斯湛栽影视文化发展公司

主頁(yè) > 知識(shí)庫(kù) > jQuery Ajax使用心得詳細(xì)整理及注意事項(xiàng)

jQuery Ajax使用心得詳細(xì)整理及注意事項(xiàng)

熱門(mén)標(biāo)簽:銀行業(yè)務(wù) 團(tuán)購(gòu)網(wǎng)站 Linux服務(wù)器 阿里云 電子圍欄 Mysql連接數(shù)設(shè)置 服務(wù)器配置 科大訊飛語(yǔ)音識(shí)別系統(tǒng)
IE7及以下請(qǐng)求方式用GET的話,URL的限制是個(gè)很容易忽視的問(wèn)題(最大2083個(gè)字符)。所以如果URL有可能過(guò)長(zhǎng)的話,一定要用POST。
--------------------------------------------------------------------------------
終止Ajax請(qǐng)求
終止請(qǐng)求需要調(diào)用XMLHttpRequest對(duì)象的abort()方法
而在jQuery中的$.get,$.post、$.ajax、$.getJSON、$.getScript...的返回值都是XMLHttpRequest對(duì)象.
調(diào)用abort()后,ajax請(qǐng)求立即停止,但仍然會(huì)執(zhí)行success的回調(diào)函數(shù)
所以在success的回調(diào)函數(shù)中需要先判斷 ajaxGet 或 data是否存在,存在才執(zhí)行回調(diào)函數(shù)
復(fù)制代碼 代碼如下:

var ajaxGet = $.get(someURL,someData,function(data){
if(!data)return true;
//TODO
});
ajaxGet.abort();

說(shuō)到跨域資源共享(CORS Cross-Origin Resoure Sharing),現(xiàn)在正變的越來(lái)越重要。各種地圖API,微博API等等,網(wǎng)站開(kāi)發(fā)人員不必自己去放衛(wèi)星,只要根據(jù)別人開(kāi)放的接口,就能獲取到這些數(shù)據(jù)。
這得益于跨源策略。

JSONP就是跨源策略的一種方案?;驹砭褪抢脼g覽器允許跨域獲取script資源(包括圖片)的特點(diǎn),在服務(wù)器端生成script Tag,并傳回客戶端。

要注意的是,服務(wù)器端返回的不是JSON格式的字符串,而是callbackName+"("+JSON_string+")"也就是JSONP。

這就相當(dāng)于服務(wù)器把一段JS代碼(被賦值的函數(shù))返回瀏覽器,然后立即執(zhí)行。
所以,在瀏覽器端發(fā)送的URL中(以GET的形式),需要把回調(diào)函數(shù)名傳入。
客戶端:
復(fù)制代碼 代碼如下:

function deal(data){
//TODO
}
var s= document.createElement("script")
//不必一定叫callback,但是一定要跟服務(wù)器端的Request.QueryString匹配
s.src = "http://172.20.2.60:8088/newwebsite/MyHandler.ashx?callback=func";
document.body.appendChild(s)

服務(wù)器端(.Net)
復(fù)制代碼 代碼如下:

%@ 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"];//回調(diào)函數(shù)名
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中就不用加回調(diào)函數(shù)名了,因?yàn)閖Query已經(jīng)為你代勞了,而這個(gè)回調(diào)函數(shù)就是success。
復(fù)制代碼 代碼如下:

$.ajax({
url: "http://172.20.2.60:8088/newwebsite/MyHandler.ashx"
, dataType: "jsonp"
, success: function(data) {
//TODO
}
});

JSONP很強(qiáng)大,但是也有兩個(gè)讓人蛋疼的地方,首先是安全性問(wèn)題。
不管怎么說(shuō)你都是從別人的地盤(pán)倒騰數(shù)據(jù),而且內(nèi)容還是腳本!也就是說(shuō)如果人家是個(gè)壞人,給你點(diǎn)惡意代碼,那就不好辦了。

當(dāng)然這個(gè)問(wèn)題一般也不會(huì)發(fā)生。畢竟咱想請(qǐng)求數(shù)據(jù)的地方都是咱熟悉的要么就是官方的(什么谷歌地圖API,新浪微博API這些顯然不會(huì)給你坑)。

另一個(gè)問(wèn)題就鬧心了。瀏覽器端對(duì)JSONP的請(qǐng)求是否失敗是無(wú)法直接知曉的。就算用jQuery,error也不起作用。就算出錯(cuò)了try,catch也捕捉不到。

所以暫時(shí)知道的只有一種不完美方法,就是設(shè)定一個(gè)時(shí)限,如果超過(guò)時(shí)限還沒(méi)有數(shù)據(jù)返回,那么就判定error。說(shuō)不完美是因?yàn)?,各家的網(wǎng)速是不同的,所以...你懂得。
--------------------------------------------------------------------------------
jQuery中contentType相關(guān)
jQuery官網(wǎng)原文
復(fù)制代碼 代碼如下:

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.

通過(guò)這段文字我們就可以知道在jQuery ajax中 contentType默認(rèn)是'application/x-www-form-urlencoded; charset=UTF-8' 當(dāng)然這是最新版jQuery的。相對(duì)于以前版本是有些許變化的。

如果想將一個(gè)對(duì)象序列化后傳向后臺(tái),可以將contentType設(shè)置為'application/json'
您可能感興趣的文章:
  • 全面詳細(xì)的jQuery常見(jiàn)開(kāi)發(fā)技巧手冊(cè)
  • 60個(gè)很實(shí)用的jQuery代碼開(kāi)發(fā)技巧收集
  • 30個(gè)經(jīng)典的jQuery代碼開(kāi)發(fā)技巧
  • jQuery常見(jiàn)開(kāi)發(fā)技巧詳細(xì)整理
  • Web前端新人筆記之jquery入門(mén)心得(新手必看)
  • jquery easyui使用心得
  • 關(guān)于jQuery UI 使用心得及技巧
  • php+jquery編碼方面的一些心得(utf-8 gb2312)
  • Jquery ThickBox插件使用心得(不建議使用)
  • 關(guān)于Jqzoom的使用心得 jquery放大鏡效果插件
  • jQuery 使用個(gè)人心得
  • jQuery 研究心得 取得屬性的值
  • 15個(gè)值得開(kāi)發(fā)人員關(guān)注的jQuery開(kāi)發(fā)技巧和心得總結(jié)【經(jīng)典收藏】

標(biāo)簽:大理 衡水 廣元 棗莊 蚌埠 衢州 萍鄉(xiāng) 江蘇

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《jQuery Ajax使用心得詳細(xì)整理及注意事項(xiàng)》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266
    平远县| 日照市| 健康| 和顺县| 孙吴县| 都安| 吴川市| 惠来县| 景谷| 汕头市| 五家渠市| 益阳市| 阳泉市| 台前县| 平凉市| 敖汉旗| 修武县| 成都市| 马公市| 凉城县| 宝清县| 繁峙县| 永泰县| 海阳市| 资溪县| 建昌县| 连州市| 大余县| 太和县| 疏勒县| 临夏市| 宁德市| 嘉义县| 浦江县| 盐亭县| 邯郸市| 泰安市| 赞皇县| 甘南县| 夏邑县| 绥宁县|