js讀取本地json/txt/xml存在跨越問題，能夠用jsonp 讀取本地json文件

時間 2019-11-13

標籤讀取本地 json txt xml 存在跨越問題能夠 jsonp 文件欄目 JavaScript 简体版

原文原文鏈接

想本身用 js寫一個原生的ajax請求，訪問本地文件，json/txt。可是demo，寫了一個後，發現javascript

原來是跨域了。

js 寫的原生ajax 請求代碼以下

html代碼html

<div id="myDiv">將獲取的txt 文件 展現出來</div>
 
 
<button type="button" onclick="loadX()">經過 AJAX 改變內容</button>

js 代碼java

function loadX (){
 
        /* 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：
        variable=new ActiveXObject("Microsoft.XMLHTTP");
        爲了應對全部的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。
        若是支持，則建立 XMLHttpRequest 對象。若是不支持，則建立 ActiveXObject ：*/
 
 
        var xmlhttp;
        if(window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest();     //IE7，FireFox,Chrome,OPera,Safari
        }else{
            xmlhttp = new ActiveXobject('Microsoft.xmlHTTP');  // IE6，IE5
        }   
 
 
           /* 屬性 描述
            onreadystatechange 存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
            readyState      存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
                            0: 請求未初始化
                            1: 服務器鏈接已創建
                            2: 請求已接收
                            3: 請求處理中
                            4: 請求已完成，且響應已就緒
              status        200: "OK"
                            404: 未找到頁面
         onreadystatechange 事件中，咱們規定當服務器響應已作好被處理的準備時所執行的任務。
           當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：*/
 
 
               
        //    根據 readyState  值不一樣，表明響應狀態 的進程
      xmlhttp.onreadystatechange=function(){
          if (xmlhttp.readyState==0){
                      alert(0)
          }
          else if (xmlhttp.readyState==1){
                      alert(1)
          }
          else if (xmlhttp.readyState==2){
                      alert(2)
          }
          else if (xmlhttp.readyState==3){
                      alert(3)
          }
        else if (xmlhttp.readyState==4 && xmlhttp.status==200){
                  alert(4)
                  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
          }
      }
            xmlhttp.open('GET','text.txt',true);
            xmlhttp.send(); 
 
    }

txt 文本內的內容
text('這是一段文字，')

網上查找了方法，能夠用jsonp 。因而又去找jsonp 的文檔

jquery

1．jsonp簡介ajax

json 是一種數據格式
jsonp 是一種數據調用的方式。

1）什麼是jsonp

爲了便於客戶端使用數據，逐漸造成了一種非正式傳輸協議，人們把它稱做JSONP，該協議的一個要點就是容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。

JSONP的優勢是：它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中均可以運行，不須要XMLHttpRequest或ActiveX的支持；而且在請求完畢後能夠經過調用callback的方式回傳結果。

2）與ajax的區別

一、ajax和jsonp這兩種技術在調用方式上「看起來」很像，目的也同樣，都是請求一個url，而後把服務器返回的數據進行處理，所以jQuery和ext等框架都把jsonp做爲ajax的一種形式進行了封裝；

二、但ajax和jsonp其實本質上是不一樣的東西。ajax的核心是經過XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加script標籤來調用服務器提供的js腳本。

三、因此說，其實ajax與jsonp的區別不在因而否跨域，ajax經過服務端代理同樣能夠實現跨域，jsonp自己也不排斥同域的數據的獲取。

四、還有就是，jsonp是一種方式或者說非強制性協議，如同ajax同樣，它也不必定非要用json格式來傳遞數據，若是你願意，字符串都行，只不過這樣不利於用jsonp提供公開服務。

總而言之，jsonp不是ajax的一個特例，儘管jquery等把jsonp封裝進了ajax，也不能改變這一點。

2. 本身使用jsonp 成功調用本地文件的demojson

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 
 
<script type="text/javascript">  
 
    function indexDemo(result){
      //回調函數名稱(indexDemo)，須要與 src 中一致，並且要與文件地址中名一致。jsonp格式 名稱({})
    //否則沒法獲取到對應的文件
       console.log(result)     //打印 indexDemo.json 中的數據
    }
 
 
</script>  
 
<!--jsonp中 須要注意的是
     <script  src="jq.json?callback=loa"></script>
 src ? 以前爲文件地址，? 以後爲回調函數callback名稱，
回調函數能夠簡寫爲 cb ,  而後 回調函數 名稱要與  文件中的名稱一致
能夠在 對應的文件名中看下，如，jq.json?callback=loa,jq.json的  名字爲  loa-->
 
 
<script type="text/javascript" src="index.json?callback=indexDemo"></script>
 
 
</body>
 
 
</html>

index.json 中內容跨域

indexDemo({
    "a":"lllll",
    "b":"2222" 
     })

這樣打印出來的內容就是這樣的瀏覽器

成功調用本地json 數據。服務器

3.跨域訪問數據舉例

上一個是訪問的本地jsonp，此次訪問如下百度的關鍵字部分，訪問百度搜索數據，好比返回百度搜索遊戲的結果框架

打開百度首頁，同時代開網頁debug，切換到Network，在百度搜索框中輸入關鍵字遊戲時會發現nerwork下面不斷有數據變化，在name那一欄下找到su?wd開頭的數據點擊打開它的頭部信息，把Request URL請求的地址取出，不要wd=XXX和cd=XXX中的XXX分別替換爲」旅遊」和」demo」，做爲jsonp跨域訪問的地址，其中wd爲百度搜索關鍵字,cb爲回調函數。

<script type="text/javascript">
 function demo (res){  
      console.log(res);   //打印從百度獲取的 關鍵字列表
    }
</script>  
<script  src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=旅遊&cb=demo"></script>

打印出來的內容

結束！

原文：https://blog.csdn.net/jiaoshuaiai/article/details/71747918