ajax跨域,這個問題應該前端的掌握的技能, 哈哈 作為一個php的程序員,一直都是用的curl做了一個 "代理";這樣做很麻煩,於是乎我就研究下 jsonp 哈哈

什麼是jsonp?

Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。

為什麼我們從不同的域（網站）訪問數據需要一個特殊的技術(JSONP )呢？這是因為同源策略。同源策略，它是由Netscape提出的一個著名的安全策略，現在所有支持JavaScript 的瀏覽器都會使用這個策略。

大概看看 百度給的答案後,對jsonp有個瞭解咱們就開始上手.

在正式講jsonp 之前給大家分享個小知識點!

這是一個php程序文件:

<?php

if(isset($_GET[js])){
echo alert(123);
exit;
}

這是一個html文件:

我通過 <script> 標籤引入這個php文件, 輸出了一串 "alert(123)" 這串 js的代碼,這時候我訪問我的index.html,不出所料 彈出了一個 132的彈框,這說明什麼?

  1. <script> 標籤引入的文件是不受 同源機制 限制的, jq我就用百度資源庫的.
  2. 引入進來的文件是可以執行裡面的js代碼的

jsonp就利用這兩點,清楚這兩點之後,講這個跨域就很簡單啦!

先給大家看一下代碼:

伺服器端:

輸出: sunjiashishuaige({"code":"666"})

(這是重點)

看看輸出結果,像不像調用了一個函數? 是不是傳參了? 把 json數據傳給這個函數了? 這時候我們只需在 請求的文件頁面中定義一個函數,這樣一來 在我引入這個php文件時候,會調用我寫的這個函數,並把參數傳過來,ok我們的目的達到了!

jq的jsonp,都給你封裝好了

var ajax = ()=>{
$.ajax({
type: GET,
async: false,
url://boss.test/jsonp/index.php,
dataType: jsonp,
jsonp: callback,
jsonpCallback:sunjiashishuaige,//約定好這個函數名字
success: function(json){
console.log(json);
}
});
}

如果對你有幫助請點贊! 謝謝 原創發表於孫佳的知乎,轉載請註明


推薦閱讀：
相關文章