利用jQuery接受和处理xml数据

以下使用jQuery+Servlet接受和处理xml数据，模拟判断用户名是否存在，效果如下：

服务器端

package com.ljq.test;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;

/**
* 利用jQuery接受和处理xml数据
*
* @author jiqinlin
*
*/
@SuppressWarnings( " serial " )
public class AjaxXmlServer extends HttpServlet{

protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
try {
// 修改一----响应的Content-Type必须是text/xml
response.setContentType( " text/xml;charset=utf-8 " );

PrintWriter out = response.getWriter();
// 1.取参数
String old = request.getParameter( " name " ).trim();
// 修改二-----返回的数据需要拼装成xml格式
StringBuilder builder = new StringBuilder();
builder.append( " <message> " );
// 2.检查参数是否有问题
if (old == null || "" .equals(old)){
builder.append( " 用户名不能为空 " ).append( " </message> " );
} else {
// 3.校验操作
String name = old;

if (name.equals( " linjiqin " )){
builder.append( " 用户名[ " + name + " ]已经存在，请使用其他用户名 " ).append( " </message> " );
} else {
builder.append( " 用户名[ " + name + " ]尚未存在，可以使用该用户名注册 " ).append( " </message> " );
}
out.println(builder.toString());
System.out.println(builder.toString());
}
} catch (Exception e){
e.printStackTrace();
}
}

protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}

          

修改web.xml

< servlet >
< servlet - name > AjaxXmlServer </ servlet - name >
< servlet - class > com.ljq.test.AjaxXmlServer </ servlet - class >
</ servlet >
< servlet - mapping >
< servlet - name > AjaxXmlServer </ servlet - name >
< url - pattern >/ servlet / ajaxXmlServer </ url - pattern >
</ servlet - mapping >

         

请求页面

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN "
" http://www.w3.org/TR/html4/loose.dtd " >
< html >
< head >
< script type = " text/javascript " src = " http://localhost:8083/jqueryprj/js/jquery-1.3.1.js " ></ script >
< script type = " text/javascript " src = " http://localhost:8083/jqueryprj/js/verifyjqueryxml.js " ></ script >
</ head >
< body >
< input type = " text " id = " userName " />
< input type = " button " value = " 校验 " onclick = " verify() " />
< div id = " result " ></ div >
<!-- div和span的直观差异，div中的内容独占行，span中的内容和前后其他内容相处良好 -->
</ body >
</ html >

              

js

function verify(){
var userName = $( " #userName " ).val();
$.ajax({
type: " POST " , // http请求方式
url: " servlet/ajaxXmlServer " , // 服务器端url地址
data: " name= " + userName, // 发送给服务器端的数据
dataType: " xml " , // 告诉JQuery返回的数据格式
success: callback // 定义交互完成，并且服务器正确返回数据时调用的回调函数
});
}

// 回调函数
function callback(data) {
var jqueryObj = $(data);
// 获取message节点
var message = jqueryObj.children();
// 获取文本内容
var text = message.text();
// 4.将服务器段返回的数据动态的显示在页面上
$( " #result " ).html(text);
}