AJAX常用知识点及应用

一、AJAX是什么？是用来做什么的？

AJAX是Async JavaScript And XML(异步的JS和XML)的缩写，是JS通过异步的方式来获取响应并且局部更新页面。

常用的请求方法：

地址栏回车               //会替换当前页面
![](./xxx)     //只能请求特定类型
<script src='./xxx'></script>    //只能请求特定类型
<link href='./xxx'>     //只能请求特定类型
<form action='./xxx' method=get>     //会替换当前页面

AJAX所带来的是局部更新页面。

二、XMLHttpRequest

XMLHttpRequest是一个API，它为客户端提供了在客户端和服务器之间进行数据传输的功能。它通过URL来获取数据，并且不会使页面整个刷新。它在AJAX中被大量使用。这个API挂在window上。

三、原生JS手写一个AJAX，背下来

  <button id="btn">点我</button>
  <script>
    btn.onclick = function(){
      var request = new XMLHttpRequest()
      request.open('get','./data.json?id=1')  //开启一个请求，不是发送；设置请求
      request.setRequestHeader('x-limingru','yyy') //设置请求头

      request.onreadystatechange = function(){  //只要readystate变化了就会触发这个函数，要想让它触发5次，应该放在最前面
        if(request.readyState === 4){  //响应已经下载完毕，请求完成（虽然不一定成功，但是过程完成）
          if(request.status >=200 && request.status < 300){
            console.log(request.status) // 获取响应码
            console.log(request.statusText) // 状态文
            console.log(request.getAllResponseHeaders())  //获取响应头
            console.log(request.responseText) //获取响应的文本
            alert('请求成功')
          }else{
            alert('请求失败')
          }
        }
      }
      request.send('post请求体')  //这是http请求的第四部分请求体,但是get请求默认是没有第四部分的，设置了也不会报错，post就有请求体

    }

四、jQuery写一个AJAX，背下来

<button id="btn">click me</button>

<script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script>
    btn.onclick = function(){
      $.get/post({
        url:'./data.json',
        data:{ id:1, name:'limingru' },  //如果是get这里就是查询参数，如果是post就会出现在请求体里
        success: function(response,status,xhr){
          console.log(response)
          console.log(status)
          console.log(xhr)  //这里面封装了XMLHttpRequest的方法，可以从中调用
        },
        error: function(){
          console.log('请求失败')
        }
      })
    }

  </script>

下面这个用了ajax，只是多了一个method

<button id="btn">click me</button>

  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script>
    btn.onclick = function(){
      $.ajax({
        method:'get',
        url:'./data.json',
        data:{ id:1, name:'limingru' },
        success: function(response,status,xhr){
          console.log(response)
          console.log(status)
          console.log(xhr.getAllResponseHeaders())
        },
        error: function(){
          console.log('请求失败')
        }
      })
    }