【Ajax技术】JQuery处理XML数据
来源:互联网 发布:时时彩软件破解版 编辑:程序博客网 时间:2024/05/20 05:26
我们将之前写的应用使用jquery返回xml数据
程序清单
服务端Servelt:AjaxXMLServer.java
静态页面:ajaxJqueryXml.html
javascript脚本文件:verifyjqueryxml.js
AjaxXMLServer.java:
ajaxJqueryXml.html:
verifyjqueryxml.js:
测试:输入123点击校验,服务器端返回的信息在界面上显示,试验成功!
可以看到,使用jquery所封装的方法写的js文件,比传统的调用XMLHttpRequest对象去操作要
程序清单
服务端Servelt:AjaxXMLServer.java
静态页面:ajaxJqueryXml.html
javascript脚本文件:verifyjqueryxml.js
AjaxXMLServer.java:
import java.io.IOException;import java.io.PrintWriter;import java.net.URLDecoder;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;//这个servlet返回的是XML的数据public class AjaxXMLServer extends HttpServlet { protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { doGet(httpServletRequest, httpServletResponse); } protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { try{ //修改点1------相应的ContentType必须为text/xml httpServletResponse.setContentType("text/xml;charset=utf-8"); PrintWriter out = httpServletResponse.getWriter(); //inte用来记录验证次数 Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total"); int temp = 0; if (inte == null) { temp = 1; } else { temp = inte.intValue() + 1; } httpServletRequest.getSession().setAttribute("total",temp); //1.取参数 String old = httpServletRequest.getParameter("name"); //String name = new String(old.getBytes("iso8859-1"),"UTF-8"); String name = URLDecoder.decode(old,"UTF-8"); //修改点2-----返回的数据需要拼装成xml格式 StringBuilder builder=new StringBuilder(); builder.append("<message>"); //2.检查参数是否有问题 if(old == null || old.length() == 0){ builder.append("用户名不能为空").append("</message>"); } else{ if(name.equals("hpu")){ //4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段,而不是将一个新的页面发送给用户 //写法没有变化,本质发生了改变 builder.append("用户名[" + name + "]已经存在,请使用其他用户名, " + temp).append("</message>"); } else{ builder.append("用户名[" + name + "]尚未存在,可以使用该用户名注册, " + temp).append("</message>"); } out.println(builder.toString()); System.out.println(builder.toString()); } } catch(Exception e){ e.printStackTrace(); } }}
ajaxJqueryXml.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>用户校验ajax实例</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.8.0.js"></script> <script type="text/javascript" src="js/verifyjqueryxml.js"></script> </head> <body> <h1> 用户校验ajax实例</h1><br> 请输入用户名:<br/> <!-- ajax不需要使用表单进行数据提交,因此不用写表单标签 --> <!-- ajax不需要name属性,只需要一个id的属性 --> <input type="text" id="username"/> <input type="button" value="校验" onclick="verify()"/> <!-- 这个div用于存放服务器返回的信息,开始为空 --> <!-- id属性定义是为了利用dom的方式找到某一个节点,进行操作 --> <div id="result"> </div> <!-- div和span的值的差异,div的内容独占行,span的内容和其他内容相处良好 --> </body></html>
verifyjqueryxml.js:
//定义用户名校验的方法function verify(){//1.获取文本框当中的内容//document.getElementById("username"); dom的方式//jquery的查找节点的方式,参数中#加上id属性值可以找到一个节点//jquery的方法返回的都是jquery的对象,可以继续在上面执行其他的jquery方法var jqueryObj=$("#username");var userName=jqueryObj.val();//alert("文本框的值是:"+userName);//2.将文本中的数据发送给服务器的servlet//javascript当中,一个简单的对象定义方法//var obj={name:"123".age:20};//使用JQuery的XMLHttpRequest对象请求的封装$.ajax({type:"POST",//Http请求方式url:"AjaxXMLServer", //服务器端url地址data:"name="+username, //发送给服务器端的数据dataType:"xml",//告诉JQuery返回的数据方式success:callback //定义交互完成,并且服务器正确返回数据时调用的回调函数});}//回调函数function callback(data){//3.接受服务器端返回的数据//需要将data这个dom对象中的数据解析出来//首先需要将dom的对象转换成jquery的对象var jqueryObj=$(data);//获取message节点var message=jqueryObj.children();//获取节点中的内容//如果节点中有多条信息,执行text方法会把所有信息拼接在一块var text=message.text();//4.将服务器返回的数据动态的显示在页面上//找到保存信息的节点var resultObj=$("#result");//往这个节点填充服务器返回的值//div节点中的内容就会被改变resultObj.html(text);}
测试:输入123点击校验,服务器端返回的信息在界面上显示,试验成功!
可以看到,使用jquery所封装的方法写的js文件,比传统的调用XMLHttpRequest对象去操作要
简洁了许多,这就是站在巨人肩膀上看得更远。
转载请注明出处:http://blog.csdn.net/acmman/article/details/47720219
0 0
- 【Ajax技术】JQuery处理XML数据
- ajax 中用jquery处理xml数据
- 使用jquery处理ajax返回的XML、无刷新技术
- ajax 处理 xml 数据
- (AJAX学习二) XHR及JQuery处理XML数据
- 【Ajax技术】利用XHR接受与处理XML数据
- jquery处理xml数据
- Jquery Ajax 读取XML 数据
- jquery $.ajax()取xml数据
- Ajax处理XML数据演示
- JQuery, ajax处理json数据
- Jquery Ajax 处理Json数据
- Jquery Ajax 处理Json数据
- Jquery Ajax 处理Json数据
- jquery处理xml的ajax方法
- 使用jquery异步获取数据(ajax技术)
- ajax接受与处理XML数据
- ajax接受与处理XML数据
- mysql数据库主从同步过程详述
- 大学就知道认真写博客-但现实总是偏离轨迹
- nyoj 14 会场安排问题
- Hard Code 4813
- php笔记
- 【Ajax技术】JQuery处理XML数据
- deeplearning库Caffe在windows下的配置
- TTL与RS-485电平转换芯片MAX485/MAX3485
- 【零基础】CentOS 7 64位系统下编译Hadoop2.7.0
- 利用ajax获取商品价格
- 线程小感
- 设置字符串中某些字符的特殊效果
- nginx_lua案例分析:动态路由实现
- hdu 5391 Zball in Tina Town(威尔逊定理)