手把手学会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 %> |