黑马程序员技术交流社区

标题: 浅谈Ajax的原理 [打印本页]

---

作者: 谢华良    时间: 2012-10-26 21:18
标题: 浅谈Ajax的原理
Ajax的原理就是:通过javascript的方式，将前台数据通过xmlhttp对象传递到后台，后台在接收到请求后，将需要的结果，再传回到前台，这样就可以实现不需要页面的回发，页是数据实现来回传递，从页实现无刷新。
    Ajax的原理简单来说，实际上就是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。
    我们可以看出，XMLHttpRequest对象完全用来向服务器发出一个请求的，它的作用也局限于此，但它的作用是整个ajax实现的关键，我们可以把服务器端看成一个数据接口，它返回的是一个纯文本流，当然，这个文本流可以是XML格式，可以是Html，可以是Javascript代码，也可以只是一个字符串。这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是一样的，不同的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，然后再显示在页面。

---

作者: 邓艳秋    时间: 2012-11-3 00:56
分享得这么好的帖子，怎么又沉了呢？

---

作者: 李刚    时间: 2012-11-8 10:18
//声明一个xmlhttp变量  
var xmlhttp;
//创建ajax对象
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}else{// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//为ajax对象绑定事件处理
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        vstr = xmlhttp.responseText; //将ajax对象获取的text数据赋值
        vxml = xmlhttp.responseXml; //将ajax对象获取的xml数据赋值
    }
}
//GET方式发送信息
xmlhttp.open("GET","ajax_getCity.php?pIndex="+pIndex,true);
xmlhttp.send();
//POST方式发送信息
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");


多了也不会，就知道一点。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2