原生 Ajax 请求案例/模板

Ajax 原生

创建 Ajax 异步请求对象

var http;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
  http = new XMLHttpRequest();
} else { // code for IE6, IE5
  http = new ActiveXObject("Microsoft.XMLHTTP");
}

注册 response 处理方法

注册处理

http.onreadystatechange=function() {
  if (http.readyState==4 && http.status==200) {
    alert(http.responseText);
  }
};

发送请求

发送 GET 请求

http.open("GET", "test1.txt", true);
http.send();

发送 POST 请求

http.open("POST", "ajax_test.asp", true);
http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
http.send("fname=Bill&lname=Gates");

属性说明

方法：open()

http.open(METHOD, URL, ASYNC);

METHOD: 请求类型 GET, POST
URL: 目标链接地址，包括 QueryString
ASYNC: 是否异步请求

方法：send()

http.send(BODY);

BODY: 请求内容

属性：readyState

http.readyState => (Integer)

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

属性：onreadystatechange

http.onreadystatechange => (callback)

该事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

属性：status

 http.status => (Integer)

HTTP 状态码