js的ajax請求

1 js原生get請求

<script>
  window.onload = function(){
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function(){
      let xhttp = new XMLHttpRequest();
      xhttp.open('get','http://localhost:3000/users');
      xhttp.send();
      xhttp.onreadystatechange = function(){
        if(xhttp.readyState == 4){//readyState 服務器響應的狀態編碼
          console.log(JSON.parse(xhttp.response));
        }
      }
    }
  }
</script>

get

 2 js原生post請求

<script>
    window.onload = function(){
      var oBtn = document.getElementById('btn');
      var obj = {
        "name":"zxq",
        "age":123
      }
      oBtn.onclick = function getData(){
        var xhttp = new XMLHttpRequest();
        xhttp.open('post','http://localhost:3000/users');
        xhttp.setRequestHeader("Content-type","application/json");//設置請求頭
        xhttp.send(JSON.stringify(obj));//將對象轉爲json格式
        xhttp.onload = function(){
          console.log("請求執行完畢");
          console.log(xhttp.responseText);
        }
      }
      console.log(oBtn.onclick.name);//getData
    }
</script>

post

3 jq的ajax請求

<script>
  $(function(){
    $('#btn').on('click',function(){
      $.ajax({
        type:'GET', 
        url:'http://localhost:3000/users',
        success:function(response){//成功回調函數
          console.log('成功了');
          console.log(typeof(response));
        },
        error:function(data){//錯誤輸出信息
          console.log('錯誤了');
          console.log(data);
        }
      })
      // 第二種get寫法
      // $.get('http://localhost:3000/users',
      // {"name":"zxq"},//get的傳入參數
      // function(data){//成功回調函數
      // console.log('成功了');
      // console.log(typeof(data));
      // })
    })
  })
</script>

get

<script>
  $(function(){
    $('#btn').on('click',function(){
      $.ajax({
        type:'POST', 
        url:'http://localhost:3000/users',
        dataType:'json',
        data:{name:'zzz'},//發送到服務器的數據，jq自動轉化格式
        success:function(response){//成功回調函數
          console.log('成功了');
          console.log(response);
        },
        error:function(data){//錯誤輸出信息
          console.log('錯誤了');
          console.log(data);
        }
      })
    })
  })
</script>

post

4 vue的axios發送ajax請求

  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        msg:'vue實例'
      },
      methods:{
        getData:function(){
          axios.get('http://localhost:3000/users',{
            params:{//傳入的參數
              id:20
            }
          })
          .then((response) => {//成功回調函數
            console.log(response.data);
          })
          .catch((response) => {//失敗回調函數
            console.log('錯誤了');
            console.log(response);
          })
          .finally(function(){//始終執行的函數
            console.log('finally函數執行');
          })
          //第二種寫法
          // axios({
          //   methods:'get',
          //   url:'http://localhost:3000/users',
          //   responseType:'json'//返回數據類型
          // })
          // .then(function(response){
          //   console.log(response);
          // })
        }
      }
    })
  </script>

axios

知識點總結：

ajax的整體流程

1 建立XMLHttpRequest對象

2 爲這個對象設置參數，也就是open方法

3 發送設置好的參數及內容，也就是send方法

4 接收服務器的響應數據，及對響應數據進行各類操做等

xhttp 的 readyState 存的是服務器請求響應的狀態信息：

0：初始化，建立了XMLHttpRequest對象

1：請求開始，初始化XMLHttpRequest對象，調用open方法

2：請求發送，調用send方法

3：開始讀取服務器響應,已經接收到響應頭，開始接收響應體

4：服務器接收所有完成，存入到XMLHttpRequest對象中

json（特定的字符串）與對象的相互轉化：

JSON.stringify(obj) 將對象轉化爲json格式

JSON.parse(json)將json格式轉化爲對象或數組等

var get = function getData(){}

這種方式定義的，get.name = getData;