思路：
1:Javascript监听浏览器网页事件(点击,提交,更改等)
2:由javascript创建Ajax引擎对象
3:通过Ajax引擎对象发出请求
4:Ajax引擎等待并且接受服务器的响应内容
5:javascript再从 Ajax引擎对象 中获取响应内容,
并且通过dom改变网页界面显示效果
（1）创建Ajax引擎对象
就是XMLHtttpRequest对象,所有现代浏览器均支持XMLHttpRequest对象
(IE5 和 IE6 使用 ActiveXObject)它同时也是一个Javascript对象.
Ajax引擎(XMLHttpRequest)
兼容处理
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest;
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
(2) 配置请求对象的信息
xhr.open('GET/POST','url地址',['是否异步']);
注意：如果使用post请求,就一定要设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gb2312");
(3) 发送请求
xhr.send([post请求参数字符串]);
发送请求分为两种情况:
【1】监控用户的事件(onclick,onchange等),通过ajax发送请求
【2】监控浏览器的事件(onload),通过ajax发送请求.
(4) 监听Ajax引擎对象的改变(是否正确做出了响应)
xmlHttpRequest.onreadystatechange = function(){
if (xmlHttpRequest.readyState== 4 && xmlHttpRequest==200) {
//xmlHttpRequest.responseText
}
}
【1】 详解onreadystatechange
onreadystatechange属性是一个方法,
监控到响应内容的返回,
根据响应内容使用javascript改变当前页面的部分html代码,从而达到不刷新改变局部html代码.
当Ajax引擎的状态发生改变时都会执行onreadystatechange属性对应的方法
其他方法：
abort:取消当前请求
getAllResponseHeaders:获取响应的所有http头
getResponseHeader:从响应信息中获取指定的http头
open(方式get/post，url地址，同步异步):
创建一个新的http请求，打开请求，并指定此请求的方法、URL以及验证信息(用户名/密码)
send():发送请求到http服务器并接收回应
setRequestHeader:单独指定请求的某个http头，header()设置http头协议信息
其他属性：
onreadystatechange:指定当readyState属性改变时的事件处理句柄。
readyState:返回当前请求的状态，ajax行进过程中不同状态
responseBody:将回应信息正文以unsigned byte数组形式返回.
responseStream:以Ado Stream对象的形式返回响应信息。
responseText:将响应信息作为字符串返回.只读
responseXML:将响应信息格式化为Xml Document对象并返回，只读
status:返回当前请求的http状态码. 200 ok 304 缓存；
404 not found; 403 没有权限 501 服务器级别错误
statusText:返回当前请求的响应行状态文本， ok not found forbidden
【4】 - 详解Ajax引擎的状态属性 readyState(0 1 2 3 4)
*0.请求未初始化
*1.服务器连接已建立
*2.请求已接收
*3.请求处理中
*4.请求已完成,并且响应已就绪
当Ajax引擎的状态属性为readyState为4时,说明服务器的响应已经发送给Ajax请求了.
但是响应的状态吗为200时:说明响应的内容是正确的,这时才会根据相应内容对当前页面的html处理
总结：
var xhr = new XMLHttpRequest;
xhr.open('GET/POST','url地址',['是否异步']);
xhr.send([post请求参数字符串]);
xhr.onreadystatechange = function(){
if (xmlHttpRequest.readyState== 4 && xmlHttpRequest==200) {
//xhr.responseText
}
}
网友评论