Ajax
|
Ajax涉及到的技术虽然很多，但是它并不是一门新的语言，它是在充分利用现有技术上提炼而出的。其中Javascript、XMLHttpRequest、Dom、XML是最为重要的技术。 传统的页面（不使用Ajax）如果需要更新内容，必需从新加载整个页面。但是很多时候我们并不需要这样做。这无异增加了服务器的载荷，用户体验也很差。而Ajax是一种用于创建快速动态网页的技术，它通过在后台与服务器进行少量的数据交换，实现网页异步更新。这意味着可以在不加载整个网页的情况下，对网页的某一部分内容进行更新。 从以上原理图中可以看到，使用Ajax可以分为四个阶段：创建对象，发送请求，服务器响应，执行响应任务。 创建对象 XMLHttpRequest对象是Ajax的基础，在使用Ajax前必须先创建该对象。所有的浏览器都支持XMLHttpRequest对象，但是不同的浏览器创建的方法稍微有点差异 varxmlhttp;
if(window.XMLHttpRequest){//IE7以上,Firefox,Chrome,Opera,Safari创建方法
xmlhttp=newXMLHttpRequest();
}else{//IE6,IE5创建方法
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
发送请求 向服务器发送请求有两种方法：GET和POST。这两种方法在实现上还是有点不同的 GET方法 xmlhttp.open("GET","path",true);
xmlhttp.send();
在open函数中有三个参数，第一个参数指定请求方法，这里是GET，第二个参数指定响应处理的文件在服务器上的路径，第三个参数true表示使用异步请求，如果是false的话则表示使用同步请求。 send函数则将open函数中规定好的请求发送到服务器上 POST方法 xmlhttp.open("POST",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(string);
POST方法与GET方法最大的区别在于需要为请求添加请求头，同时在send函数中需要一个参数，该参数为要请求的数据。 POST还是GET？ 这两种请求方式各有各的特点： GET请求更简单更快，代码量也比POST少（至少不需要添加请求头）。但是，GET请求的数据大小有限制，不能大于2KB，而且它是明文发送的，安全性差。 POST虽然比GET实现起来复杂一点，但是它传输的数据大，而且是密文发送的，安全性有保障。 服务器响应 判断服务器响应成功的标志如下 xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
//执行相关响应操作
}
}
readState存有XMLHttpRequest的状态，从0到4变换。4表示请求完成，响应就绪。 status==200表示处理的结果是ok的。 执行响应任务 执行响应任务必须在服务器响应正常的情况下才能进行。 xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
/*------responseText：获得字符串形式的响应数据------*/
vartext1=xmlhttp.responseText;
document.getElementById("myText").innerHTML=text1；
/*------responseXML：获得XML形式的响应数据------*/
vartext2=xmlhttp.responseXML;
document.getElementById("myXML").innerHTML=text2；
}
}
完整实例 <html><!DOCTYPEhtml>
<head>
<script>
functionloadXMLDoc()
{
varxmlhttp;
if(window.XMLHttpRequest){//IE7以上,IE5创建方法
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
/*------responseText：获得字符串形式的响应数据------*/
vartext1=xmlhttp.responseText;
document.getElementById("myText").innerHTML=text1；
/*------responseXML：获得XML形式的响应数据------*/
vartext2=xmlhttp.responseXML;
document.getElementById("myXML").innerHTML=text2；
}
}
xmlhttp.open("GET","路径",true);
xmlhttp.send();
/*POST方法
xmlhttp.open("POST","application/x-www-form-urlencoded");
xmlhttp.send(string);*/
}
</script>
</head>
<body>
<divid="myTest"><h2>使用Ajax修改该Test内容</h2></div>
<divid="myXML"><h2>使用Ajax修改该XML内容</h2></div>
<buttontype="button"onclick="loadXMLDoc()">修改内容</button>
</body>
</html> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |