13-2 AJAX的使用

2-1ajax的使用

<p id="app"></p>
    <script>
        var app=document.getElementById("app");
        var url="http://192.168.4.18:8000/"
        /* ajax 如何使用ajax向后台获取数据*/
        /* 1.创建ajax核心对象 */
        var xhr=new XMLHttpRequest();
        /* 2.与服务器建立连接 xhr.open(method,url,async) 分别是 请求的方式，地址，是否异步*/
        xhr.open("get",url,true);
        /* 3.发送请求 */
        xhr.send();
        /* 4.响应
        onreadystatechange  监听服务器的响应状态
        */
        xhr.onreadystatechange=function(){
             /* xhr.status  服务器端响应的状态码  200 */
            /* xhr.readyState 服务器响应的进度  4 响应已经完成 */
            if(xhr.readyState==4 && xhr.status==200){
                var txt=xhr.responseText;
                 /* JSON.parse()  可以json格式的字符串,转换为json格式的数据 */
                var obj=JSON.parse(txt);
                console.log(obj);
                app.innerHTML=obj.name;
            }
        }
 </script>

2-2传参

<script>
        /* 解构   回调函数  键和值只写一个*/
        function http({
            callback:callback,
            method,
            url,
        }) {
            console.log(callback);
            console.log(method)
            console.log(url)
        }
        http({
            callback:"123",
            method:"get",
            url:"xx"
        })
    </script>

2-3封装

function ajax({
    url,
    method,
    success
}){
    var xhr=new XMLHttpRequest()
    xhr.open(method,url,true);
    xhr.send();
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4 && xhr.status==200){
            var res=JSON.parse(xhr.responseText);
            success(res);
        }
    }
}

2-4使用封装

要引入已经封装好的js文件
<script>
        var url="http://192.168.4.18:8000/";
        ajax({
            url,
            method:"get",
            success:res=>{
                console.log(res);
            }
        })
    </script>