第七节 调用ajax的其他方法

1.原生ajax

 <p id="name"></p>
    <script>
      /* ajax  从服务器上获取数据的一种技术  是异步的
        1.创建ajax核心对象
        2.与服务器建立连接
        3.发送请求
        4.响应
        */
       /* JSON.parse()  json格式的字符串转换为json对象 */
       var url="https://www.easy-mock.com/mock/5d67436224fd60626abfe906/ajax/base";
        var xhr=new XMLHttpRequest();
        xhr.open('get',url,true)  //true  异步
        xhr.send()
        xhr.onreadystatechange=function(){
            /* console.log(xhr.readyState)
            console.log(xhr.status) */
            if(xhr.readyState==4 && xhr.status==200){
                var res=JSON.parse(xhr.responseText);
                console.log(res.data.name)
                var name=document.getElementById("name")
                name.innerHTML=res.data.name;
            }
        }
    </script>

2.jquery-ajax

 <style>
        body{
             background: pink; 
        }
        #loading{
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #fff1ce;
        }
    </style>

<div id="loading">
        <img src="images/giphy.gif" alt="">     
    </div>
    加载成功
<script>
        var url="https://www.easy-mock.com/mock/5d67436224fd60626abfe906/ajax/base"
        /* ajax传参
        1.请求的地址
        2.请求的方式 get,post
        */
        $.ajax({
            url:url,
            type:"get",
            dataType:"json",
            success:function(res){
                console.log(res)
                $("#loading").hide()
            },
            error:function(err){
                console.log(err)
            },
            beforeSend:function(){
                $("#loading").show()
            }     
        })
        </script>

3本地封装的Ajax

<script>
            function http({url,callback,type="get"}){
                $.ajax({
                    url,
                    type,
                    dataType:"json",
                    success:res=>{
                        callback(res)
                    }
                })
            }

            var url="http://localhost:8080/"
            http(url,handleDta);
            console.log(res)
            function handleData(res){
                for(var key in res){
                    var p =document.createElement("p");
                    p.innerHTML=res[key];
                    document.body.append(p)
                }
            }
    </script>

4.原生的js实现

<script>
        /* 
        客户端跨域 
        1.jsonp跨域
        2.script  因为script标签不受同源策略的限制
        */
        var url="http://douban.uieee.com/v2/movie/top250";
        // $.ajax({
        //     url,
        //     type:"get",
        //     dataType:"jsonp",   //更改数据类型
        //     success:res=>{
        //         console.log(res)
        //     }
        // })
        var script =document.createElement("script");
        script.src=url+"?callback=handleData";
        document.body.append(script);
        function handleData(res){
            console.log(res)
        }