jQuery 發送ajax請求

寫在前面的話：

　　利用jQuery 的 ajax() 方法通過 HTTP 請求加載遠程數據 是非常簡便的，也是常用的功能。W3school網上的資料（里邊有各個參數的介紹）

---

 1.常用寫法：

$.ajax({
  url:'test.php',
  type:'POST',  // 默認為GET
  data:{
       name:'xy',
　　　　age:22
  },
  timeout:5000, // 超時時間
  beforeSend:function(xhr){
  　　console.log(xhr)
  　　console.log('發送前')
  },
  success:function(result){
  　　console.log(result)
  },
  error:function(xhr,textStatus){
  　　console.log('錯誤')
  　　console.log(xhr)
  　　console.log(textStatus)
  }
})

2.如果資源是跨域的，那么請求數據使用jsonp格式的：

$.ajax({
    url:"test2.php",
    type:"post",
    dataType:"jsonp",
    jsonp:"callback",
    data:{ page: 2 },
    success:function (result) {
        console.log(result)
    },
    error:function (error) {
        console.log(error)
    }
});

 3.關於向服務器傳遞數據的一些補充：

　　json字符串與json對象之間的轉換：

JSON.parse()        // json字符串轉化為json對象
JSON.stringify()    // json對象轉化為json字符串
// 例子1：
var s = {};
s.a = 'aaaa';
s.b = 'asdasd';
console.log(JSON.stringify(s))                // 字符串 {"a":"aaaa","b":"asdasd"}
console.log(JSON.parse(JSON.stringify(s)))    // 對象 Object {a: "aaaa", b: "asdasd"}

一般做法是：把頁面的數據存在一個對象里面，然后將這個對象轉換成json字符串，傳給服務器

//例子2:前端向后端發送數據     在一般場景來說，get方法無需JSON.stringify，post方法需要。？？
  function testFun(data) {
  　　$.ajax({
　　　　　url: "",
  　　　　type: "POST",
  　　　　dataType: "json",
  　　　　data: {data:JSON.stringify(data)},
  　　　　success: function (data) {
  　　　　　　console.log(data);
  　　　　}
  　　});
  }
在點擊提交或者保存時候，運行 testFun 函數；

 4.有些是需要在發送時設置請求頭的，設置方法：在ajax方法里面加一個參數 headers: {你要設置的內容}

例：

headers:{
Accept:"application/json;"
}

以上。

附：

網上找來的原生寫法（截的哪位大神的我不知道了），我本人目前還沒使用過原生來寫 ……

//原生寫法
$('#send').click(function(){
  //請求的5個階段，對應readyState的值
  //0: 未初始化，send方法未調用；
  //1: 正在發送請求，send方法已調用；
  //2: 請求發送完畢，send方法執行完畢；
  //3: 正在解析響應內容；
  //4: 響應內容解析完畢；

  var data = 'name=yang';
  var xhr = new XMLHttpRequest(); //創建一個ajax對象
  xhr.onreadystatechange = function(event){ //對ajax對象進行監聽
  　　if(xhr.readyState == 4){ //4表示解析完畢
  　　　　if(xhr.status == 200){ //200為正常返回
  　　　　　　console.log(xhr)
  　　　　}
  　　}
  };
  xhr.open('POST','url',true); //建立連接，參數一：發送方式，二：請求地址，三：是否異步，true為異步
  xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //可有可無
  xhr.send(data); //發送
});