關於ajax跨域的一些說說

時間 2019-11-13

標籤關於 ajax 一些說說欄目 Ajax 简体版

原文原文鏈接

跨域：跨固然是跨過去，域固然是別的服務器 (說白點就是去別服務器上取東西) 只要協議、域名、端口有任何一個不一樣，都被看成是不一樣的域javascript

ajax 是一種請求響應無刷新技術(xmlhttqrequest對象請求服務器服務器響應數據到客戶端)html

固然ajax跨域就是請求別的服務器的東西,好了說了這麼多，下面看一個相似跨域原理的東西java

下面是我建立的兩個應用程序 test1 和test 2 jquery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Scripts/test1.js"></script>
</head>
<body>

</body>
</html>

test1.js 代碼

alert('我是test1網站');

彈出 alert('我是test1網站')web

//下面是testWeb2應用程序ajax

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://localhost:10603/testWeb1/Scripts/test1.js"></script>
</head>
<body>

</body>
</html>

testWeb2應用程序也會彈出 alert('我是test1網站')chrome

哦，我能引求到到test1Web應用程序的js 沒錯的確能請求到因這功要歸於 srcjson

<script>標籤的src屬性並不被同源策略所約束，因此能夠獲取任何服務器上腳本並執行。api

因此咱們ajax跨域能夠利用 src來實現(由於真實的ajax跨域本是一個僞命題)跨域

下面是引用百度百科關於josnp的一段話

Jsonp(JSON with Padding)是資料格式 json 的一種「使用模式」，可讓網頁從別的網域獲取資料。

因爲同源策略，通常來講位於 server1.example.com 的網頁沒法與不是 server1.example.com的服務器溝通，而 HTML 的 <script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁能夠獲得從其餘來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並非 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。

//上個請求google的地址

q是搜索關鍵字,callback 是回調函數名

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Scripts/test1.js"></script>

    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            $("#btnAdd").click(function () {
                $.ajax({
                    type: "get",
                    url: "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=result",
                    success: function (data) {
                        alert(data);
                    }

                });
            });
        });
    </script>
</head>
<body>
<input type="button" id="btnAdd" value="測試" />
</body>
</html>

//IE 和google chrome彈出效果以下:

//這時候咱們直接用XMLHttpRequest請求不一樣域上的數據時，是不能夠了

可是在頁面用src 引用不一樣的腳本是能夠的json正是用了這個特性

  <script type="text/javascript">
        function addScriptTag(src) {
            var script = document.createElement('script');
            script.setAttribute("type", "text/javascript");
            script.src = src;
            document.body.appendChild(script);
        }
          //調用加載ScrptTag函數
          window.onload = function(){
         //搜索apple，將自定義的回調函數名result傳入callback參數中
              addScriptTag("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=result");

          }
     //自定義的回調函數result
     function result(data) {
         //咱們就簡單的獲取apple搜索結果的第一條記錄中url數據
         alert(data.responseData.results[0].unescapedUrl);
         alert(data.responseData.results[0].cacheUrl);
     }

    </script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。