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

封装ajax

  1. <script src="js/http.js"></script>
  2. </head>
  3. <body>
  4.     <script>
  6.         var url = "http://192.168.4.18:8000/"
  7.         ajax({
  8.             url,
  9.             method:"get",
  10.             success:res=>{
  11.                 console.log(res)
  12.             }
  13.         })
  14.     </script>
  1. function ajax({
  2.     url,
  3.     method,
  4.     success
  5. }){
  6.     var xhr =  new XMLHttpRequest()
  7.         xhr.open(method,url,true)
  8.         xhr.send()
  9.         xhr.onreadystatechange = function(){
  10.             if(xhr.readyState == 4 && xhr.status == 200){
  11.                 var res = JSON.parse(xhr.responseText);
  12.                 success(res);
  13.             }
  14.         }
  15. }