幾種常用的ajax 跨域請求
前 言
首先,我們要明白,什麽是跨域,為什麽要跨域。 由於JS中存在同源策略。當請求不同協議名不同端口號下面的文件時,將會違背同源策略,無法請求成功!需要進行跨域處理!
這篇文章就為大家詳細介紹一下個人常用的三種跨域方式,以請求PHP為例。
1header("Access-Control-Allow-Origin:*");
後臺PHP進行設置,前臺無需任何設置,在後臺被請求的PHP文件中,寫入一條header。表示允許哪些域名請求這個PHP文件,*表示所有域名都允許
eg:
前臺:
$.post("http://localhost/lianxi/kuayu.php",function(data){ console.log(data); })
後臺:
header("Access-Control-Allow-Origin:*"); $str=<<<str [ { "name": "zhangsan", "age": 17, "hobby": [ "吃", "喝", "玩", "樂" ], "score":{ "math":78, "chinese":80 } } ] str; echo $str;
前臺返回:
2使用src屬性+jsonp實現跨域
①用於src屬性的標簽自帶跨域功能,所以可以使用script標簽的src屬性請求後臺數據。
②由於src在加載數據成功後,會直接將加載內容放入到script標簽中。所以後臺直接返回JSON字符串不能在script標簽中解析。因此,後臺應該返回給前臺一個回調函數,並將JSON字符串作為參數傳入。
③前臺就收到返回的回調函數,將直接在script標簽中調用。因此需要聲明這樣一個回調函數,作為請求成功的回調。
jsonp:JSON with padding,是JSON的一種“使用模式”,可用於解決主流瀏覽器的跨域數據訪問的問題。
前臺:
<script type="text/javascript"> function callBack(data){ console.log(data); } </script> <script type="text/javascript" src="http://localhost/lianxi/kuayu.php"></script>
後臺:
header("Content-Type:text/html;charset=utf-8"); $str=<<<str [ { "name": "zhangsan", "age": 17, "hobby": [ "吃", "喝", "玩", "樂" ], "score":{ "math":78, "chinese":80 } }, ] str; echo "callBack({$str})";
前臺返回:
3JQuery的AJax實現JSONP
①在ajax請求時,設置dataType為"jsonp"
②後臺返回時,依然需要返回回調函數名。但是ajax在發送請求時,會默認使用get請求回調函數名發給後臺,後臺可以使用$_GET[‘callback‘]取出回調函數名
echo "{$_GET[‘callback‘]}({$str})";
③後臺返回以後,ajax依然可以用success作為成功的回調函數:
success:function(data){}
當然後臺也可以隨便返回一個回到函數名, echo "callBack({$json})"; 前臺只要請求成功,就會自動調用這個函數。類似第二條的②③步
前臺:
$.ajax({
type:"post",
url:"http://localhost/lianxi/kuayu.php",
dataType:"jsonp",
success:function(data){
console.log(data);
}
});
後臺:
echo "{$_GET[‘callback‘]}({$str})";
前臺返回:
作者:唯蕓熙
以上就是本人常用的跨域方式,希望對各位讀者有所幫助。歡迎批評、交流與溝通。
幾種常用的ajax 跨域請求