search

duyue6002 / Blog

:pencil2: Write here
http://duyue6002.github.io/Blog/#/
5 stars 1 forks source link

[总结]原生Ajax、XMLHttpRequest对象、HTTP响应码 #4

Open duyue6002 opened 5 years ago

duyue6002 commented 5 years ago

原生Ajax请求

GET

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.send();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
   if (xhr.status === 200) {
        console.log(xhr.responseText);
    } else {
        console.log(xhr.status);
    }   
  }
};

POST

let newName = 'Shawn Mendes';
let xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(encodeURI('name=' + newName));
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
   if (xhr.status === 200 && xhr.responseText !== newName) {
        console.log(xhr.responseText);
    } else if (xhr.status !== 200) {
        console.log(xhr.status);
    }   
  }
};
duyue6002 commented 5 years ago

XMLHttpRequest对象详解

属性

  1. xhr.readyState：XMLHttpRequest对象的状态，等于4表示数据已经接收完毕。
  2. xhr.status：服务器返回的状态码，等于200表示一切正常。
  3. xhr.responseText：服务器返回的文本数据
  4. xhr.responseXML：服务器返回的XML格式的数据
  5. xhr.statusText：服务器返回的状态文本

readyState

duyue6002 commented 5 years ago

HTTP状态码

信息响应

100 Continue

客户端可继续响应

101 Switching Protocol

响应客户端Upgrade，表明服务器也在切换协议

成功响应

200 OK

成功