AJAX详解

一、AJAX简介

简介：不刷新页面情况下更新页面内容。

查看

 控制台Network中可以快捷方便查看请求及响应信息。

优缺点

 优点：不刷新页面更新数据。
 缺点：页面没有历史回退；不利于SEO。

历史：

 信息格式：XML【自定义标签】 ==》JSON 
 AJAX历程：原生AJAX【XMLHttpRequest】 ==》JQuery中AJAX ==》axios

举例：

 1、掘金的页面，滚动到底部才会加载下一屏。就是滚动到底部触发事件，事件中发送AJAX请求请求下一屏数据。
 2、京东【下图】，只有鼠标hover上去才会加载对应的功能，就是AJAX。

二、原生AJAX

 前端代码

btnGet.onclick = function() {
  // 1、发送AJAX-GET请求
  let xhr = new XMLHttpRequest()
  //超时问题与网络错误问题
  xhr.timeout = 2000
  xhr.ontimeout = function() {
    alert('请求超时！')
  }
  xhr.onerror = function() {
    alert('网络异常！')
  }
  // 解决**IE缓存**问题：加一个时间参数
  xhr.open('GET', 'http://localhost:8000/serverOne?a=100&t=' + Date.now())
  xhr.send()
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.response)
    }
  }
}
btnPost.onclick = function() {
  // 1、发送AJAX-POST请求
  let xhr2 = new XMLHttpRequest()
  xhr2.open('POST', 'http://localhost:8001/serverTwo')
  // xhr2.setRequestHeader('num', '182054311')
  xhr2.send('a=100&b=jia')
  xhr2.onreadystatechange = function() {
    if (xhr2.readyState === 4 && xhr2.status === 200) {
    }
  }
}
celBtn.onclick = function() {
  //取消请求
  xhr.abort()
}

 后端代码【借助node与express实现】【下面的代码段就是express官网的，很简单，看官网即可】

const express = require('express')
const app = express()
const port = 8001

app.post('/serverTwo', (req, res) => {
  // 有了这个请求头，代表允许跨域。
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.setHeader('Access-Control-Allow-Headers', '*')
  res.send('Hello World!!!')
})

app.listen(port, () => {
  console.log(`正在监听 http://localhost:${port}`)
})

三、Jquery的Ajax

$('button').eq(0).click(function() {
     $.get('地址',{id:123,psw:123},function(data)=>{......},'json')
     $.post('地址',{传参},function(data)=>{......},'json')
     $.ajax({
         url:'',
         type:'GET',
         data:{},
         dataType:'json'
         timeout:2000,
         success:funcion(data){.....}
         error:function(){......}
     })
})

四、Ajax的进化——Axios

axios.get('地址',{params:{..参数...}})
axios.post('地址',{username: 'admin',pasword: 'admin'},{params:{..参数...}})
axios({
    method:'POST',
    url:'',
    data:{},
    params:{},
    headers:{}
}).then(res=>{....})