2021-08-08

XMLHttpRequest对象
Ajax 简介 （Asynchronous JavaScript and XML（异步的
JavaScript 和 XML）） [eɪˈsɪŋkrənəs] 1.1 什么是 AJAX ？
Ajax不是某种编程语言
AJAX 是一种在无需重新加载整个网页的情况下，
能够更新部分网页的技术。
传统的网页（不使用 AJAX）如果需要更新内容，必需
重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、
Google 地图等等
1.2 同步与异步
同步：就是指一个进程在执行某个请求的时候，
若该请求需要一段时间才能返回信息，
那么这个进程将会一直等待下去，
直到收到返回信息才继续执行下去；
同步
//请求一 1ms
//请求二 1ms
//请求三 1ms
异步 3ms
异步：是指进程不需要一直等下去，
而是继续执行下面的操作，不管其他进程的状
态。
当有消息返回时系统会通知进程进行处理，
这样可以提高执行的效率。
异步实现：
1、运用HTML与CSS来实现页面，表达信息
2、运用XMLHttpRequest和web服务器进行数据的
异步交换
3、运用JavaScript操作DOM，实现动态局部刷新
1.3 AJAX-创建XMLHttpRequest 对象
什么是XMLHttpRequest对象？
XMLHttpRequest对象用于在后台与服务器交
换数据（具体介绍可见w3c）
创建XMLHttpRequest对象
所有现代浏览器（IE7+、Firefox、Chrome、
Safari
以及 Opera）均内建 XMLHttpRequest 对
象。
创建XMLHttpRequest对象的语法：
var xhr = new XMLHttpRequest();
老版本的Internet Explorer(IE5和IE6)使用
ActiveXObject对象：
var xhr=new
ActiveXObject(“Microsoft.XMLHTTP”);
为了应对所有的现代浏览器,包括IE5和IE6,请检
查浏览器是否支持XMLHttpRequest对象.如果支持，则创建
XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var xhr;
if(window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome,
Opera, Safari
xhr=new XMLHttpRequest();
}else{
// code for IE6, IE5
xhr=new
ActiveXObject(“Microsoft.XMLHTTP”);
}
1.4 AJAX - 向服务器发送请求
向服务器发送请求,我们使用XMLHttpRequest对象
的 open() 和 send() 方法：
open(method,url,asyns) 规定请求的类型、URL
以及是否异步处理请求。
参数说明：
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
Asynchronous
send(string):将请求发送到服务器
参数说明:string 仅用于POST请求
一个简单的GET请求:
xhr.open(“GET”,"/Ajax02/getInfor",true)
xhr.send();
一个简单的POST请求:
xhr.open(“POST”,"/Ajax02/getInfor",true)
xhr.send();
如果需要像HTML表单那样POST数据，请使用
setRequestHeader()来添加HTTP头然后在 send() 方法中规定您希
望发送的数据：
xhr.open(“POST”,"/jQueryAjax/postPersonInfor",true);
xhr.setRequestHeader(“Content-
type”,“application/x-www-form-urlencoded”);
xhr.send(data);//data表单中需要提交的数
据（字符串）
setRequestHeader语法：
setRequestHeader(header,value)：向请求添加
HTTP头。
参数说明：
header: 规定头的名称
value: 规定头的值
1.5 AJAX 服务器响应
使用XMLHttpRequest对象的responseText
或responseXML属性获取来自服务器的响应
responseText:获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。
1.6 AJAX onreadystatechange事件
在XMLHttpRequest对象中，readyState属性存有
XMLHttpRequest的状态信息，
每当readyState改变时，就会触发
onreadystatechange事件。
下面是XMLHttpRequest对象的三个重要属性：
onreadystatechange:存储函数(或函数名),每当
readyState属性改变时,就会调用该函数。
readyState:存有XMLHttpRequest的状态。从0到4
发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status: 200: “OK” 404: 未找到页面
在onreadystatechange事件中，我们规定当服务
器响应已做好被处理的准备时所执行的任务。
当readyState等于4且status为 200 时，表示响
应已就绪：
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status
== 200) {
var txt = xhr.responseText;
console.log(txt);
}
}
从控制器中获取数据 点击事件
document.getElementById(“btnGetData”).onclick =
function () {
//创建XMLHttpRequest对象
var xhr;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera,
Safari
xhr = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhr = new
ActiveXObject(“Microsoft.XMLHTTP”);
}
//xhr.open(“get”, “/Ajax/PersonData”,true);
xhr.open(“post”, “/Ajax/PersonData”,true);
xhr.send();
xhr.onreadystatechange = function () {
// readyState:存有XMLHttpRequest的状态。从0
到4发生变化。
/* 0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
//当readyState等于4且status为 200 时，表示
响应已就绪：
if (xhr.readyState == 4 && xhr.status ==
200) {
//responseText:获得字符串形式的响应数
据。
//responseXML：获得 XML 形式的响应数
据。
console.log(xhr.responseText);
console.log(xhr.responseXML);
// JSON.parse(json格式的字符串)==》js对
象
var person =
JSON.parse(xhr.responseText);
//在控制器中数据person的数据
console.log(person);
document.getElementById(“txtName”).value = person.name;
document.getElementById(“cboSex”).value
= person.sex;
document.getElementById(“txtAddress”).value =
person.address;
}
}
}
通过 XMLHttpRequest 对象从控制器中获取 person 数据