05使用XMLHttpRequest对象发送和接收XML数据及乱码问题的解决文档格式.docx
- 文档编号:21812330
- 上传时间:2023-02-01
- 格式:DOCX
- 页数:7
- 大小:198.95KB
05使用XMLHttpRequest对象发送和接收XML数据及乱码问题的解决文档格式.docx
《05使用XMLHttpRequest对象发送和接收XML数据及乱码问题的解决文档格式.docx》由会员分享,可在线阅读,更多相关《05使用XMLHttpRequest对象发送和接收XML数据及乱码问题的解决文档格式.docx(7页珍藏版)》请在冰豆网上搜索。
/script>
/head>
body>
--基于标准的一些好习惯,首先标签名要小写,其次标签必须关闭,第三属性名必须是小写的,第四属性值必须位于双引号中-->
用户名校验的ajax实例,请输入用户名:
br/>
--ajax方式下不需要使用表单来进行数据提交,因此不用写表单标签-->
--ajax方式不需要name属性,需要一个id的属性-->
inputtype="
text"
id="
userName"
/>
button"
value="
校验"
onclick="
verify()"
--这个div用于存放服务器端返回的信息,开始为空-->
--id属性定义是为了利用dom的方式找到某一个节点,进行操作-->
divid="
result"
/div>
--div和span的直观差异,div中的内容独占行,span中的内容和前后其他内容相处良好-->
--
div>
123<
456<
span>
/span>
显示效果如下:
123
456
123456
-->
/body>
/html>
AjaxXMLServer.java:
importjava.io.IOException;
importjava.io.PrintWriter;
import.URLDecoder;
importjavax.servlet.ServletException;
importjavax.servlet.annotation.WebServlet;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
/**
*ServletimplementationclassAjaxXMLServer
*/
@WebServlet("
/AjaxXMLServer"
)
publicclassAjaxXMLServerextendsHttpServlet{
privatestaticfinallongserialVersionUID=1L;
/**
*@seeHttpServlet#HttpServlet()
*/
publicAjaxXMLServer(){
super();
//TODOAuto-generatedconstructorstub
}
*@seeHttpServlet#doGet(HttpServletRequestrequest,HttpServletResponseresponse)
protectedvoiddoGet(HttpServletRequestrequest,
HttpServletResponseresponse)throwsServletException,IOException{
try{
//修改点1-----text/html修改为text/xml,响应的Content-Type必须是text/xml
response.setContentType("
);
//response.setCharacterEncoding("
PrintWriterout=response.getWriter();
Integerinte=(Integer)request.getSession().getAttribute("
total"
inttemp=0;
if(inte==null)
temp=1;
else
temp=inte.intValue()+1;
request.getSession().setAttribute("
temp);
//1.取参数信息
Stringold=request.getParameter("
name"
//2.检查参数是否有问题
//修改点2-----返回的数据需要拼装成xml格式
StringBuilderbuilder=newStringBuilder();
builder.append("
message>
"
if(old==null||old.length()==0){
//out.println("
用户名不能为空"
).append("
/message>
}else{
Stringname=URLDecoder.decode(old,"
//3.校验操作
if(name.equals("
wangxingkui"
)){
//4.和传统应用不同之处。
这一步需要将用户感兴趣的数据返回给页面段,而不是将一个新的页面发送给用户
//写法没有变化,本质发生了改变
用户名["
+name+"
]已经存在,请使用其他用户名"
]尚未存在,可以使用该用户名"
out.println(builder.toString());
}catch(Exceptione){
e.printStackTrace();
}
*@seeHttpServlet#doPost(HttpServletRequestrequest,HttpServletResponseresponse)
protectedvoiddoPost(HttpServletRequestrequest,
doGet(request,response);
verifyxml.js:
//用户名校验的方法
//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
varxmlhttp;
functionverify(){
//0.使用dom的方式获取文本框中的值
//document.getElementById("
)是dom中获取元素节点的一种方法,一个元素节点对应HTML页面中的一个标签,例如<
input>
//.value可以获取一个元素节点的value属性值
varuserName=document.getElementById("
).value;
//1.创建XMLHttpRequest对象
//这是XMLHttpRequest对象五步使用中最复杂的一步
//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同代码
if(window.XMLHttpRequest){
//针对FireFox,Mozillar,Opera,Safari,IE7,IE8
xmlhttp=newXMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("
text/xml"
}elseif(window.ActiveXObject){
//针对IE6,IE5.5,IE5
//两个可以用于创建XMLHttpRequest对象的控件名称,保存在一个js的数组中
//拍在前面的版本较新
varactivexName=["
MSXML2.XMLHTTP"
"
Microsoft.XMLHTTP"
];
for(vari=0;
i<
activexName.length;
i++){
//取出一个控件名进行创建,如果创建成功就终止循环
//如果创建失败,会抛出异常,然后可以继续循环,继续尝试创建
xmlhttp=newActiveXObject(activexName[i]);
break;
}catch(e){
//确认XMLHttpRequest对象创建成功
if(!
xmlhttp){
alert("
XMLHttpRequest对象创建失败!
!
return;
}else{
alert(xmlhttp);
//2.注册回调函数
//注册回调函数时,只需要函数名,不要加括号
xmlhttp.onreadystatechange=callback;
//3.设置连接信息
//第一个参数表示http的请求方式,支持所有http的请求方式,主要使用get和post
//第二个参数表示请求的url地址,get方式请求的参数也在url中
//第三个参数表示采用异步还是同步方式交互,true表示异步
//xmlhttp.open("
GET"
AjaxServer?
name="
+userName,true);
//POST方式请求的代码
xmlhttp.open("
POST"
AjaxXMLServer"
true);
//POST方式需要自己设置http的请求头
xmlhttp.setRequestHeader("
application/x-www-form-urlencoded"
//POST方式发送数据
xmlhttp.send("
+userName);
//4.发送数据,开始和服务器端进行交互
//同步方式下,send这句话会在服务器端数据回来后才执行完
//异步方式下,send这句话会立即完成执行
//xmlhttp.send(null);
//回调函数
functioncallback(){
//5.接收相应数据
//判断对象的状态是交互完成
//readyState:
请求状态
//0=未初始化。
//1=open方法成功调用以后。
//2=服务器已经应答客户端的请求。
//3=交互中。
Http头信息已经接收,响应数据尚未接收。
//4=完成。
数据接收完成。
if(xmlhttp.readyState==4){
//判断http的交互是否成功
//status:
服务器返回状态码。
//200表示“成功”,404表示“未找到”
if(xmlhttp.status==200){
//使用responseXML的方式来接收XML数据对象的DOM对象
vardomObj=xmlhttp.responseXML;
if(domObj==null){
XML数据格式错误,原始文本内容为:
+xmlhttp.responseText);
//<
123123123<
//dom中利用getElementsByTagName可以根据标签名来获取元素节点,返回的是一个数组
varmessageNodes=domObj.getElementsByTagName("
message"
if(messageNodes.length>
0){
//获取message节点中的文本内容
//message标签中的文本在dom中是message标签所对应的元素节点的子节点,firstChild可以获取到当前节点的第一个子节点
//通过以下方式就可以获取到文本内容所对应的节点
vartextNode=messageNodes[0].firstChild;
//对于文本节点来说,可以通过nodeValue的方式返回文本节点的文本内容
varresponseText=textNode.nodeValue;
//将数据显示在页面上
//通过dom的方式找到div标签所对应的元素节点
vardivNode=document.getElementById("
//设置元素节点中的html内容
divNode.innerHTML=responseText;
由于字符编码原来使用的都是gb2312,转换成utf-8后,由于verifyxml.js的编码还是gb2312的,在firebug中调试时显示乱码了。
修改如下:
在eclipse中verifyxml.js文件上右键/Properties,Resource中的“Textfileencoding”修改为“UTF-8”即可。
如下图:
点击“OK”后界面上显示的汉字全部成了乱码:
这时候按下“CTRL+A”全选,然后按下“CTRL+Z”撤销一下就能显示正常了,如下:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 05 使用 XMLHttpRequest 对象 发送 接收 XML 数据 乱码 问题 解决