首頁 > 開發者 > JavaScript
標籤：javascript ajax 前端 jsonp
Ajax跨域—————————————————————————-
跨域: 跨網域名稱一個網域名稱下的檔案去請求了和他不一樣的網域名稱下的資源檔，那麼就會產生跨域請求這是ajax的跨域限制問題跨域的解決 : jsonp: json width padding核心: 1.script標籤 2.用script標籤載入資源是沒有跨域問題的 3.script只認檔案的實際內容，而不是尾碼。只要內容是合法的js就能用流程: 1.在資源載入進來之前定義好一個函數，這個函數接受一個參數(要取的資料) ，而將要載入過來的檔案裡執行這個函數並將要取的資料作為參數來傳遞。 2.在需要的時候，通過script標籤載入對應遠程檔案資源，當遠端資源被載入進來 的時候，就會執行定義好的函數，並將要取的資料作為參數傳遞到當前檔案。原理拓展: 動態地負載檔案，例如點擊以後才負載檔案，就在點擊事件裡給body添加script標籤 然後讓該sciprt的src為檔案地址,用url後面的callback參數來控制調用方法的方法名。執行個體：
以下代碼需要在伺服器環境下運行
布局代碼
<body> <input type="button" value="載入數字" /> <ul></ul> <input type="button" value="載入字母" /> <ul></ul> <input type="button" value="載入數字" /> <ul></ul></body>JS代碼
function fn0(data){ var aUl = document.getElementsByTagName(‘ul‘); for(var i = 0; i < data.length; i++) { var oLi = document.createElement(‘li‘); oLi.innerHTML = data[i]; aUl[0].appendChild(oLi); }}function fn1(data){ var aUl = document.getElementsByTagName(‘ul‘); for(var i = 0; i < data.length; i++) { var oLi = document.createElement(‘li‘); oLi.innerHTML = data[i]; aUl[1].appendChild(oLi); }}function fn2(data){ var aUl = document.getElementsByTagName(‘ul‘); for(var i = 0; i < data.length; i++) { var oLi = document.createElement(‘li‘); oLi.innerHTML = data[i]; aUl[2].appendChild(oLi); }}window.onload=function(){ var aInput = document.getElementsByTagName(‘input‘); var aUl = document.getElementsByTagName(‘ul‘); for(var i=0;i<aInput.length;i++) { (function(i){ aInput[i].onclick=function(){ var oScript = document.createElement(‘script‘); oScript.src = ‘data.php?t=num&callback=fn‘+i; document.body.appendChild(oScript); } })(i); };}後端代碼（php）
//data.php<?php $t = isset($_GET[‘t‘]) ? $_GET[‘t‘] :‘num‘; //前端告訴後端要輸出哪個資料，這裡是判斷輸出的數組是 //$arr1還是$arr2 $callback = isset($_GET[‘callback‘]) ? $_GET[‘callback‘] :‘fn0‘; //動態產生調用資料的方法，不必在後台寫死，預設調用fn0 //假設資料是兩個不同數組 $arr1 = array(‘111111‘,‘222222222‘,‘3333333333‘,‘44444444‘); $arr2 = array(‘aaaaaaaa‘,‘bbbbbbbb‘,‘ccccccccc‘,‘dddddddd‘); //按照前台的標誌來判斷返回的資料 if($t == ‘num‘){ $data = json_encode($arr1); echo $callback."(".$data.")"; } else{ $data = json_encode($arr2); echo $callback."(".$data.")"; }著作權聲明：本文為博主原創文章，未經博主允許不得轉載。
【前端學習筆記】原生Javascript中通過JSONP(前端常用方法)進行跨域
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
