當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery之ajax的跨域获取数据

發(fā)布時間：2023/12/10 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery之ajax的跨域获取数据小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

如果獲取的數(shù)據(jù)文件存放在遠程服務(wù)器上（域名不同，也就是跨域獲取數(shù)據(jù)），則需要使用jsonp類型。使用這種類型的話，會創(chuàng)建一個查詢字符串參數(shù) callback=? ，這個參數(shù)會加在請求的URL后面。服務(wù)器端應(yīng)當(dāng)在JSON數(shù)據(jù)前加上回調(diào)函數(shù)名，以便完成一個有效的JSONP請求。意思就是遠程服務(wù)端需要對返回的數(shù)據(jù)做下處理，根據(jù)客戶端提交的callback的參數(shù)，返回一個callback(json)的數(shù)據(jù)，而客戶端將會用script的方式處理返回數(shù)據(jù)，來對json數(shù)據(jù)做處理。JQuery.getJSON也同樣支持jsonp的數(shù)據(jù)方式調(diào)用。下面演示關(guān)于jQuery處理跨域請求ajax的方式：

服務(wù)器端(PHP為例)：

<?php $data = array('name'=>' 張三','age'=>22,'city'=>'newYork'); sleep(3); //人為設(shè)置一個等待(用于觀察什么是ajax的同步與異步) responseAJAX($data); //響應(yīng)請求返回數(shù)據(jù)/*** 返回處理后的ajax請求數(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跨域請求$data = $getCallBackName.'('.$data.')'; //返回格式形如:callbackFunName({"name":" \u5f20\u4e09","age":22,"city":"newYork"})die($data);}else{//未跨域die($data);} }

客戶端：

<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', //返回數(shù)據(jù)類型：需要顯式指定 jsonp: 'callback', //服務(wù)端用于接收callback調(diào)用的function名的參數(shù)名(變量名)//jsonpCallback: 'callbackFunName', //可以顯式地指定callback的函數(shù)名【如果不設(shè)置此項jquery會使用一個隨機的含時間串的名稱做為callback的函數(shù)名】 success: function(data){//alert(data); $('#dd').html(data.name); }}); alert('什么是異步？就是js不會等ajax何時請求回數(shù)據(jù)，程序順序向下執(zhí)行它下面的其它程序，ajax何時候請求回數(shù)據(jù)就何時處理'); }//方式二： function BtnClick2() {$.ajaxSettings.async = false; //顯式聲明此次請求為同步 $.getJSON("http://others.com/0_module/0/jQuery/ajax_jsonp/serverAPI.php?callback=?",null,function(data){$('#dd').html(data.name); });alert('何謂同步？就是必須等ajax請求回來數(shù)據(jù)之后，js才會順序向下執(zhí)行它下面的程序'); }</script> </div> </form> </body> </html>

轉(zhuǎn)載于:https://www.cnblogs.com/martinzhang/p/3459706.html

總結(jié)

以上是生活随笔為你收集整理的jQuery之ajax的跨域获取数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： php varbinary,php –
下一篇：图片圆角