以xml数据格式来与服务器进行数据交互:分别用XmlHttpRequest对象和jquery两种方式进行数据交互:
Demo3:
页面端代码:与index.html相同,只需要修改引入的js文件即可:
服务器端代码:AjaxXmlServer
import ...
/**
* Created by IntelliJ IDEA.
* User: 赵光鹏
* Date: 2011-11-16
* Time: 15:35:55
* Alt+enter 导入包修复的功能
* To change this template use File | Settings | File Templates.
*/
public class AjaxXmlServer extends HttpServlet {
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
//解决乱码问题,一定要在获取getWriter对象之前
httpServletResponse.setCharacterEncoding("utf-8");
//修改点1-响应的content-Type必须是text/xml
httpServletResponse.setContentType("text/xml;charset-utf-8");
PrintWriter out = httpServletResponse.getWriter();
//1.取页面端传过来的页面信息
String old = httpServletRequest.getParameter("name"); //name是从js中定义的url中参数获取的
// String name = new String(old.getBytes("iso8859-1"),"utf-8");
String name = URLDecoder.decode(old,"UTF-8");
System.out.println("转换编码前"+old);
System.out.println("转换编码后"+name);
//2.检查参数是否有问题
//将数据封装成xml格式
StringBuilder builder = new StringBuilder();
builder.append("<message>");
if(name==null||name.length()==0){
builder.append("用户名不能为空");
}else{
//3. 校验操作
//修改点2-返回的格式做个简单的修改
if(name.equals("guangpeng")){
//4 .和传统应用不同,这一步是将用户感兴趣的数据返回给页面段,而不是将新的页面传递给用户
builder.append("用户名["+name+"]已经存在,请使用其他用户名").append("</message>");
} else{
builder.append("用户名["+name+"]尚未存在,可以使用该用户名注册").append("</message>");
// out.println(name+"--11用户尚未注册,请先注册!");
//out.println(name.equals("guangpeng"));
}
out.println(builder.toString());
}
}
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}
}
Js文件:方式一:使用XmlHttpRequest对象实现ajax异步数据交互:
//这个方法将使用XmlHttpRequest对象进行ajax异步数据交互
var xmlhttp;
function verify(){
//var xmlhttp;
//使用dom的方式获取文本框中的值
var userName = document.getElementById("userName").value;
if(window.XMLHttpRequest){
//针对firefox,mozillor opera safari ie7.8
xmlhttp = new XMLHttpRequest();
//修正某些浏览器bug的代码,能正确的返回xml格式的数据
if(xmlhttp.overrideMimeType){
xmlhttp. overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//针对ie6,5
//两个可以用于创建XMLHttpRequest对象的控件名称,保存在一个js中
//排在前面的版本较新 ,控件版本不一样,要尝试性的去创建
var activeNeme = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0; i<activeNeme.length; i++){
try{
xmlhttp = new ActiveXObject(activeNeme[i]);
break;
}catch(e){
}
}
}
//验证对象是否创建成功
if(!xmlhttp){
alert("XMLHttpRequest对象创建失败");
}else{
alert("创建成功了:"+xmlhttp);
}
//2.回调函数的注册
//只是需要函数名,不要加括号,如果加上括号,会把函数的返回值注册上
xmlhttp.onreadystatechange = callback;//这里写的是函数名
//3.设置连接信息 Get方式实现
//第一个参数表示http的请求方式,支持所有的http的请求方式,主要使用get和post
//第二个参数表示请求的url地址,get参数也在url中
//第三个参数表示采用异步还是同步方式交互,true表示异步
// xmlhttp.open("GET","AjaxServer?name="+userName, true);
//4.发送数据,开始和服务器进行交互
// 同步方式下,send这句话会在服务器端数据回来后才执行
//异步方式下,send这句话会立即完成执行
//xmlhttp.send(null);
//post方式请求的的代码
xmlhttp.open("POST","AjaxXmlServer", true);
//自己设置http请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//post方式发送数据
xmlhttp.send("name="+userName);
}
//回调函数
function callback(){
//5.接收响应数据
//判断对象的状态是交互完成 4表示交互完成 ,XMLHttpRequest共有五种状态0-4
if(xmlhttp.readyState == 4){
//判断http的交互是否成功
if(xmlhttp.status == 200){
//使用responseXml的方式来接受xml数据
var domObj = xmlhttp.responseXML;
if(domObj){
//<message>1234567</message> 获取该元素的节点,返回数组
var messageNodes = domObj.getElementsByTagName("message");
if(messageNodes.length >0){
// message标签中的文本在dom中时message标签对应的元素节点的子节点,firstChild可以获取到当前节点的第一个子节点
// 通过以下方式就可以获取文本内容所对应的节点
var textNode = messageNodes[0].firstChild;
var responseMessage = textNode.nodeValue;
//将数据显示在页面上
var divNode = document.getElementById("result");
divNode.innerHTML = responseMessage;
} else{
alert("XML数据格式错误,原始文本内容为:"+xmlhttp.responseText);
}
} else{
alert("XML数据格式错误,原始文本内容为:"+xmlhttp.responseText);
}
} else{
alert("出错了!!!");
}
}
}
实现方式二:利用jquery实现:js文件代码:
//定义用户名校验的方法,使用【jquery】以xml的数据格式传输,
function verify(){
//jquery返回都是jquery对象,可以继续在上面执行其他的方法
var jqueryObj = $("#userName");
//获取节点的值
var userName = jqueryObj.val();
//javascript简单对象定义的方法
var obj = {name:"123",age:20}
$.ajax({
type: "POST", //Http请求方式
url: "AjaxXmlServer", //服务器端URL地址
data: "name="+userName, //发送给服务器的数据
dataType: "xml", //告诉Jquery返回的数据格式
success: callback //定义交互完成,并且服务器正确返回数据时调用的回调函数
});
}
//回调函数,是数据异步交互的一个体现
function callback(data){
var jqueryObj = $(data); //首先需要将dom对象转换成jquery的对象
var message = jqueryObj.children();//获取message节点
var text = message.text(); //获取文本内容
$("#result").html(text); //将服务器端返回的数据动态的显示在页面上
alert("数据返回成功");
}
分享到:
相关推荐
云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-云的学习笔记管理系统java代码-云的学习笔记系统设计与实现-基于ssm的云的学习笔记系统-基于Web的云的学习笔记系统设计与实现-云的学习...
ajax+php--接收处理xml和text格式数据例子学习
云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-云的学习笔记管理系统java代码-云的学习笔记系统设计与实现-基于ssm的云的学习笔记系统-基于Web的云的学习笔记系统设计与实现-云的学习...
NULL 博文链接:https://persistc.iteye.com/blog/264072
ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习...
掌握 Ajax第 4 部分-利用 DOM 进行 Web 响应 掌握 Ajax第 5 部分-操纵 DOM 掌握 Ajax第 6 部分-建立基于 DOM 的 Web 应用程序 掌握 Ajax第 7 部分-在请求和响应中使用 XML 掌握 Ajax第 10 部分--使用 JSON 进行数据...
ajax-xml-aspnet读存数据基础代码
js中ajax发送xml数据,java对xml解析(蓝色标记重点)
Ajax\掌握 Ajax第 7 部分-在请求和响应中使用 XML
下面小编就为大家带来一篇Ajax学习笔记---3种Ajax的实现方法【推荐】。小编觉得挺不错的,现在分享给大家,也给大家做个参考
JavaEE5学习笔记12-JSF集成AJAX使用经验总结。
Ajax-magento2-catalog-infinite-scroll.zip,免费的Magento 2扩展,为目录添加无限滚动功能(通过AJAX实现)编码教程,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。...
掌握 Ajax第 10 部分--使用 JSON 进行数据传输.pdf
商业编程-源码-利用Ajax进行数据分页的源码例子.zip
Ajax-wc-ajax-product-filter.zip,Woomerce AJAX产品过滤器-是一个插件,允许您根据类别、属性和价格轻松过滤产品。您可以对产品进行排序,导航到下一页和上一页,而无需重新加载该页。,ajax代表异步javascript和xml...