跟我学AJAX技术实现无刷新形式的数据查询的Web应用示例第三部分.docx

跟我学AJAX技术实现无刷新形式的数据查询的Web应用示例第三部分.docx

《跟我学AJAX技术实现无刷新形式的数据查询的Web应用示例第三部分.docx》由会员分享，可在线阅读，更多相关《跟我学AJAX技术实现无刷新形式的数据查询的Web应用示例第三部分.docx（13页珍藏版）》请在冰豆网上搜索。

跟我学AJAX技术实现无刷新形式的数据查询的Web应用示例第三部分

1.1跟我学AJAX技术——实现无刷新形式的数据查询的Web应用示例（第三部分）

1.1.1解决中文乱码的另一种实现方式

修改webajax.js中的sendData方法请求方式为Post方式，并将请求参数放在send（）方法中，模拟Web表单的post请求提交

1、webajax.js中的代码如下

varhttpRequest;

functionsendData（）{

varcityNameInputValue=document.getElementById（"cityNameInputID"）.value;

if（（cityNameInputValue==null）||（cityNameInputValue==""））{

alert（"您没有输入城市的名称！

"）;

return;

}

varrequestURL="/FirstAJAX/ajaxservlet";

httpRequest=getHTTPRequestObject（）;

httpRequest.onreadystatechange=processHttpResponse;

httpRequest.open（"POST",requestURL,true）;

httpRequest.setRequestHeader（"Content-Type","application/x-www-form-urlencoded"）;

varqueryParameter="cityName="+cityNameInputValue;

queryParameter=encodeURI（queryParameter）;

queryParameter=encodeURI（queryParameter）;//两次，很关键

httpRequest.send（queryParameter）;

}

要应用escape（或encodeURI两个JavaScript中的其中一个函数，功能基本相同），但要使用两次。

补充资料：

HTTP协议的编码规定

在HTTP协议中，浏览器不能向服务器直接传递某些特殊字符，必须是这些字符进行URL编码后再进行传送。

URL编码遵循的规则：

将空格转换为（+）、对0-9，a-z，A-Z之间的字符保持不变。

而对于所有其他的字符，用这个字符的当前字符集编码在内存中的十六进制格式表示，并在每个十六进制字节前加上一个百分号%。

例如，字符“+”用%2B表示，字符“=”用%3D表示，字符“&”用%26表示，字符“国”用%B9%FA表示注意，同一个中文字符在不同的字符集编码方式下，在内存中的编码值也是不同的，一个字符的URL编码是针对字符在内存中的码值而言的，采用不同编码的同一个字符的URL编码结果是不同的。

2、AJAXServlet类中的doPost方法的代码

publicvoiddoPost（HttpServletRequestrequest,HttpServletResponseresponse）

throwsServletException,IOException{

StringcityName=request.getParameter（"cityName"）;

cityName=.URLDecoder.decode（cityName,"UTF-8"）;

CreateXMLInterfacecreateXML=newCreateXMLBean（）;

StringxmlFileContent=createXML.createXMLText（cityName）;

System.out.println（"cityName="+cityName）;

response.setContentType（"text/xml;charset=gb2312"）;

response.setHeader（"Cache-Control","no-cache"）;

PrintWriterout=response.getWriter（）;

out.write（xmlFileContent）;//out.print（sb.toString（））;

out.close（）;

}

当调用request.getParameter（）函数时，会自动进行一次URI的解码过程，调用时内置的解码过程会导致乱码出现。

而URI编码两次后，request.getParameter（）函数得到的是原信息URI编码一次的内容。

再用可控的解码函数.URLDecoder.decode（）就可解出原始的正确的信息。

因此，如果将提交的数据使用javaScript的encodeURI（）进行两次URL编码（不管是POST的数据还是GET的数据），服务端再进行一次URL解码。

这种方式的优点是与客户端网页的编码集无关，与服务器的默认编码集无关，而且能够兼容几乎所有的浏览器。

3、执行后没有出现中文乱码

此时对中文乱码要采用下面的编码形式转换：

cityName=newString（cityName.getBytes（"ISO-8859-1"）,"UTF-8"）;

或者采用如下方式：

request.setCharacterEncoding（"UTF-8"）;

1.1.2对前面的XML响应加以改进以表格的形式显示输出

1、在页面中增加一个parseXMLResponseInTable的JavaScript方法

functionparseXMLResponseInTable（）

{

vardataArray=httpRequest.responseXML.getElementsByTagName（"data"）;//

vardataArrayLen=dataArray.length;

varinsertData="

250px;border:

solid1px#000'>"+

"XML的处理结果";

for（vari=0;i

{

if（dataArray[i].tagName）

{

insertData=insertData+"";

insertData=insertData+""+dataArray[i].tagName+"";

insertData=insertData+""+dataArray[i].firstChild.data+"";

insertData=insertData+"";

}

}

insertData=insertData+"";

//使用HTML标签来更新一个标签元素

mdiv=document.getElementById（"showResultMessage"）;

mdiv.innerHTML=insertData;

}

对上面的代码进行说明：

（1）"dataArray"作为所有节点的数组（不是节点数据，只是节点）。

"dataArrayLen"是这个数组的长度，用于我们的循环。

"insertData"则是一个表格的开头的HTML。

（2）我们的第二步则是遍历所有的元素（通过变量"dataArray"）并将数据添加到变量insertData中。

这里我们会创建一个表格行，插入一个表格数据节点（td）进去，再将每一个元素的文本包含进这个表格数据节点，并将这些都添加进变量"insertData"。

因此，每循环一次，变量insertData将添加一行包含元素名称和内容的新数据。

（3）新数据行添加完后，我们插入一个""结束标签到变量"insertData"。

这完成了这个表格。

（4）最后一步需要我们将这个表格放到页面上------这很简单，我们通过函数document.getElementById（）取得DIV"userIdMessage"并将变量"insertData"中的HTML插进去。

2、修改processHttpResponse方法以对上面的方法进行调用

functionprocessHttpResponse（）

{

if（httpRequest.readyState==4）

{

if（httpRequest.status==200）

{//检查是否成功接收了服务器响应

//parseXMLResponseInText（）;

parseXMLResponseInTable（）;

}

elseif（httpRequest.status==404）

{

alert（"没有找到与所请求的文件相匹配的资源！

"）;

}

else

{

alert（"你所请求的页面发生异常，错误代码为：

"+httpRequest.status）;

}

}

else

{

document.getElementById（"userIdMessage"）.innerHTML="检测中，请稍等...";

}

}

3、再执行本页面将出现下面的表格显示的结果

因为我们在服务器端的Servlet程序中的输出实际为下面的形式，其中的“XXX”为我们所获得的用户提交的值。

XXX

XXX

1.1.3将服务器端返回的XML文档中的标签改变为更一般的形式

1、如果我们要求在服务器端实际返回的XML响应的结果为下面的格式------两个不同的子标签

XXX

XXX

其中的“XXX”为我们所获得的用户提交的值。

2、则应该怎么实现呢？

（1）修改服务器端CreateXMLBean类中的createXMLText方法为下面的代码

publicStringcreateXMLText（StringinputCityName）

{

StringBuffersb=newStringBuffer（"

xmlversion=\"1.0\"encoding=\"GB2312\"standalone=\"yes\"?

>"）;

sb.append（""+inputCityName+""）;

sb.append（""+inputCityName+""）;

sb.append（""）;

returnsb.toString（）;

}

（2）修改webajax.js中的parseXMLResponseInTable方法为下面的parseXMLResponseInTableTwo方法

functionparseXMLResponseInTableTwo（）

{

vardataArray=

httpRequest.responseXML.getElementsByTagName（"message"）[0].childNodes;

vardataArrayLen=dataArray.length;

varinsertData="

250px;border:

solid1px#000'>"+

"XML的处理结果";

for（vari=0;i

{

if（dataArray[i].tagName）

{

insertData=insertData+"";

insertData=insertData+""+dataArray[i].tagName+"";

insertData=insertData+""+dataArray[i].firstChild.data+"";

insertData=insertData+"";

}

}

insertData=insertData+"";

mdiv=document.getElementById（"showResultMessage"）;//使用HTML标签来更新一个标签元素

mdiv.innerHTML=insertData;

}

（3）修改processHttpResponse方法为下面的

functionprocessHttpResponse（）

{

if（httpRequest.readyState==4）

{

if（httpRequest.status==200）

{//检查是否成功接收了服务器响应

//parseXMLResponseInText（）;

//parseXMLResponseInTable（）;

parseXMLResponseInTableTwo（）;

}

elseif（httpRequest.status==404）

{

alert（"没有找到与所请求的文件相匹配的资源！

"）;

}

else

{

alert（"你所请求的页面发生异常，错误代码为：

"+httpRequest.status）;

}

}

else

{

document.getElementById（"showResultMessage"）.innerHTML="检测中，请稍等...";

}

}

（4）再执行本页面

3、如果我们要求在服务器端实际返回的XML响应的结果为下面的格式

XXX

XXX

其中的“XXX”为我们所获得的用户提交的值。

则应该怎么实现呢？

（1）修改服务器端CreateXMLBean类中的createXMLText方法为下面的代码

publicStringcreateXMLText（StringinputCityName）

{

StringBuffersb=newStringBuffer（"

xmlversion=\"1.0\"encoding=\"GB2312\"standalone=\"yes\"?

>"）;

sb.append（""+inputCityName+""）;

sb.append（""+inputCityName+""）;

sb.append（""）;

returnsb.toString（）;

}

（2）修改webajax.js中的parseXMLResponseInTableTwo方法为下面的parseXMLResponseInTableThree方法

functionparseXMLResponseInTableThree（）

{

vardataArray=

httpRequest.responseXML.getElementsByTagName（"message"）[0].childNodes;

vardataArrayLen=dataArray.length;

varinsertData="

280px;border:

solid1px#000'>"+

"XML的处理结果";

for（vari=0;i

{

if（dataArray[i].tagName）

{

insertData=insertData+"";

insertData=insertData+""+dataArray[i].tagName+"";

insertData=insertData+""+dataArray[i].firstChild.data+"";

insertData=insertData+""+、

dataArray[i].getAttribute（"attributeName"）+"";

insertData=insertData+"";

}

}

insertData=insertData+"";

//使用HTML标签来更新一个标签元素

mdiv=document.getElementById（"showResultMessage"）;

mdiv.innerHTML=insertData;

}

（3）修改processHttpResponse方法为下面的

functionprocessHttpResponse（）

{

if（httpRequest.readyState==4）

{

if（httpRequest.status==200）

{//检查是否成功接收了服务器响应

//parseXMLResponseInText（）;

//parseXMLResponseInTable（）;

//parseXMLResponseInTableTwo（）;

parseXMLResponseInTableThree（）;

}

elseif（httpRequest.status==404）

{

alert（"没有找到与所请求的文件相匹配的资源！

"）;

}

else

{

alert（"你所请求的页面发生异常，错误代码为：

"+httpRequest.status）;

}

}

else

{

document.getElementById（"showResultMessage"）.innerHTML="检测中，请稍等...";

}

}

（4）再执行本页面

4、利用CSS对我们前面的表格美化一下

（1）代码示例

table,tr,th,td

{

border:

solid1px#000;

border-collapse:

collapse;

padding:

5px;

}

（2）代码示例所在页面的局部截图

（3）然后再执行本页面