5、原生ajax

2-1 未封装的ajax

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 响应已经完成 */
  /*
   0：未初始化（Uninitialized）。尚未调用 open()方法。 
   1：已打开（Open）。已调用 open()方法，尚未调用 send()方法。 
   2：已发送（Sent）。已调用 send()方法，尚未收到响应。 
   3：接收中（Receiving）。已经收到部分响应。 
   4：完成（Complete）。已经收到所有响应，可以使用了。
  */
  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
  }
}

2-2 JSON.parse( )

可以将json格式的字符串,转换为json格式的数据

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

2-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>