ajax高级---跨域问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

同源：当两个接口的协议，域名，端口号都相等时，这两个接口是同源的，只要有一个条件不相等，则非同源，不是同源的而两个页面不能互相访问本地缓存，不能互相修改dom节点，不能使用ajax请求对方接口数据

跨域请求数据
http://wthrcdn.etouch.cn/weather_mini?city=北京
创建XMLHttpRequest对象

        var xhr;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject('Microsoft.XMLHTTP')
        }
        //配置请求参数
        xhr.open('GET','http://10.0.159.198/news.html',true);
        //发送请求
        xhr.send(null);
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4   &&   xhr.status==200){
                alert(xhr.responseText)
            }
        }

JSONP:利用script标签请求外部服务器中的数据，从而绕开同源策略对AJAX的请求数据的限制

        /*var  script = document.createElement("script")
        script.type = 'text/javascript';
        script.src = 'http://10.0.159.198/news.php?callback=foo';
        document.getElementsByTagName("head")[0].appendChild(script);
        
        function foo(data){
            alert(data);
        }

封装jsonp数据

把创建script标签的步骤封装在一个函数中

        function creatScriptTag(srcString){
        var script = document.createElement("script");
        script.type = 'text/javascript';
        script.src  =srcString;
        document.getElementsByTagName("head")[0].appendChild(script);
        creatScriptTag('http://10.0.159.198/data.php?callback=foo')
        }
        function foo(data){
            alert(data);
        
        }

    </script>
</head>
<body>
</body>

</html>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容