概念：區域性重新整理頁面（不重新整理頁面更新資料）

本質：一個伺服器與瀏覽器之間的代理

使用

get請求

    //建立ajax物件
    const xhr = new XMLHttpRequest()
    const params = "?name=llr&age=18"
    ////引數一：請求方式型別|引數二：請求同源地址+引數
    xhr.open('get','http://localhost:3000/jack'+params)
    //傳送請求
    xhr.send()
    //獲取資源
    xhr.onload=function(){
      console.log(JSON.parse(xhr.responseText));
    }
 

post請求

   document.querySelector('#btn').addEventListener('click',function () { 
      const xhr = new XMLHttpRequest()
      const username = document.querySelector('#username').value;
      const age = document.querySelector('#age').value
      let params = `username=${username}&age=${age}`
      
 
//POST請求傳送方式
      xhr.open('post',`http://localhost:3000/first`)
       //設定請求引數型別
      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
       //POST請求引數傳遞方式
      xhr.send(params)
      xhr.onload=function(){
        console.log(JSON.parse(xhr.responseText));
      }
    })

post傳遞json

   document.querySelector('#btn').addEventListener('click',function () { 
      xhr.open('post','http://localhost:3000/first')
      xhr.setRequestHeader('Content-Type','application/json');
      xhr.send(JSON.stringify({name:'lisi',age:18}))
      xhr.onload=function(){
        console.log(xhr.responseText);
      }
    })

請求引數|狀態碼

Content-Type,

1. application/x-www-form-urlencoded=>傳統params(name=llr&age=18)

2. application/json=>json格式

注：傳統表單和get請求只能接受application/x-www-form-urlencoded請求格式

1. 通過xhr.status獲取瀏覽器狀態碼（400），通過xhr.readyState獲取ajax狀態碼

http狀態碼

通過xhr.status獲取伺服器狀態碼
404：檢查客戶端地址是否有誤
500：檢查後端資料是否出錯
oonerror:請求無法傳送到伺服器（網路問題），並且會觸發onerror事件

readyState

//目前已被onload事件代替
//狀態碼使用xhr.readyState獲取，234狀態碼需要通過onreadystatechange事件監聽變化
0：未初始化（沒呼叫open）
1：請求已建立，未傳送（沒呼叫send）
2：請求已傳送
3：請求處理中，部分資料可以使用
4：響應已完成，可以獲取並使用伺服器響應了
​

傳統網站問題

1. 網速慢，頁面載入時間長

2. 表單提交後，一項內容不合格，需要重新填寫所有表單內容

3. 頁面跳轉重定向，造成資源浪費

應用場景

1. 頁面上拉載入更多

2. 列表資料無重新整理分頁

3. 表單項離開焦點資料驗證

4. 搜尋框提示文字下拉列表

JSONP

原理：利用script標籤的src屬性

客服端
  <script>
      //客戶端提前宣告好函式，服務端返回宣告好的函式執行，並在形參中傳遞引數
    function request(params) {
        //params就是服務端傳過來的資料，這裡對他進行處理
      console.log(params);
    }
  </script>
  <script src='http://localhost:3001'></script>
服務端
<script>
    app.get('/',(req,res)=>{
      const fn = "request({name:'lisi',age:30})"
      res.send(fn)
     //也可以使用res.jsonp({name:'lisi',age:30}),不需要send就可以把資料傳遞過去
    })
</script>

func必須為全域性函式

方式
$.ajax({
    url:"127.0.0.1:8080",
    method:"get",
    dataType:"jsonp",
    success:res=>{
    console.log(res)
    }
})

CORS

只需要在伺服器中介軟體中設定res.header即可

app.use((req,res,next)=>{
  res.header('Access-Control-Allow-Origin','*')
  res.header('Access-Control-Allow-Method','post,get')
  next()
})

服務端跨域2

需要安裝引用第三方模組request

const request = require('request')
app.get('/',(req,res)=>{
    request('http://localhost:3001/cross',(err,response,body)=>{
        //err：錯誤物件,成功返回null
        //response:伺服器端響應資訊
        //body:需要跨域獲取的資料
        res.send(body)
    })
})

跨域cookie

處於安全性考慮 ,跨域中cookie不會儲存

客服端：xhr.withCredentials = true當傳送跨域請求時，攜帶cookie資訊

服務端：res.header('Access-Control-Allow-Credentials',true)

$.ajax

$.ajax({
    type:'post',
    url:'/user',
    //會自動轉換，如果是json需要自己json.strityfy(引數)
    data:JSON.stringify({username:'lisi'}),
    //預設contentType為'application/x-www-form-urlencoded'
    //如果需要將contentType改為json格式需要將data引數同時修改為json格式
    contentType:'application/json',
    datatype:'jsonp',
    jsonp:'cb',//將地址中的callback改為cb
    beforeSend:function(){
        //請求傳送前呼叫
        return false
    },
    success:function(data){
        console.log(data)
    },
    error:function(err){
        console.log(err)
    }
})

$.get|$.post

引數一：地址|引數二：params(可選)|引數三：成功後的回撥

$.get('http://www.example.com',{name:'zhangsan',age:30},function(){})
$.post('http://www.example.com',{name:'zhangsan',age:30},function(){})

全域性事件

$(document).on('ajaxStart',function(){})
$(document).on('ajaxComplete',function(){})

服務端RESTful API

修改jQuery中ajax的type即可

get查詢|post新增|delete刪除|put修改