Ajax技术(WEB无刷新提交数据)

2019-09-14 07:23:48王振洲

这个功能是很重要的,因为它帮助减少了无状态连接的痛苦,它还可以排除下载冗余HTML的需要,从而提高进程的速度。 
Mozilla(Mozilla1.0以上及NetScape7以上)做出的回应是创建它自己的继承XML代理类: 
XMLHttpRequest类。Konqueror (和Safari v1.2,同样也是基于KHTML的浏览器)也支持XMLHttpRequest对象, 
而Opera也将在其v7.6x+以后的版本中支持XMLHttpRequest对象。对于大多数情况, 
XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性也类似,只是有一小部分属性不支持。 
XMLHttpRequest的应用: 
// IE support 
if (window.ActiveXObject && !window.XMLHttpRequest) { 
 window.XMLHttpRequest = function() { 
 return new ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 5') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP'); 
 }; 

服务器进程返回数据的文本处理 
GET Requests 
Example: 
var req = new XMLHttpRequest(); 
if (req) { 
 req.onreadystatechange = function() { 
 if (req.readyState == 4 && req.status == 200) { 
 alert(req.responseText); 
 } 
 }; 
 req.open('GET', 'pageurl.html'); 
 req.send(null); 
}  
POST Requests 
Example: 
var req = new XMLHttpRequest(); 
if (req) { 
 req.onreadystatechange = function() { 
 if (req.readyState == 4 && req.status == 200) { 
 alert(req.responseText); 
 } 
 }; 
 req.open('POST', 'scripturl.cgi'); 
 req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
 req.send('var1=data1&var2=data2'); 

XMLHttpRequest 对象方法描述  
abort() 停止当前请求  
getAllResponseHeaders() 作为字符串返问完整的headers  
getResponseHeader("headerLabel") 作为字符串返问单个的header标签  
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 设置未决的请求的目标 URL, 方法, 和其他参数  
send(content) 发送请求 (param一定要这样传,因为后台得不到hidden params) 
setRequestHeader("label", "value") 设置header并和请求一起发送 ('post'方法一定要 ) 
XMLHttpRequest 对象属性描述  
onreadystatechange 状态改变的事件触发器(异步处理时要req.open('POST', 'servlet')或req.open('POST', 'servlet',true))