前端跨域問題,以及ajax,jsonp,json的區別



看了很多網上的資料,小七感覺都沒有完全解決我的疑惑以及問題,所以特意拿出通俗易懂的話講解跨域問題,以及ajax,jsonp,json的區別。
首先先說跨域問題
什么時候需要跨域?
【1】域名不同(即網址不同, www.yangwei.com 和www.wuyu.com 即為不同的域名)
什么?你不懂什么叫域名,好,滿足你:域名就是網址,域名有頂級域名,一級域名,二級域名...不管是幾級域名都是其頂級域名的子域名,拿 www.yangwei.com舉例,.com是頂級域名 www.yangwei.com是一級域名 www.xxx.yangwei.com是二級域名 www.yangwei.com和www.xxx.yangwei.com都是.com的子域名)
【2】協議不同 ( http://www.yangwei.com 和https://www.yangwei.com屬於跨域)https是保密的而http是公開的
【3】端口不同(www.yangwei.con:8888和www.yangwei.con:8080)
怎么跨域的問題?
1.前端的方式: possMessage,window.name,document.domain,image.src(得不到數據返回),jsonP(script.src后台不配合得不到數據返回),style.href(得不到數據返回)
2.純后端方式: CORS,服務器代理(PHP請求頭方式)CORS 是w3c標准的方式,通過在web服務器端設置:響應頭Access-Cntrol-Alow-Origin 來指定哪些域可以訪問本域的數據,服務器代理,同源策略只存在瀏覽器端,通過服務器轉發請求可以達到跨域請求的目的,劣勢:增加服務器的負擔,且訪問速度慢。
3.前后端結合:JsonP(這種是最長見的方式)。
4.webSocke(了解性拓展)
在這里小七只介紹PHP請求頭和jsonp兩種方式,其他的自行百度,首先先明確一下:
【1】ajax(自己)是不能跨域的,ajax直接請求普通文件存在跨域無權限訪問的問題,只要是跨域請求,一律不准;但是配合后台可以跨域因為同源策略限制的是瀏覽器但是對服務器不限制,服務器可以跨域,下面以PHP請求頭為例講解,
【2】ajax和jsonp本質上是不同的東西。Ajax是異步的js他的核心是通過XmlHttpRequest獲取非本頁內容,而jsonp的核心則是動態添加<script>標簽來調用服務器提供的js腳本。
【3】ajax和jsonp這兩種技術很像,目的也一樣,都是請求一個url,然后把服務器返回的數據進行處理,因此jquery類庫把jsonp作為ajax的一種形式進行了封裝(其實並不是一種東西)怪jq嘮?用着爽就好;
好了重頭戲開始了,提好你的褲帶,設定情景你想跨域獲取聚合數據上的數據(人家寫好的接口數據這個不重要理解精髓就好)先介紹jsonp的使用方法:

好人做到底源碼給你嘮
$(function(){
$.ajax({
type: "get",
url: "http://apis.juhe.cn/cook/query.php?menu=魚香肉絲&key=dfed9d599318b17aa073a9337d057e5f",
dataType: "jsonp"
}).done(function (data) {
console.log(data)
})
});
服務器運行的結果完美跨域獲取到數據

再介紹PHP配合ajax跨域:
先建立一個后綴名為.php的文件名字自己想,不會吧名字也讓我起,啊,再見朋友我的叫search.php!
內容為:

<?php
$data =$_POST['data'];
//服務器來接收客戶端發送的數據

//服務器允許 該請求頭進行跨域
header("Access-Control-Allow-Origin:http://apis.juhe.cn/cook/query.php?".$data."&key=dfed9d599318b17aa073a9337d057e5f");
// 服務器獲取數據的方式
header('Access-Control-Allow-Methods:GET');

// 動態獲取數據地址
$ulr ="http://apis.juhe.cn/cook/query.php?".$data."&key=dfed9d599318b17aa073a9337d057e5f";

// 服務器講獲取的數據轉換成JSON格式 返回給客戶端
$html=file_get_contents($ulr);

 

// 返回客戶端 echo 返回一個字符串
echo $html; //服務器來返回一個 string的 數據
?>
Index.html的內容為:

運行結果:

最后小七再說一下json和jsonp的區別json是一種數據格式而jsonp是一種跨域的方式根本不是一回事只是名字差不多,小七要睡了,zzzzzz每天叫醒小七的不是鬧鍾而是夢想!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM