Ajax入门
AJAX入门
AJAX全称“AsynchronousJavaScriptandXML”（异步JavaScript和XML）是JavaScript，CSS，DOM，XmlHttpRequest4种技术的集合体，主要应用于异步获取后台数据和局部刷新。是一种创建交互式网页应用的网页开发技术。
传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的webservice接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。
通过与传统Web开发模式比较可知Ajax应用程序的优势在于：
通过异步模式，提升了用户体验
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大量用户量下的服务器负载。
………………………………………………………………………………………………………
XmlHttpRequest的属性
onreadystatechange指定当readyState属性改变时的事件处理句柄，只写。
readyState返回当前请求的状态，只读。
responseBody将回应信息正文以unsignedbyte数组形式返回，只读
responseStream以AdoStream对象的形式返回响应信息，只读。
responseText将响应信息作为字符串返回，只读。
responseXML将响应信息格式化为XmlDocument对象并返回，只读。
status返回当前请求的http状态码，只读。
statusText返回当前请求的响应行状态，只读。
XmlHttpRequest的方法
abort取消当前请求
getAllResponseHeaders获取响应的所有http头
getResponseHeader从响应信息中获取指定的http头
open创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)//常用
send发送请求到http服务器并接收回应//常用
setRequestHeader单独指定请求的某个http头
语法：
onreadystatechang指定当readyState属性改变时的事件处理句柄，只写
xmlHttp.onreadystatechange=getReady;
functiongetReady(){
//返回当前请求的状态,readyState共有四种状态(0,1,2,3,4)
//4(完成)数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
objectDiv.innerHTML="完成！！！";
}else{
objectDiv.innerHTML="抱歉，加载数据失败！原因："+xmlHttp.statusText;
}
}
}
readyState返回当前请求的状态，只读。readyState，变量。定义如下：
0(未初始化)对象已建立，但是尚未初始化（尚未调用open方法）
1(初始化)对象已建立，尚未调用send方法
2(发送数据)send方法已调用，但是当前的状态及http头未知
3(数据传送中)已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4(完成)数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
responseText将响应信息作为字符串返回，只读。
xmlHttpObj.responseText;
responseBody,responseStream,responseText,responseXML与之相似
responseXML可以返回一个文档树(DOM)，可以使用：
document.getElementsByTagName,
document.getElementsByTagNameNS,
document.getElementById等对其操作
stateus返回当前请求的http状态码，只读。
200表示请求的响应成功！！！
open创建一个新的http请求，并指定此请求的方法、URL以及验证信息
xmlHttpObj.open(Method,URL[,Async][,User][,PassWord]);[]表示可选
参数：
Method:POST|GET(大小写不敏感)
URL:请求的URL地址，可以为绝对地址也可以为相对地址。
Async:[true|fase]是否同步，默认为true。
User:如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，则会弹出验证窗口。
Password：验证信息中的密码部分，如果用户名为空，则此值将被忽略。
send发送请求到http服务器并接收回应
xmlHttpObj.send([Text]);
参数：
Text:要发送的数据，默认为空(null);
一个简单完整的XMLHTTP例子：
<scripttype="text/javascript">
varobjectDiv;
varxmlHttp;
functiongetXML(){
objectDiv=document.all.divHtml;
objectDiv.innerHTML="正在装载数据，请稍后...";
//针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
if(window.XMLHttpRequest){
xmlHttp=newXMLHttpRequest();
//针对某些特定版本的mozillar浏览器的bug进行修正
if(xmlHttp.overrideMimeType){
xmlHttp.overrideMimeType("text/xml");
}
}elseif(window.ActiveXObject){
//针对IE6，IE5
//将两个用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
//排在前面的版本较新针对高版本浏览器
varactivexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(vari=0;i<activexName.length;i++){
try{
//取出一个控件名进行创建，如果创建成功就终止循环
//如果创建失败，抛出异常，然后可以继续循环，继续尝试创建
xmlHttp=newActiveXObject(activeName[i]);
break;
}catch(e){
}
}
}
//开发阶段测试用例判断创建xmlHttp是否成功
/**
if(!xmlHttp){
alert("XMLHttpRequest对象创建失败！！！");
return;
}else{
alert(xmlHttp);
}
*/
//指定当readyState属性改变时的事件处理句柄，只写。
xmlHttp.onreadystatechange=getReady;
xmlHttp.open("GET","ajax/1103Schema.xml",true);
xmlHttp.send();
}
functiongetReady(){
//返回当前请求的状态,readyState共有四种状态(0,1,2,3,4)
//4(完成)数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
objectDiv.innerHTML="完成！！！";
}else{
objectDiv.innerHTML="抱歉，加载数据失败！原因："+xmlHttp.statusText;
}
}
}
functionxmlhttpOnclick(){
if(xmlHttp&&xmlHttp.responseText){
//alert(xmlHttp.responseText);
objectDiv.innerHTML=xmlHttp.responseText;
}
}
</script>
</head>
<body>
xmlhttp异步的例子:
URL:<inputvalue="http://localhost:8080/ajaxDemo/ajax/1103Schema.xml"style="width:600px">
<inputonclick="getXML()"type="button"value="得到源代码">
<inputonclick="xmlhttpOnclick()"type="button"value="显示源代码">
<divid="divHtml"></div>
</body>
相关推荐
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo