8-1 原生ajax

1.未封装的ajax

 <script>
        /* 实现ajax的前提  
        1、html页面
        2、需要后端给我们提供的数据接口
        3、DOM将获取的数据放到页面上
        */
       var url  = `http://127.0.0.1:5500/mock/index.json`
        /* 1、创建ajax的核心对象 */
        var xhr = new XMLHttpRequest();
        /* 2、需要与服务器建立连接 */
        xhr.open("get",url,true)
        /* 3、发送请求 */
        xhr.send();
        /* 4、响应数据 */
        /* onreadystatechange监听服务器状态的变化 */
        xhr.onreadystatechange =  function(){
        //   readystate值代表服务器响应的变化  ==4  请求完成,响应准备就绪
        /* status==200请求成功,数据成功的响应 */
        /*
            0：未初始化（Uninitialized）。尚未调用 open()方法。 
            1：已打开（Open）。已调用 open()方法，尚未调用 send()方法。 
            2：已发送（Sent）。已调用 send()方法，尚未收到响应。 
            3：接收中（Receiving）。已经收到部分响应。 
            4：完成（Complete）。已经收到所有响应，可以使用了。
           */
            if(xhr.readyState==4 && xhr.status==200){
                var res = JSON.parse(xhr.responseText)
                console.log(res)
            }
        }
    </script>

2.JSON.parse( )
可以将json格式的字符串,转换为json格式的数据

JSON.parse( ) // 将json格式的字符串转为json对象
JSON.stringify( ) // 将json对象转为json格式的字符串

3.封装的ajax

/* 解构，回调函数 */
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)
        }
    }
}

<script>
  var url = "http://192.168.4.18:8000/"
  ajax({
    url,
    method:"get",
    success:res=>{
      console.log(res);
    }
  })
</script>