AJAX - XMLHttpRequest 对象

Ajax 的核心是 XMLHttpRequest 对象。


AJAX 如何工作

• 1网页中发生一个事件（页面加载、按钮点击）
• 由 JavaScript 创建 XMLHttpRequest 对象
• XMLHttpRequest 对象向 web 服务器发送请求
• 服务器处理该请求
• 服务器将响应发送回网页
• 由 JavaScript 读取响应
• 由 JavaScript 执行正确的动作（比如更新页面）
  

AJAX实例:
HTML部分：
<div id="demo">
  <h2>让 AJAX 更改这段文本</h2>
  <button type="button">更改文本</button>
</div>

JS代码部分：
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();  
xhttp.onreadystatechange = function() {  
  if (this.readyState == 4 && this.status == 200) {  
   document.getElementById("demo").innerHTML = this.responseText//'请求成功返回的内容';  
  }  };  
xhttp.open("GET", "/try/ajav/demo_get.php", true);  
xhttp.send();}
</script>

XMLHttpRequest 对象方法

方法	描述
new XMLHttpRequest()	创建新的 XMLHttpRequest 对象
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method, url, async, user, psw)	规定请求 method：请求类型 GET 或 POST url：文件位置 async：true（异步）或 false（同步） user：可选的用户名称 psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader()	向要发送的报头添加标签/值对

XMLHttpRequest 对象属性

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
status	返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found"
statusText	返回状态文本（比如 "OK" 或 "Not Found"）