生活随笔
收集整理的這篇文章主要介紹了
jQuery之ajax的跨域获取数据
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
如果獲取的數(shù)據(jù)文件存放在遠(yuǎn)程服務(wù)器上（域名不同，也就是跨域獲取數(shù)據(jù)），則需要使用jsonp類(lèi)型。使用這種類(lèi)型的話(huà)，會(huì)創(chuàng)建一個(gè)查詢(xún)字符串參數(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ù)客戶(hù)端提交的callback的參數(shù)，返回一個(gè)callback(json)的數(shù)據(jù)，而客戶(hù)端將會(huì)用script的方式處理返回?cái)?shù)據(jù)，來(lái)對(duì)json數(shù)據(jù)做處理。JQuery.getJSON也同樣支持jsonp的數(shù)據(jù)方式調(diào)用。下面演示關(guān)于jQuery處理跨域請(qǐng)求ajax的方式：
服務(wù)器端(PHP為例)：
<?
php
$data =
array('name'=>' 張三','age'=>22,'city'=>'newYork'
);
sleep(3);
//人為設(shè)置一個(gè)等待(用于觀察什么是ajax的同步與異步)
responseAJAX(
$data);
//響應(yīng)請(qǐng)求返回?cái)?shù)據(jù)/*** 返回處理后的ajax請(qǐng)求數(shù)據(jù)* @author martinzhang* @param $data 待返回的數(shù)據(jù)* @return none*/
function responseAJAX(
$data){ $data = json_encode(
$data);$getCallBackName =
$_REQUEST['callback'];
//獲取callback調(diào)用的function函數(shù)名if(
$getCallBackName != ''
){//使用了jsonp跨域請(qǐng)求$data =
$getCallBackName.'('.
$data.')';
//返回格式形如:callbackFunName({"name":" \u5f20\u4e09","age":22,"city":"newYork"})die(
$data);}else{//未跨域die(
$data);}
}
客戶(hù)端：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jsonp跨域
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript" src="../jquery-1.8.2.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btn1" onclick="BtnClick()" value="jsonp" style="width:55px; height:20px;" />
<input type="button" id="btn1" onclick="BtnClick2()" value="getJSON" style="width:55px; height:20px;" />
</div>
<p></p>
<div id="dd">
sd......
</div>
<div>
<script type="text/javascript" language="javascript">
//方式一：
function BtnClick() { $.ajax({ url: 'http://others.com/0_module/0/jQuery/ajax_jsonp/serverAPI.php',//async: false, //ture表示異步(默認(rèn))；false表示同步；
type: 'get', dataType : 'jsonp', //返回?cái)?shù)據(jù)類(lèi)型：需要顯式指定
jsonp: 'callback', //服務(wù)端用于接收callback調(diào)用的function名的參數(shù)名(變量名)//jsonpCallback: 'callbackFunName', //可以顯式地指定callback的函數(shù)名【如果不設(shè)置此項(xiàng)jquery會(huì)使用一個(gè)隨機(jī)的含時(shí)間串的名稱(chēng)做為callback的函數(shù)名】
success: function(data){//alert(data);
$('#dd').html(data.name); }}); alert('什么是異步？就是js不會(huì)等ajax何時(shí)請(qǐng)求回?cái)?shù)據(jù)，程序順序向下執(zhí)行它下面的其它程序，ajax何時(shí)候請(qǐng)求回?cái)?shù)據(jù)就何時(shí)處理');
}//方式二：
function BtnClick2() {$.ajaxSettings.async = false; //顯式聲明此次請(qǐng)求為同步
$.getJSON("http://others.com/0_module/0/jQuery/ajax_jsonp/serverAPI.php?callback=?",null,function(data){$('#dd').html(data.name); });alert('何謂同步？就是必須等ajax請(qǐng)求回來(lái)數(shù)據(jù)之后，js才會(huì)順序向下執(zhí)行它下面的程序');
}</script>
</div>
</form>
</body>
</html> ?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/martinzhang/p/3459706.html
總結(jié)
以上是生活随笔為你收集整理的jQuery之ajax的跨域获取数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
