void(0);"onclick="makeRequestTwo('dealRequestTwo.jsp')">
点击本超链接,同样可以产生请求
注意其中中的“#”包含了一个位置的信息,默认的锚点是“#top”,也就是网页的上端;而中的“javascript:
void(0)”仅仅表示一个死链接。
在动态创建时对超链接中的href属性赋值的代码如下:
aLinkObj.setAttribute("href","javascript:
void0");
(5)再添加一个javascript.js文件以包含我们的JavaScript处理脚本
(6)在该文件中包含下面的JavaScript脚本------体验“responseText属性”的应用
varxmlHttpRequest;
functionmakeRequestOne(targetRequestURL){
/**
*
(1)创建出XMLHttpRequest对象实例
*/
xmlHttpRequest=createXMLHttpRequest();
/**
*(3)将获得服务器返回结果的响应输出函数“绑定”到XMLHttpRequest对象实例中
*/
xmlHttpRequest.onreadystatechange=getResultFromServer;
/**
*(4)构造请求的连接,并向服务器端程序发送异步请求
*/
xmlHttpRequest.open("get",targetRequestURL,true);
xmlHttpRequest.send(null);
}
functioncreateXMLHttpRequest(){
varlocalXMLHttpRequest;
if(window.XMLHttpRequest){
/**
*
*表示用户的浏览器为fireFox等非IE系列,则应用XMLHttpRequest对象模板创建出对象实例
*/
localXMLHttpRequest=newXMLHttpRequest();
}
elseif(window.ActiveXObject){
/**
*
*表示用户的浏览器为IE系列,则应用ActiveXObject对象模板创建出对象实例
*/
try{
localXMLHttpRequest=newActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
try{
localXMLHttpRequest=newActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
window.alert("你的IE浏览器不支持XMLHttpRequest相关的技术实现!
");
}
}
}
returnlocalXMLHttpRequest;
}
/**
*
(2)定义一个获得服务器返回结果的响应输出函数
*/
functiongetResultFromServer(){
/**
*(5)识别浏览器是否正在接收服务器端程序的返回值吗?
并识别是否接收完毕(OK---200)?
*/
if(xmlHttpRequest.readyState==4){
if(xmlHttpRequest.status==200){
/**
*(6)获得服务器返回的结果值——提取出所接收的文本结果
*/
showResultInSomeOneTag(xmlHttpRequest.responseText);
}
elseif(xmlHttpRequest.status==400){
window.alert("你的请求无效!
");
}
elseif(xmlHttpRequest.status==404){
window.alert("你向服务端程序请求的URL不正确,未找到请求的目标文件!
");
}
elseif(xmlHttpRequest.status==500){
window.alert("服务器由于遇到错误而不能完成该请求!
");
}
elseif(xmlHttpRequest.status==505){
window.alert("HTTP版本不受支持!
");
}
else{
window.alert("出现了其它不知名的错误!
");
}
}
}
/**
*局部更新某个标签内的内容为服务器端程序的返回结果
*/
functionshowResultInSomeOneTag(someOneResultFromServer){
varsomeOneDivTagObject=document.getElementById("showResultOne");
someOneDivTagObject.style.display="inline";
someOneDivTagObject.innerHTML=someOneResultFromServer;
}
//**********下面的代码示实现另一个请求的功能********************************
functionmakeRequestTwo(targetRequestURL){
/**
*
(1)创建出XMLHttpRequest对象实例
*/
xmlHttpRequest=createXMLHttpRequest();
/**
*(3)将获得服务器返回结果的响应输出函数“绑定”到XMLHttpRequest对象实例中
*/
xmlHttpRequest.onreadystatechange=getResultTwoFromServer;
/**
*(4)向服务器端程序发送异步请求
*/
xmlHttpRequest.open("get",targetRequestURL,true);
xmlHttpRequest.send(null);
}
functiongetResultTwoFromServer(){
/**
*(5)识别浏览器是否正在接收服务器端程序的返回值吗?
并识别是否接收完毕(OK---200)?
*/
if(xmlHttpRequest.readyState==4){
if(xmlHttpRequest.status==200){
/**
*(6)获得服务器返回的结果值
*/
showResultTwoInSomeOneTag(xmlHttpRequest.responseText);
}
elseif(xmlHttpRequest.status==400){
window.alert("你的请求无效!
");
}
elseif(xmlHttpRequest.status==404){
window.alert("你向服务端程序请求的URL不正确,未找到请求的目标文件!
");
}
elseif(xmlHttpRequest.status==500){
window.alert("服务器由于遇到错误而不能完成该请求!
");
}
elseif(xmlHttpRequest.status==505){
window.alert("HTTP版本不受支持!
");
}
else{
window.alert("出现了其它不知名的错误!
");
}
}
}
/**
*局部更新某个标签内的内容为服务器端程序的返回结果
*/
functionshowResultTwoInSomeOneTag(someOneResultFromServer){
varsomeOneDivTagObject=document.getElementById("showResultTwo");
someOneDivTagObject.style.display="inline";
someOneDivTagObject.innerHTML=someOneResultFromServer;
}
2、对本例中的JavaScript代码说明
(1)异步请求的产生过程
用户点击浏览器上的“请求”链接;接着函数makeRequest()将被调用,其参数文件dealRequestOne.jsp应该与本页面在同一目录下;这样就发起了一个请求,onreadystatechange的执行结果会被传送给getResultFromServer()。
getResultFromServer()将检查服务器的响应是否成功地收到,如果是-----就会将dealRequestOne.jsp文件的输出内容在页面中的某个标签中显示输出。
(2)注意在Eclipse中的*.js文件的编码格式的问题
(3)改变其文件保存的编码格式
(4)选择编码格式为中文编码格式
(5)并按下“确定”按钮
3、再添加对前面的AJAX请求进行处理的服务器程序
(1)本例为了简化,直接采用JSP页面
文件为dealRequestOne.jsp(按照MVC的规则应该提供Servlet程序)。
(2)该页面的内容为
<%@pagecontentType="text/html;charset=GBK"%>
test