jquery的ajax跨域請(qǐng)求原理和示例
今天在項(xiàng)目中需要做遠(yuǎn)程數(shù)據(jù)加載并渲染頁面，直到開發(fā)階段才意識(shí)到ajax跨域請(qǐng)求的問題，隱約記得Jquery有提過一個(gè)ajax跨域請(qǐng)求的解決方式，于是即刻翻出Jquery的API出來研究，發(fā)
JQuery對(duì)于Ajax的跨域請(qǐng)求有兩類解決方案，不過都是只支持get方式。分別是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。
什么是jsonp格式呢？API原文：如果獲取的數(shù)據(jù)文件存放在遠(yuǎn)程服務(wù)器上（域名不同，也就是跨域獲取數(shù)據(jù)），則需要使用jsonp類型。使用這種類型的話，會(huì)創(chuàng)建一個(gè)查詢字符串參數(shù) callback=? ，這個(gè)參數(shù)會(huì)加在請(qǐng)求的URL后面。服務(wù)器端應(yīng)當(dāng)在JSON數(shù)據(jù)前加上回調(diào)函數(shù)名，以便完成一個(gè)有效的JSONP請(qǐng)求。意思就是遠(yuǎn)程服務(wù)端需要對(duì)返回的數(shù)據(jù)做下處理，根據(jù)客戶端提交的callback的參數(shù)，返回一個(gè)callback(json)的數(shù)據(jù)，而客戶端將會(huì)用script的方式處理返回?cái)?shù)據(jù)，來對(duì)json數(shù)據(jù)做處理。JQuery.getJSON也同樣支持jsonp的數(shù)據(jù)方式調(diào)用。
客戶端JQuery.ajax的調(diào)用代碼示例：
$.ajax({
type : "get",
async:false,
url : "http://www.xxx.com/ajax.do",
dataType : "jsonp",
jsonp: "callbackparam",//服務(wù)端用于接收callback調(diào)用的function名的參數(shù)
jsonpCallback:"success_jsonpCallback",//callback的function名稱
success : function(json){
alert(json);
alert(json[0].name);
},
error:function(){
alert('fail');
}
});
服務(wù)端返回?cái)?shù)據(jù)的示例代碼：
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
String callbackFunName = context.Request["callbackparam"];
context.Response.Write(callbackFunName + "([ { name:\"John\"}])");
}
相關(guān)文章
使用jQuery實(shí)現(xiàn)的擲色子游戲動(dòng)畫效果
大家一定都玩過擲色子的游戲，今天我給大家分享的是如何使用jQuery來實(shí)現(xiàn)擲色子的動(dòng)畫效果，通過jQuery的animate()自定義動(dòng)畫函數(shù)并結(jié)合CSS背景圖片切換實(shí)現(xiàn)的動(dòng)畫效果2014-03-03
jQuery的實(shí)現(xiàn)原理的模擬代碼 -2 數(shù)據(jù)部分
在 jQuery 中，可以對(duì)每一個(gè) DOM 對(duì)象保存私有的數(shù)據(jù)。2010-08-08
jQuery獲取table表中的td標(biāo)簽(實(shí)例講解)
下面小編就為大家?guī)硪黄猨Query獲取table表中的td標(biāo)簽(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
本文給大家分享的是一則使用EasyUI實(shí)現(xiàn)第二層彈出框的方法，核心代碼是網(wǎng)友提供，這里結(jié)合自己的項(xiàng)目需求，完善了下，推薦給大家。2015-03-03
jquery+css3實(shí)現(xiàn)會(huì)動(dòng)的小圓圈效果
這篇文章主要介紹了jquery+css3實(shí)現(xiàn)會(huì)動(dòng)的小圓圈效果,涉及jquery基于時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素css3樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
顯示、隱藏元素我們可以通過css來實(shí)現(xiàn)；添加刪除樣式我們可以通過js或jquery來實(shí)現(xiàn)，下面為大家講解的是使用jquery實(shí)現(xiàn)元素的顯示隱藏及樣式的添加與刪除2013-08-08
jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法詳解
這篇文章主要介紹了jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法,結(jié)合實(shí)例形式詳細(xì)分析了filter的功能及4種具體用法,需要的朋友可以參考下2016-04-04
JQuery 風(fēng)格的HTML文本轉(zhuǎn)義
astinus開發(fā)過程中，我自己就在不斷的使用。有次貼了一些JS代碼進(jìn)去，于是頁面顯示錯(cuò)誤。顯然，把源代碼直接放進(jìn)html文本了——好吧，從05年轉(zhuǎn)去做網(wǎng)游以后，一直沒有正經(jīng)的做過web了。2009-07-07
after() 方法在被選元素后插入指定的內(nèi)容2013-07-07
JQuery 給元素綁定click事件多次執(zhí)行的解決方法
這篇文章主要介紹了JQuery 給元素綁定click事件多次執(zhí)行的解決方法,比較實(shí)用，需要的朋友可以參考下2014-09-09