Json、Ajax基础、跨域

天空飘来

已于 2023-03-21 11:35:50 修改

阅读量125

点赞数

文章标签： ajax json javascript

于 2019-10-16 21:28:16 首次发布

本文链接：https://blog.csdn.net/qq_43236320/article/details/102569033

版权

Ajax

关于Ajax

Ajax的优缺点

XMLHttpRequest对象

XMLHttpRequest的作用

可以向服务器提出请求并处理响应，而不阻塞用户
可以在页面加载以后进行页面的局部更新

如何使用Ajax

注意：open方法不会向服务器发送真正的请求，它相当于初始化请求并准备发送只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错。

async是一个布尔值，默认为true。如果是异步通信方式（true），客户机就不等待服务器的响应；如果是同步方式（false），客户机就要等到服务器返回消息后才去执行其他操作。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>ajax</title>
    <link rel="stylesheet" type="text/css" href="001Style.css">
</head>
<body>
    <div class="banner" id="banner"></div>


    <script type="text/javascript">
        //封装通用的xhr对象，兼容各个版本
        function createXHR(){
            //判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7、Firefox、opera等
            if(typeof XMLHttpRequest != "undefined"){
                //code for IE7+,Firefox,chrome,opera,safari
                return new XMLHttpRequest();
            }else if(typeof ActiveXObject != "undefined"){
                //code for IE5,IE6
                //将所有可能出现的ActiveXObject版本放在一个数组中
                var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
                //遍历创建XMLHttpRequest对象
                var len = xhrArr.length,xhr;
                for(var i=0; i<len; i++){
                    try{
                        //创建XMLHttpRequest对象
                        xhr = new ActiveXObject(xhrArr[i]);
                        break;
                    }catch(ex){

                    }
                }
            }else{
                throw new Error('no XHR object availabel.');
            }
        }
        //XMLHttpRequest对象
        var xhr = createXHR(), data = null;
        
        // 响应XMLHttpRequst对象状态变化的函数,onreadyststechange在readystatechange属性发生改变时触发
        xhr.onreadystatechange = function(){
            //异步调用成功
            if(xhr.readyState == 4){
                if((xhr.status>=200 && xhr.status<300) || xhr.status === 304){
                    //获得服务器返回的数据
                    //console.log(xhr.responseText);
                    //console.log(eval("("+xhr.responseText+")"));
                    //data = eval("("+xhr.responseText+")");
                    data = JSON.parse(xhr.responseText);
                    // data = JSON.stringify(xhr.responseText);
                    //console.log(data.slider);
                    
                    //渲染数据到页面中
                    renderDataToDom();
                }
            }
        }

        // 创建get请求
        xhr.open("get","002.html",true);
        // xhr.open("get","./server/slider.json?user=zhangsan",true);
        //发送请求
        xhr.send(null);

        // // 创建post请求
        // xhr.open("post","./server/slider.json",true);
        // //发送请求
        // xhr.send({user:"zhangsan", id:6});
        // //设置http头部信息
        // xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        
        //渲染数据
        function renderDataToDom(){
            var img = data.sider, i,
                len = img.length, str = "",
                banner = document.getElementById("banner");
            for(i=0; i<len; i++){
                str += '<a href="'+img[i].linkUrl+'"><img src="'+img[i].picUrl+'"></img></a>';
            }
            banner.innerHTML = str;
        }

    </script>
</body>
</html>

JSon

什么是JSon

JSon的语法规则

JSon对象

jQuery的ajax方法

1、 $. aja x () 2 、$ .get()
3、 $. p os t () 4 、$ .getJson()

跨域

跨域是指从一个域名的网页去请求另一个域名的资源。严格一点的定义就是：只要协议、域名、端口有任何一个的不同，就被当作是跨域

同源政策

所谓同源是指：域名、协议、端口均相同

解决跨域

跨域资源共享（CORS）
使用JSONP（常用）
修改document.domain
使用window.name

JSONP

JSONP是JSON with Padding（填充式json）的简写，是应用JSON的一种新方法，也是一种跨域解决方案

JSONP的组成

JSONP有两部分组成：回调函数和数据。
回调函数是当响应到来时应该在页面中调用的函数，
而数据是传入回调函数中的JSON数据。

JSONP的原理

直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引用不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。

        //封装JSONP
        function getJSONP(url, callback){
            if(!url){
                return;
            }
            //声明数组用来随机生成函数名
            var a = ['a','b','c','d','e','f','g','h','i','j'],
                r1 = Math.floor(Math.random()*10),
                r2 = Math.floor(Math.random()*10),
                r3 = Math.floor(Math.random()*10),
                name = 'getJSONP'+a[r1]+a[r2]+a[r3],
                cbname = 'getJSONP.'+ name;
                //判断url地址中是否含有？号
                if(url.indexOf('?') === -1){
                    url += '?jsonp=' + cbname;
                }else{
                    url += '&jsonp=' + cbname;
                }
                //动态创建script标签
                var script = document.createElement('script');
                //定义被脚本执行的回调函数
                getJSONP[name] = function(data){
                    try{
                        callback && callback(data);
                    }catch(e){
                        //
                    }finally{
                        //最后删除该函数及script标签
                        delete getJSONP[name];
                        script.parentNode.removeChild(script);
                    }
                }
                //定义script的src
                script.src = url;
                document.getElementByTagName("head")[0].appendChild(script);
        }
        //getJSONP("http://www.baidu.com?pid=889444657");
        getJSONP("http://class.imooc.com/api/jsonp",function(data){
            console.log(data);
        });

天空飘来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Json、Ajax基础、跨域

Ajax关于AjaxAjax的优缺点XMLHttpRequest对象XMLHttpRequest的作用可以向服务器提出请求并处理响应，而不阻塞用户可以在页面加载以后进行页面的局部更新如何使用Ajax注意：open方法不会向服务器发送真正的请求，它相当于初始化请求并准备发送只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错。async...
复制链接

扫一扫