利用jQuery接受和处理xml数据的代码,ajax学习笔记
分类:美高梅游戏官网网站

效果如下:

本文实例讲述了java+jquery处理xml数据的方法。分享给大家供大家参考。具体实现方法如下:

摘要:本节补充ajax学习笔记1中
第二种方式:使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象
在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍,本节主要介绍需要修改的代码以及新增的代码
.新增一个servlet类
AJAXXMLServer.java

图片 1

  1. AjaxJqueryXml.js如下:

复制代码 代码如下:

图片 2

复制代码 代码如下:

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;
//XML的数据
public class AJAXXMLServer extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//response.setContentType("text/html;charset=utf-8");
response.setContentType("text/xml;charset=utf-8"); //修改此次为text/xml
PrintWriter out=response.getWriter();
//1.取参数
String old=request.getParameter("name");
StringBuffer sb=new StringBuffer();
sb.append("<message>");
//2.检查是否有问题
if(old==null||old.length()==0){
sb.append("用户名不能为空").append("</message>"); //拼装XML
}else{
//3.校验操作
String name=old;
if(name.equals("pan")){
//4.和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面端,而不是将一个新的页面发送给用户
//写法没有变,本质变了
sb.append("用户名["+name+"]已经存在").append("</message>"); //拼装XML
}else{
sb.append("用户名["+name+"]可以使用").append("</message>"); //拼装XML
}
}
out.println(sb.toString());//注意,此句一定不能少了,并且注意放置的位置
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request,response);
}
}

服务器端

function verify(){ 
    //1.获取文本框中的内容 
    //jquery查找节点的方式,参数加#加上id属性可以找到一个节点 
    //jquery的方法返回的都是jquery的对象,可以继续在上面执行其他的jquery方法 
    var jqueryObj = $("#userName"); 
    //获取节点的值 
    var userName = jqueryObj.val(); 
    //alert(userName); 
    //2.将文本框中的数据发送给服务遄的servlet 
    //使用jquery的XMLHTTPrequest对象get请求的封装 
    //$.get("servlet/AjaxServlet?name="+userName,null,callback); 
    //使用jquery的xmlhttprequest对象get请求的封装 
    //var obj = {name:"123",age:20}; 
    $.ajax({ 
        type: "POST", 
        url: "servlet/AjaxXmlServlet", 
        data: "name=" + userName,//发送给服务端的数据 
        dataType: "xml",//告诉jquety返回的数据格式 
        success: callback//定义交互完成,并且服务端在下返回数据的回调函数
    }); 

// 回调函数 
function callback(data){ 
    //3.接收服务器端返回的数据 
    //alert("服务器端的数据回来了!") 
    //需要将data这个对象中的数据解析出来 
    //首先需要将dom的对象转换成jquery的对象 
    var jqueryObj = $(data); 
    //获取message节点 
    var message = jqueryObj.children(); 
    //获取文本内容 
    var text = message.text(); 
    //4.将服务器返回的数据动态的显示在网页上 
    //找到保存结果信息的节点 
    var resultObj = $("#result"); 
    //动态的改变页面中DIV节点的内容 
    resultObj.html(text); 
    //alert(""); 
}

.修改web.xml
加入AJAXXMLServer类的配置
web.xml

复制代码 代码如下:

  1. AjaxXmlServlet.java如下:

复制代码 代码如下:

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);
}
}

复制代码 代码如下:

<servlet>
<servlet-name>AJAXXMLServer</servlet-name>
<servlet-class>AJAXXMLServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AJAXXMLServer</servlet-name>
<url-pattern>/AJAXXMLServer</url-pattern>
</servlet-mapping>

修改web.xml

package com.panlong.servlet; 
import java.io.IOException; 
import java.io.PrintWriter; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
public class AjaxXmlServlet extends HttpServlet { 
    private static final long serialVersionUID = 1L; 
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
            throws ServletException, IOException { 
            Integer total = (Integer) req.getSession().getAttribute("total"); 
            int temp = 0; 
            if(total == null ){ 
                temp = 1; 
            }else{ 
                temp = total.intValue() + 1; 
            } 
        req.getSession().setAttribute("total",total.intValue()+temp); 
        try { 
            //1.取参数 
            resp.setContentType("text/xml;charset=GB2312"); 
            PrintWriter out = resp.getWriter(); 
            StringBuilder builder = new StringBuilder(); 
            String old = req.getParameter("name"); 
            //2、检查参数是否有问题 
            String name = old; 
            builder.append("<message>"); 
            if("".equals(old) || old == null){ 
                builder.append("用户名必须输入").append("</message>"); 
                 
            } 
            else     
                 { 
            if("lila".equals(name)){ 
                builder.append("该用户名已经注册").append("</message>");
            }else{ 
                    builder.append("该用户名未注册,您可以注册["+name+"]这个用户名").append("</message>"); 
            } 
         } 
            out.println(builder.toString()); 
         
        }catch (Exception e) { 
            e.printStackTrace(); 
        //3.检验操作 
        } 
    } 
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
            throws ServletException, IOException { 
        doGet(req, resp); 
    } 
}

.修改verify.js文件
第一处:

复制代码 代码如下:

  1. 前台html页面

复制代码 代码如下:

<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>

复制代码 代码如下:

把xmlhttp.open("GET","AJAXServer?name="+username,true);

请求页面

<!DOCTYPE html> 
<html> 
  <head> 
    <title>AJAX实例</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
    <meta http-equiv="description" content="this is my page"> 
    <meta http-equiv="content-type" content="text/html; charset=GB2312">
    <script type="text/javascript" src="js/AjaxJqueryXml.js"></script> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
  </head> 
  <body> 
        <font color="blue" size="2">请输入用户名:</font>  
         <input type="text" id="userName" /><font color="red" size="2"><span id="result" >*</span></font><br/><br/> 
         <input type="submit" name="提交" value="提交"  onclick="verify()"/> 
  </body> 
</html>

改为

复制代码 代码如下:

这里请自己添加jquery库文件。

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
";
<html>
<head>
<script type="text/javascript" src=";
<script type="text/javascript" src=";
</head>
<body>
<input type="text" id="userName" />
<input type="button" value="校验" onclick="verify()"/>
<div id="result"></div>
<!--div和span的直观差异,div中的内容独占行,span中的内容和前后其他内容相处良好-->
</body>
</html>

希望本文所述对大家的Ajax程序设计有所帮助。

xmlhttp.open("GET","AJAXXMLServer?name="+username,true);//responseXML方式,修改类名

js

您可能感兴趣的文章:

  • jquery解析xml字符串简单示例
  • jquery解析xml字符串示例分享
  • jquery解析XML字符串和XML文件的方法说明
  • 通过XMLHttpRequest和jQuery实现ajax的几种方式
  • jQuery实现定时读取分析xml文件的方法
  • jquery读取xml文件实现省市县三级联动的方法
  • jQuery读取XML文件内容的方法
  • 浅谈jQuery异步对象(XMLHttpRequest)
  • 使用jquery解析XML的方法
  • JQuery解析HTML、JSON和XML实例详解
  • jQuery xml字符串的解析、读取及查找方法

第二处:

responseText

复制代码 代码如下:

复制代码 代码如下:

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);
}

//获取服务器端返回的数据
//第一种方式:获取服务器端输出的纯文本数据
//var responseText=xmlhttp.responseText;
//将数据显示在页面上 通过dom的方式找到div标签对应的元素节点
//var divNode=document.getElementById("result");
//设置元素节点中的html的内容
//divNode.innerHTML=responseText;

您可能感兴趣的文章:

  • java+jquery处理xml数据的方法
  • jquery处理json数据实例分析
  • jquery序列化form表单使用ajax提交后处理返回的json数据
  • jQuery处理xml格式的返回数据(实例解析)
  • jQuery Ajax异步处理Json数据详解
  • 详谈 Jquery Ajax异步处理Json数据.
  • 在jquery中处理带有命名空间的XML数据
  • jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
  • jQuery getJSON 处理json数据的代码
  • jQuery常用数据处理方法小结

改为:
responseXML

复制代码 代码如下:

//第二种方式:使用responseXML的方式来接受XML数据对象的DOM对象
var domObj = xmlhttp.responseXML;
var messageNodes = domObj.getElementsByTagName("message");
//获取message节点中的文本内容
//message标签中的文本是在dom中是message标签所对应的元素节点的子节点,firstChild可以获取当前节点的第一个子节点
if (messageNodes.length > 0) {
var textNode = messageNodes[0].firstChild;
//对于文本节点来说,可以通过nodeValue的方式返回文本
var responseMessage = textNode.nodeValue;
//把值responseMessage显示在div上
var divNode=document.getElementById("result");
divNode.innerHTML=responseMessage;
} else {
alert("XML数据格式错误,原始文本内容为:" + xmlhttp.responseText);
}

第三处:

text/html

复制代码 代码如下:

if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/html");
}

改为:
text/xml

复制代码 代码如下:

if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");//XML的方式时需要修改这个地方
}

对于IE浏览器如果第三处不修改不会报错,但是对于firefox浏览器,如果此处不修改,以下语句会报错
var domObj = xmlhttp.responseXML;
可以通过增加alert语句来验证,IE浏览器的时候第三处修改的代码的if语句不会被执行,firefox浏览器的时候这个if语句就会被执行

说明:访问路径、运行截图与ajax学习笔记1中都是已经的,就省略了。

第二种方式:使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象 在ajax学习笔记1中已经对准备...

本文由美高梅网址发布于美高梅游戏官网网站,转载请注明出处:利用jQuery接受和处理xml数据的代码,ajax学习笔记

上一篇:没有了 下一篇:if语句的几种优化,js中if语句的几种优化代码写
猜你喜欢
热门排行
精彩图文