ajax(一)


  • 創建xhr對象: new XHRHttpRequest()
    xhr對象的屬性:

responseText: 代表響應主體的響應文本;
status: 返回狀態碼, 200: ok, 404:錯誤…
同步方式

xhr.open('get','test.php?rand=Math.random()',false); // false:同步
xhr.send(null);

異步方式

onreadystatechange事件監聽;
檢測readState狀態;

xhr.onreadstatechange = function(){
    if(xhr.readyState==4 && xhr.status==200){
        console.log(xhr.responseText);
    }
}
xhr.open('get','test.php',true);
xhr.send(null);

GET

web上, get一般是URL提交請求;
demo.php?name=Lee&age=100

Post

POST一般是表單提交;
如: <form method="post"><input type="text" name="name" value=...>

xhr.onreadstatechange = function(){
    if(xhr.readyState==4 && xhr.status==200){
        console.log(xhr.responseText);
    }
}
xhr.open('post','test.php',true);
// 修改請求頭,模擬表單提交
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send('name=Lee&age=10');  // 通過這裏提交數據

頭信息

  1. 響應頭信息: 服務器返回的信息, 客戶端可以獲取但不可設置;
  2. 請求頭信息: 客戶端可以設置但不獲取;
    全部響應頭信息: xhr.getResponseHeaders()
    獲取響應頭信息內容:xhr.getResponseHeader('Contnet-Type')
    設置: xhr.setResponseHeader(key,value)

特殊字符編碼

如字符中包含’&’, 則需要對其進行編碼,否則會出現問題: encodeURIComponent(name);

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章