AJAX
AJAX所包含的技术:
AJAX(Asynchronous JavaScript And XML)涉及到7项技术,其中Javascript、XMLHttpRequest、Dom、XML是最为重要;
XMLHttpRequest对象:
XMLHttpRequest是XMLHTTP组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据交换,却不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做;这样既可减轻服务器负担又加快了响应速度、缩短了用户等待时间。
IE5.0开始,开发人员可以在Web页面内部使用XMLHTTPActiveX组件扩展自身的功能,不用从当前Web页面导航就可以直接传输数据到服务器或者从服务器接收数据。Mozilla1.0以及NetScape7则是创建继承XML代理类XMLHttpRequest;对应大多数情况,XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性类似,只是部分属性不同;
IE和非IE实例化XMLHttpRequestrian对象:
<script language=“javascript”>
var xmlHttp = false;
if (window.ActiveXObject) {
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
</script>
XMLHttpRequest对象的方法:
Abort() 停止当前请求;
getAllResponseHeaders() 作为字符串完整的返回headers;
getResponseheader(“hederLabel”) 作为字符串返回单个的header标签;
Open(“method”,“URL”[,asyncFlag[,”userName”[,”password”]]]) 设置 未决的请求的目标URL方法和其他参数;
open的第一个参数是HTTP请求的方法,GET、Post或者Head
open的第二个参数是目标URL。基于安全考虑,这个URL只能是同网域的,否则会提示“没有权限”的错误。这个URL可以是任何的URL,包括需要服务器解释执行的页面,而不仅仅是静态页面。目标URL处理XMLHttpRequest请求跟处理普通的HTTP请求一样,比如JSP可以用request.getParameter(“”)或者request.getAttribute(“”)来取得URL参数值。
open的第三个参数只是指定在等待服务器返回信息时,是否继续执行下面的代码。如果为true,则不会,直到服务器返回信息,默认为true;
Send(content) 发送请求;
setRequestHeader(“label”,”value”) 设置header并和请求一起发送;
跟form一样,如果要传文件或者Post内容给服务器,必须先调用 setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
这时,资料则以查询字符串的形式列出,作为send的参数,例如:name=value&so=on;
XMLHttpRequest对象属性:
onreadystatechange 状态改变的事件触发器;
readyState 对象状态(integer):0=未初始化,1=读取中,2=已读取,3=交互中,4=完成;
responseText 服务器进程返回数据的文本;
responseXML 服务器进程返回数据的兼容DOM的XML文档对象;
status 服务器返回的状态码,如404=“文件未找到”、200=“成功”
statusText 服务器返回的状态文本信息;
AJAX开发步骤:
1. 创建AJAX对象 ——— XMLHttpRequest;
var xmlhttp = false;
if(window.ActiveXObject){
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}else if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
alert(“您的浏览器不支持AJAX!”);
return false;
}
2. 使用请求时状态改变的事件触发器 ———— onreadystatechange
Xmlhttp.onreadystatechange = function( ){
//数据成功接收并返回时
if(xmlhttp.readystate==4){
if(xmlhttp.state==200 ){
var info = xmlhttp.responseText;
}
}else{
//没有成功返回数据时
var errinfo = stateText;
return false;
}
}
3. 组装请求 ———— open();
xmlhttp.open(“get”,”xxx.html”,true);
4. 发送请求 ————send();
xmlhttp.open(null);
发送过后就可以触发状态改变事件,在把整个过程用作某个事件发生时,最后返回对应的responseText或者stateText;
AJAX
最新推荐文章于 2021-08-07 00:05:34 发布