Ajax、axios、fetch

一、与后端交互方式

Form 表单提交

• 只支持 GET 和 POST 类型
• 缺点：提交后页面会刷新，用户体验不佳

AJAX
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

• 支持多种请求方法
• 使用内置的 XMLHttpRequest 和 fetch 对象，实现和服务器进行数据交互
• 优点：交互数据时不需要刷新，体验较好

WebSocket

• 可以由服务端主动发起

二、XMLHttpRequest

GET 请求

let url = 'https://api.github.com'
let xhr = new XMLHttpRequest()
xhr.open('GET',url,true)
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
      if((xhr.status>=200 && xhr.status<300) || xhr.status===304){
        console.log(JSON.parse(xhr.responseText))
    }else{
        console.log('服务器异常')
    }
  }
}
xhr.onerror = function(){
    console.log('网络异常')
}
xhr.send()

POST请求

let url = 'https://xxx.com'
let xhr = new XMLHttpRequest()
xhr.time-3000
xhr.open('POST',url,true)
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
xhr.onload = function(){
    if((xhr.status>=200 && xhr.status<300) || xhr.status===304){
      console.log(JSON.parse.responseText)
  }else{
      console.log('响应异常')
  }
}
xhr.ontimeout = function(){console.log('请求超时')}
xhr.onerror=function(){console.log('服务器异常')}
xhr.send('username=hunger&password=12345678')

GET请求的封装

const request = (url,params,onsuccess,onerror)=>{
    url = url + '?' + Object.entries(params).map(array=>array[0]+array[1]).join('&')
  let xhr = new XMLHttpRequest()
  xhr.open('GET',url,true)
  xhr.onload = function(){
      if((xhr.status>=200 && xhr.status<300) || xhr.staus === 304){
        onsuccess(JSON.parase(xhr.responseText))
    }else{
        onerror()
    }
  }
  xhr.onerror = onerror
  xhr.send()
}
request('https://api.github.com',{q:test},
    data=>{console.log('请求成功');console.log(data)},
    ()=>{console.log('接口异常')}
)

Post请求编码方式：multipart/form-data

let formData = new FormData()
formData.append('username','Jack')
formData.append('password','123456')
let url = 'https://xxx.com'
let xhr = new XMLHttpRequest()
xhr.open('GET',url,true)
xhr.onload = function(){
    if((xhr.status>=200 && xhr.status<300) || xhr.status===304){
      console.log(JSON.Parase(xhr.responseText))
  }else{
      console.log('接口异常')
  }
}
xhr.send(formData)

Post请求提交表单例子

const $=s=>document.querySelector(s)
const $submit = $('[type=submit]')
const $form = $('form')
const $msg = $('#msg')
let url = 'https://xxx.com'
$form.onsubmit = function(e){
    e.preventDefalut()
  // 这里校验
  let formData = new FormData($form)
  let xhr = new XMLHttpRequest()
    xhr.open('GET',url,true)
    xhr.onload = function(){
        if((xhr.status>=200 && xhr.status<300) || xhr.status===304){
          //console.log(JSON.Parase(xhr.responseText))
      let data = JSON.Parase(xhr.responseText)
      $msg.innerText = data.msg || data.errMsg
      }else{
          console.log('接口异常')
      }
    }
    xhr.send(formData)
}

三、fetch

GET请求

let url = 'https://api.github.com'
fetch(url).then(response=>response.json())
  .then(data=>{console.log(data)})

POST请求

let url = 'https://xxx.com'
let data = {username:'Jack',password:123456}
fetch(url,{
  method:'POST',
  body:Object.entries(data).map(array=>array[0]+'='+array[1]).join('&'),
  header:{'Content-Type':'application'/x-www-form-urlencoded}
}).then(res=>res.json())
  .then(response=>console.log('Success:',response))
    .catch(error=>console.error('Error:',error))

四、轮询

Ajax轮询

• 每个固定时间发一次请求
• 发请求，立即响应

长轮询（Comet）

• 客户端
  • 发请求，等待响应
  • 当响应时，再次发请求
• 服务端
  • 请求到来，如果没新数据，则不发
  • 当有新数据，需要通知客户端，再响应

「@浪里淘沙的小法师」