手把手学会Ajax
Ajax(Asynchronous Javascript And Xml) ，异步Javascript和Xml 。对于它的详细概念这里不再赘述。但为了帮助大家理解下面的内容，我在这里简单解释一下：它可以在后台进行数据交换，也就是说不用提交整个页面，这样可以避免每点一个button,checkbox而产生讨厌的页面刷新，给用户一个全新的体验。经典的应用如googlemap等。
在开始之前，先将服务器配好，这里我使用的是IIS，然后我配置了一个虚拟目录（以下没有特殊说明，所有的操作都在这个目录中进行）。
新建一个文本文档，重命名为ajax.htm。在<HEAD>区内添加如下脚本
| <SCRIPT language=Javascript> var xmlHttp = false; xmlHttp = new XMLHttpRequest(); </SCRIPT> |
大家注意到其中声明了XMLHttpRequest这样一个类的对象，它就是Ajax的主角。但是这样初始化这个对象，会在不同版本的浏览器里出现异常而初始化失败，所以要完善这段代码，让他兼容不同版本的浏览器，如下
| <SCRIPT language=Javascript> var xmlHttp = false; try { xmlHttp = new XMLHttpRequest(); } catch (trymicrosoft) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { xmlHttp = false; } } } if (!xmlHttp) alert("Error initializing XMLHttpRequest!"); </SCRIPT> |
好了，对象的初始化完成了，下来我们看一下如何让他工作起来。先在<BODY>内加入几个简单的控件，以便来进行演示。
| <input type="text" id="name" name="name"/> <button>click</button> <div id="Msg">infor</div> |
一个文本框，一个按钮，一个DIV标签用来显示信息。按钮的在浏览器输入http://localhost:8080/Test/ajax.htm（这个路径由你的配置而定）。
好了为里面的按钮添加一个onclick事件相应，修改如下
| <button οnclick="callSever();">click</button> |
接下来我们来实现这个callSever()函数，如下
| var xmlHttp = false; …… …… if (!xmlHttp) alert("Error initializing XMLHttpRequest!");
function callSever() { var url = "service.asp?name=" + escape(document.getElementById("name").value); xmlHttp.open("GET",url,true); xmlHttp.onreadystatechange = updatePage; xmlHttp.send(null); } |
只有四句很简单。先声明一个url字符串，其中的其中service.asp是一个asp的服务器端同一目录下的页面。里面的内容很简单，用记事本打开，内容如下
| <% dim str str = "Hello " & request("name") response.write str %> |
只有几行vb的代码，就是把得到的值进行简单的处理，显示在这个页面。如果直接在地址栏输入http://localhost:8080/Test/service.asp?name=world，那么就会出现Hello world这样一个字符串。我们不用输入地址的方法，而直接使用xmlHttp.open()和xmlHttp.send()方法来完成。这样就把数据提交到service.asp上去了。那么怎样得到结果呢？大家注意到中间有这样一行代码xmlHttp.onreadystatechange = updatePage;其中onreadystatechange是一个事件，当准备状态发生变化时激发，而updatePage是一个自定义的处理函数，它的内容如下：
| function callSever() { …… } function updatePage() { switch(xmlHttp.readyState) { case 1: alert("请求正在发出。。。"); break; case 2: alert("请求正在处理。。。"); break; case 3: alert("请求正在处理，部分数据已处理。。。"); break; case 4: if(xmlHttp.status!=200) return; alert("处理完成！"); document.getElementById("Msg").innerHTML = xmlHttp.responseText; break; default: break; } } |
大家可以看到，每次状态变化激发时，xmlHttp.readyState的值都不一样。由代码可以看出，每提交一回数据，状态会改变四次，每次的意思大家看代码就应该会明白。xmlHttp.readyState的值为4时，数据处理完成，我们就可以利用xmlHttp.responseText属性获得响应的所有文本。我们把它显示在指定的标签。点击按钮后，如图：
这次的教程就到这里，我把两个文件的代码完整的贴出来，有什么问题可以参考。
ajax.htm：
| <HTML> <HEAD> <SCRIPT language=Javascript> var xmlHttp = false; try { xmlHttp = new XMLHttpRequest(); } catch (trymicrosoft) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { xmlHttp = false; } } } if (!xmlHttp) alert("Error initializing XMLHttpRequest!");
function callSever() { var url = "service.asp?name=" + escape(document.getElementById("name").value); xmlHttp.open("GET",url,true); xmlHttp.onreadystatechange = updatePage; xmlHttp.send(null); } function updatePage() { switch(xmlHttp.readyState) { case 1: alert("请求正在发出。。。"); break; case 2: alert("请求正在处理。。。"); break; case 3: alert("请求正在处理，部分数据已处理。。。"); break; case 4: if(xmlHttp.status!=200) return; alert("处理完成！"); document.getElementById("Msg").innerHTML = xmlHttp.responseText; break; default: break; } }
</SCRIPT> </HEAD> <BODY> <input type="text" id="name" name="name"/> <button οnclick="callSever();">click</button> <div id="Msg">infor</div> </BODY> </HTML> |
service.asp
| <% dim str str = "Hello " & request("name") response.write str %> |
2283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
