ajax五部曲

2017-10-23  本文已影响0人  杨赛舟

思路:

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
}
}

上一篇 下一篇

猜你喜欢

热点阅读