Ajax学习

原生ajax

get请求

    const xhr = new XMLHttpRequest();
    //发送参数
    xhr.open("GET","http://localhost:8080/server?id=1");
    xhr.send();
    xhr.onreadystatechange = function(){
      //readyState:0\1\2\3\4(代表服务器返回了所有结果)
      if(xhr.readyState === 4){
        if(xhr.status >=200 && xhr.status < 300){
          console.log(xhr.status)//状态码
          console.log(xhr.statusText)//状态字符串
          console.log(xhr.getAllResponseHeaders)//请求头
          console.log(xhr.response)
        }
      }
    }

post请求

  const btn = document.getElementsByTagName("button")[0];
  btn.addEventListener("click",function(){
    const xml = new XMLHttpRequest()
    xml.open("post","http://localhost:8080/server")
    //设置请求头
    xml.setRequestHeader("content-type","application/x-www-form-urlencoded")
    //发送参数
    xml.send("a=1&b=2")
    xml.onreadystatechange = function(){
      if(xml.status >= 200 && xml.status < 300 && xml.readyState === 4){
        console.log(xml.responseText)
      }
    }
  })

处理json格式数据

  const btn = document.getElementsByTagName("button")[0];
  btn.onclick = function(){
    const xhr = new XMLHttpRequest();
    //发送参数
    xhr.open("GET","http://localhost:8080/json-server");
   //接收json格式数据第二种方式    
    xhr.responseType = "json"
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.status >=200 && xhr.status < 300 && xhr.readyState === 4){          
         // 接收json格式第一种方式
        //  console.log(JSON.parse(xhr.response))
        console.log(xhr.response)
        }
    }
  }

其他参数

    const xhr = new XMLHttpRequest();
    //发送参数
    xhr.open("GET", "http://localhost:8080/timeout");
    xhr.send();
    //超时时间超过2000毫秒，就取消网络请求
    xhr.timeout = 2000
    //请求超时的回调函数
    xhr.ontimeout = function () {
      console.log("超时啦")
    }
    //网络错误的回调函数
    xhr.onerror = function () {
      console.log("网络出错了")
    }
    xhr.onreadystatechange = function () {
      if (xhr.status >= 200 && xhr.status < 300 && xhr.readyState === 4) {
        console.log(xhr.response)
      }
    }
    //用户手动调用，可暂停ajax请求
    xhr.abort()

其他方式使用ajax

jquery

• get请求

 //(string：请求地址，object：发送参数，function：回调函数，string：请求回来的数据格式)
    $.get("http://localhost:8080/jquery-timeout", { name: 'chen' }, (data) => {
      console.log(data)
    })

• post请求

//(string：请求地址，object：发送参数，function：回调函数，string：请求回来的数据格式)
$.post("http://localhost:8080/jquery-timeout", { name: 'chen' }, (data) => {
      console.log(data)
    }, 'json')
  })

• 通用请求

$.ajax({
      //请求地址
      url: "http://localhost:8080/jquery-timeout",
      //发送参数
      data: { a: 100, b: 200 },
      //请求类型
      type: "get",
      //响应体结果
      dataType: "json",
      //设置超时时间
      timeout: 2000,
      //请求成功的回调
      success: (data) => {
        console.log(data)
      },
      //请求出错的回调d:400
      err: () => {
        console.log("出错了")
      },
      headers: {
        c: 300,
        d: 400
      }
    })

axios

• get请求

axios.get('/jquery-timeout', {
      params: {
        a: 100,
        b: 200
      },
      headers: {
        name: 12,
        age: 20
      }
    }).then(res => {
      console.log(res)
    })

• post请求

//(string：请求地址，object：请求体参数，object：其他参数)
    axios.post('/jquery-timeout', { username: 'admin', password: 'root' }, {
      params: {
        a: 100,
        b: 200
      },
      //请求头参数
      headers: {
        name: 12,
        age: 20
      }
    })

• 通用请求

axios({
      //请求方法
      method: "post",
      //url
      url: "/jquery-timeout",
      //参数
      params: {
        a: 100,
        b: 200
      },
      //头信息
      headers: {
        c: 300,
        d: 400
      },
      //请求体参数
      data: {
        username: 'admin',
        password: 'root'
      }
    }).then(res => {
      console.log(res)
    })

fetch

fetch("http://localhost:8080/jquery-timeout?vip=7", {
      method: "post",
      headers: {
        a: 100,
        b: 200
      },
      body: "username=admin&password=root"
    }).then(res => {
      console.log(res)
    })