ajax交互的两种方式:html与xml
对比jquery对这两种交互的实现:
基于html交互:
function verify(){//解决中文乱码问题的方法 1,页面端发出的数据做一次encodeURI,服务器端使用 new String(old.getBytes("iso8859-1"),"utf-8")//var url= "AJAXServer?name="+encodeURI($("#userName").val() ) ; // encodeURI处理中文乱码问题// 解决中文乱码问题的方法 2.页面端发出的数据做两次encodeURI处理, 服务器端用URLDecoder.decode(old,"utf-8");var url= "AjaxServer?name="+encodeURI(encodeURI($("#userName").val() )); // encodeURI处理中文乱码问题url=convertURL(url);//获取函数的返回值'login?uname='+ uname + '&psw=' + psw$.get(url,null,function(data){$("#result").html(data); //简洁版 }); System.out.println(url); } //给URL增加时间戳,骗过浏览器,不读取缓存 function convertURL(url){//获取时间戳var timstamp=(new Date()).valueOf();//将时间戳信息拼接到URL上if(url.indexOf("?")>=0){//用indexof判断该URL地址是否有问号url=url+"&t="+timstamp;}else{url=url+"?t="+timstamp; }return url;}
后台页面:
package com.xidian.ajax; 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; import java.net.URLDecoder; public class AjaxServer extends HttpServlet {protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse)throws ServletException, IOException {try{httpServletResponse.setContentType("text/html;charset=utf-8"); PrintWriter out= httpServletResponse.getWriter();Integer inte = (Integer)httpServletRequest.getSession().getAttribute("total"); //用来测试缓存的;在IE下如果多次请求的地址相同,则他不会再去服务器端交互读数据,而是直接读取缓存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"); //处理中文乱码1,需和前台js文件中的encodeURI配合String name= URLDecoder.decode(old,"utf-8"); //处理中文乱码2//2.检查参数是否有问题if(old==null||old.length()==0){out.println("用户名不能为空!");} else{//String name=old;//3.校验操作if(name.equals("123")){//4.与传统应用不同的是,这一步将用户感兴趣的数据返回给页面端。而不是将一个新的页面返回给页面端//写法没有改变,本质变化了out.println("用户名【"+name+"】已经存在,请使用其他的用户名!,"+temp);} else{out.println("用户名【"+name+"】未存在,您可以使用该用户名!,"+temp);}}}catch(Exception e){e.printStackTrace();}}protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse)throws ServletException, IOException {doGet(httpServletRequest,httpServletResponse);}}
以上实现的基于html是比较常用的,而比较的简单;
下面我们实现基于XML交互来实现:js:
//定义用户名校正的方法 function verify(){//首先测试下页面的按钮按下,可以调用这个方法//使用javascript里的alert方法,显示个弹出提示框// alert("按钮被按下"); 测试是否已进到了js内//1获取到文本框中的内容// document.getElementById("username") dom的获取方法//jquery查找节点的方式,参数中的#加id参数值可以找到一个节点//jquery的方法返回的都是jquery的对象,可以在上面继续执行其他的jquery方法 var jqueryObj= $("#userName")//获取节点的值var userName=jqueryObj.val();// alert(userName);测试是否得到username//2.将文本框的数据发送给服务器端的servlet//javascript当中,一个简单对象的定义方法// var obj={name:"123",age:30}//使用jquery的XMLHttprequest对象get请求的封装 $.ajax({type:"post", //http请求方式url:"AjaxXmlServer", // 服务器端url地址data:"name="+userName, // 发送给服务器的数据dataType:"xml",//告诉服务器返回的数据类型success:callback //定义交互完成,并且服务器正确返回数据时调用的回调函数 })} //回调函数,data为服务器端返回的数据 function callback(data){//alert("服务器端的数据回来了");测试与服务器端的交互//3.接受服务器端返回的数据// alert(data); 测试data//需要将data这个dom对象中的数据解析出来//首先需要将dom对象转化为jquery对象var jqueryObj=$(data);//获取message节点var messsage= jqueryObj.children();//获取文本内容var text=message.text();//这里获得的是所有子节点的返回值,因为message返回的是一个数组//4.将服务器端返回的数据动态的显示在页面上// 找到保存数据的节点var resultObj=$("#result");//动态的改变页面中div的内容 resultObj.html(data);}
后台的代码:
package com.xidian.ajax; 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;public class AjaxXmlServer extends HttpServlet {protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse)throws ServletException, IOException {try{//修改点1----响应的 Content-Type必须是text/xml,这很重要httpServletResponse.setContentType("text/xml;charset=utf-8");PrintWriter out= httpServletResponse.getWriter();//1.取参数String old =httpServletRequest.getParameter("name");//2.检查参数是否有问题//修改点2----返回的数据需要封装成xml格式StringBuilder builder=new StringBuilder();builder.append("<message>"); //XML的返回内容要包含在<message></message>if(old==null||old.length()==0){//要验证接受的文本框内容是否为空builder.append("用户名不能为空!").append("</message>");} else{String name=old;//3.校验操作if(name.equals("123")){//4.与传统应用不同的是,这一步将用户感兴趣的数据返回给页面端。而不是将一个新的页面返回给页面端//写法没有改变,本质变化了builder.append("用户名【"+name+"】已经存在,请使用其他的用户名!").append("</message>");// out.println("用户名【"+name+"】已经存在,请使用其他的用户名!");} else{// out.println("用户名【"+name+"】未存在,您可以使用该用户名!");builder.append("用户名【"+name+"】未存在,您可以使用该用户名!").append("</message>"); }out.println(builder.toString());//这是必须的System.out.println("输出内容为:"+builder.toString());//输入sout后按Tab键会自动生成 }}catch(Exception e){e.printStackTrace();}}protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse)throws ServletException, IOException {doGet(httpServletRequest,httpServletResponse);}}
我已经将两种方式的不一样的点全部标注出来了,大家可以对比下,使用自己比较能接受的那种方式;
转载于:https://www.cnblogs.com/shenliang123/archive/2012/04/19/2456800.html
ajax交互的两种方式:html与xml相关推荐
- react 调用 html5,React-Native Webview 和H5交互的两种方式
React-Native WebView 和H5交互有两种方式: 方式1:RN Webview 向H5注入JS 此方式可作为Webview向H5端传递数据. RN Webview 有以下属性,可以注入 ...
- 前后端交互的两种方式
方式一:表单提交 表单(form):表单用于收集用户输入信息,并将数据提交给服务器.是一种常见的与服务端数据交互的一种方式 //1. action:指定表单的提交地址 //2. method:指定表单 ...
- iOS WKWebView和JS交互的两种方式
2019独角兽企业重金招聘Python工程师标准>>> 本文介绍两种方式实现iOS WKWebView和JS交互 WKWebViewConfiguration注入WKScriptMe ...
- JavaScript实现同步Ajax请求的两种方式
JavaScript的Ajax请求默认是异步的,有以下两种方式能让Ajax请求变成同步 方式一 使用ES7的Async和Await async function main(){const env = ...
- ajax上传图片的两种方式
原文地址:https://www.cnblogs.com/ailingfei/p/6744759.html 第一种formData var formData = new FormData($( &qu ...
- 【javaWeb】前后端传递数据交互的两种方式
一.使用struct2的方法set及get 1.在jsp中直接定义定义form表单 <form id="formid" name= "myform" me ...
- hive建立内部表映射hbase_Hive 建外链表到 Hbase(分内部表、外部表两种方式)
一. Hive 建内部表,链到hbase :特点:Hive drop表后,Hbase 表同步删除 drop table if exists hbase_kimbo_test1; CREATE TABL ...
- 事务管理--(Spring两种方式)
一.什么是事务? 事务是由步数据库操作序列组成的逻辑执行单元,这系列操作要么全部执行,要么全部放弃执行 二.事务的特性(ACID) 1. 原子性 事务是一个不可分割的最小工作单位,事务中的操作要么都发 ...
- java中程序跳转_java程序中先后台交互的两种实现方式以及页面之间的跳转
虽然如今市面上很流行先后端分离,可是在不少企业中仍是使用的是SSH框架,先后端不分离. 那么此类先后端有其自身独特的先后台交互的方式,可是也支持js/jquery.下面对这两种方式作一下概括.java ...
- ajax的data传参的两种方式
ajax的data传参的两种方式 本文为转载. 1.[javascript] view plaincopy /** * 订单取消 * @return {Boolean} 处理是否成功 */ fun ...
最新文章
- 亏损数亿,阿里也要强推99元白菜价智能音箱!背后逻辑到底是啥?
- 【小练习04】HTML+CSS--医药健康小页面
- Swing中的并发-使用SwingWorker线程模式
- virtualbox+vagrant学习-2(command cli)-7-vagrant login命令
- vscode中怎样格式化js代码_VSCode代码格式化设置
- iOS AVPlayer播放模式的实现(随机播放 列表循环 单曲循环)
- IPP2P模块修改版,最新0.99.13
- Python拟合SHARP红外测距传感器相关数据
- vue+vant开发app打包apk
- Windows XP下安装SQL2000企业版
- 开发:KTV评分系统实现总结
- 一文读懂Soul上市:注册用户破亿,上市是福还是祸?
- mathtype2023专门打数学符号的软件
- linuxMint在虚拟机下装VMware Tolls
- 简述下列​概念:数据、数据元素、数据项、数据对象、数据结构、逻辑结构
- VM 虚拟机网络配置
- 显示pycharm地图
- 10分钟读懂技术分析经典—《日本蜡烛图技术》
- 研华服务器显示不了全屏啊,研华串口服务器设置
- 阿里巴巴P8架构师手码SpringCloud笔记,看完不走弯路
热门文章
- AppBox v6.0中实现子页面和父页面的复杂交互
- bind + DNSCrypt 实现安全加密转发,避免DNS污染
- 一个示例让你明白界面与数据分离
- CentOS 6.4 php环境配置以及安装wordpress
- DataTable序列化为JSON字符串
- asp.net电子商务开发实战 视频 第三讲(门类列表)
- macbook proc 如何设置touch bar 为F键
- BZOJ1090[SCOI2003] 字符串折叠
- BZOJ3637 Query on a tree VI
- sql 语句 查询结果赋值变量_RationalDMIS 7.1 变量赋值 ASSIGN语句