关于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>