参考原文:
例子:http://blog.csdn.net/beijiguangyong/article/details/7725596
原理讲解:http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html
本科学习ajax,老师一直给讲解各种控件的使用方法,导致学完ajax,根本什么都不理解。后来有幸进入了校实验室,跟着实验室项目学习,也一直是让用$.ajax(),只知道这个东西就是ajax,可以异步刷新,甚至不知道什么叫做异步刷新,只是一直谨记老师的话,可以提升用户体验,怎么怎么好。如今开始学习php,才第一次正式的认识ajax,才第一次明白当初怎么也记不住名字的XMLHttpRequest究竟是个什么东西。不能说非常理解,至少使用起来不再是那么的迷茫。至今尚未弄懂微软及谷歌的底层是如何实现对ajax的支持的,xmlhttprequest类的具体的实现也不懂,但至少知道如何不使用$.ajax()来写创建自己的XMLHttpRequest对象了。
- <script type="text/javascript">
-
- function createXMLHttpRequest(){
-
- if(window.XMLHttpRequest){
-
-
- XMLHttpReq=new XMLHttpRequest();
- }else{
-
-
- if(window.ActiveXObject){
- try{
- XMLHttpReq=new ActionXObject("Msxm12.XMLHTTP");
- }catch(e){
- try{
- XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
- }catch(e){}
- }
- }
- }
- }
-
- function handleResponse() {
-
- if (XMLHttpReq.readyState == 4) {
-
- if (XMLHttpReq.status == 200) {
- var out = "";
- var res = XMLHttpReq.responseXML;
- var response= res.getElementsByTagName("response")[0].firstChild.nodeValue;
-
- document.getElementById("Hello").innerHTML = response;
- }
- }
- }
-
- function sendRequest(url){
-
- createXMLHttpRequest();
-
- XMLHttpReq.onreadystatechange=handleResponse;
-
- XMLHttpReq.open("GET",url,true);
-
- XMLHttpReq.send(null);
- }
-
- function sayHello()
- {
- var name=document.getElementById("name").value;
-
- sendRequest("SayHell?name="+name);
- }
- </script>
- </head>
- <body>
- <font size="1">
- name:<input type="text" id="name"/>
- <input type="button" value="提交" onclick="sayHello()"/>
- <div id="Hello"></div>
- </font>
- </body>
- </html>
- 至于后台接收了数据该如何处理,以及如何封装成json数据格式,如何传输更多格式等,请期待后期更新。
ajax相关体会
原文:http://www.cnblogs.com/fengting/p/4199983.html