对比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相关推荐

  1. react 调用 html5,React-Native Webview 和H5交互的两种方式

    React-Native WebView 和H5交互有两种方式: 方式1:RN Webview 向H5注入JS 此方式可作为Webview向H5端传递数据. RN Webview 有以下属性,可以注入 ...

  2. 前后端交互的两种方式

    方式一:表单提交 表单(form):表单用于收集用户输入信息,并将数据提交给服务器.是一种常见的与服务端数据交互的一种方式 //1. action:指定表单的提交地址 //2. method:指定表单 ...

  3. iOS WKWebView和JS交互的两种方式

    2019独角兽企业重金招聘Python工程师标准>>> 本文介绍两种方式实现iOS WKWebView和JS交互 WKWebViewConfiguration注入WKScriptMe ...

  4. JavaScript实现同步Ajax请求的两种方式

    JavaScript的Ajax请求默认是异步的,有以下两种方式能让Ajax请求变成同步 方式一 使用ES7的Async和Await async function main(){const env = ...

  5. ajax上传图片的两种方式

    原文地址:https://www.cnblogs.com/ailingfei/p/6744759.html 第一种formData var formData = new FormData($( &qu ...

  6. 【javaWeb】前后端传递数据交互的两种方式

    一.使用struct2的方法set及get 1.在jsp中直接定义定义form表单 <form id="formid" name= "myform" me ...

  7. hive建立内部表映射hbase_Hive 建外链表到 Hbase(分内部表、外部表两种方式)

    一. Hive 建内部表,链到hbase :特点:Hive drop表后,Hbase 表同步删除 drop table if exists hbase_kimbo_test1; CREATE TABL ...

  8. 事务管理--(Spring两种方式)

    一.什么是事务? 事务是由步数据库操作序列组成的逻辑执行单元,这系列操作要么全部执行,要么全部放弃执行 二.事务的特性(ACID) 1. 原子性 事务是一个不可分割的最小工作单位,事务中的操作要么都发 ...

  9. java中程序跳转_java程序中先后台交互的两种实现方式以及页面之间的跳转

    虽然如今市面上很流行先后端分离,可是在不少企业中仍是使用的是SSH框架,先后端不分离. 那么此类先后端有其自身独特的先后台交互的方式,可是也支持js/jquery.下面对这两种方式作一下概括.java ...

  10. ajax的data传参的两种方式

    ajax的data传参的两种方式 本文为转载. 1.[javascript] view plaincopy   /** * 订单取消 * @return {Boolean} 处理是否成功 */ fun ...

最新文章

  1. 亏损数亿,阿里也要强推99元白菜价智能音箱!背后逻辑到底是啥?
  2. 【小练习04】HTML+CSS--医药健康小页面
  3. Swing中的并发-使用SwingWorker线程模式
  4. virtualbox+vagrant学习-2(command cli)-7-vagrant login命令
  5. vscode中怎样格式化js代码_VSCode代码格式化设置
  6. iOS AVPlayer播放模式的实现(随机播放 列表循环 单曲循环)
  7. IPP2P模块修改版,最新0.99.13
  8. Python拟合SHARP红外测距传感器相关数据
  9. vue+vant开发app打包apk
  10. Windows XP下安装SQL2000企业版
  11. 开发:KTV评分系统实现总结
  12. 一文读懂Soul上市:注册用户破亿,上市是福还是祸?
  13. mathtype2023专门打数学符号的软件
  14. linuxMint在虚拟机下装VMware Tolls
  15. 简述下列​概念:数据、数据元素、数据项、数据对象、数据结构、逻辑结构
  16. VM 虚拟机网络配置
  17. 显示pycharm地图
  18. 10分钟读懂技术分析经典—《日本蜡烛图技术》
  19. 研华服务器显示不了全屏啊,研华串口服务器设置
  20. 阿里巴巴P8架构师手码SpringCloud笔记,看完不走弯路

热门文章

  1. AppBox v6.0中实现子页面和父页面的复杂交互
  2. bind + DNSCrypt 实现安全加密转发,避免DNS污染
  3. 一个示例让你明白界面与数据分离
  4. CentOS 6.4 php环境配置以及安装wordpress
  5. DataTable序列化为JSON字符串
  6. asp.net电子商务开发实战 视频 第三讲(门类列表)
  7. macbook proc 如何设置touch bar 为F键
  8. BZOJ1090[SCOI2003] 字符串折叠
  9. BZOJ3637 Query on a tree VI
  10. sql 语句 查询结果赋值变量_RationalDMIS 7.1 变量赋值 ASSIGN语句