`
Spring_g
  • 浏览: 64073 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ajax学习笔记02-利用xml数据格式进行数据交互

阅读更多
以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("数据返回成功");

}

分享到:
评论

相关推荐

    Ajax学习笔记---3种Ajax的实现方法【推荐】

    虽然XML最初被提及在Ajax技术中,但在实际应用中,JSON(JavaScript Object Notation)更常被用来传递数据,因为它的解析效率更高且更易于使用。 ### Ajax的历史 Ajax技术起源于Web前端的发展。网景公司(Netscape...

    Ajax 学习笔记,超详细的噢!不看后悔

    在这份超详细的Ajax学习笔记中,我们将深入探讨以下几个关键知识点: 1. **基础概念**:Ajax的核心是JavaScript对象XMLHttpRequest,它使得前端和后端能够进行异步通信。异步意味着用户在等待服务器响应时可以执行...

    Ajax学习笔记个人总结

    ### Ajax学习笔记个人总结 #### 一、XMLHttpRequest对象简介 **XMLHttpRequest** 对象是 AJAX 技术的核心,它负责在客户端与服务器之间发送异步请求,无需刷新整个页面即可实现局部数据更新。要使用 ...

    JavaScript高级程序设计2,学习笔记---第一篇

    这篇学习笔记将带你探索JavaScript的核心概念,包括变量、数据类型、控制流、函数、对象和类等,这些都是构建复杂应用程序的基础。 首先,我们要了解JavaScript的基础语法。在JavaScript中,变量是存储数据的容器,...

    16ajax学习笔记1

    在本篇16ajax学习笔记1中,我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求: Ajax的首要任务是创建XMLHttpRequest对象,这是浏览器提供的API。在JavaScript中,我们可以通过new ...

    林信良学习笔记之-AjaxGossip

    3. **JSON与XML**:虽然名字中含有XML,但现代Ajax更常使用JSON(JavaScript Object Notation)作为数据交换格式,因为它更简洁、易于解析,同时兼容性更强。 **Ajax工作流程** 1. **创建XMLHttpRequest对象**:在...

    ajax学习笔记代码

    **Ajax学习笔记代码详解** Ajax,全称Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这种技术的...

    AJAX学习笔记1

    **标题:“AJAX学习笔记1”** 在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。AJAX的核心是利用...

    ajax学习笔记资料

    - **XML**:尽管名称中含有XML,但实际上,Ajax传输的数据格式并不局限于XML,还可以是JSON、HTML或纯文本等。 ### 2. Ajax的工作流程 1. **创建XMLHttpRequest对象**:在JavaScript中,首先需要创建一个...

    Ajax和jQuery学习笔记

    ### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax?** Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种用来创建快速动态网页的技术,通过在后台与服务器进行少量数据...

    Ajax学习笔记

    ### Ajax学习笔记 #### 一、解释Ajax Ajax(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新...

    经典ajax学习笔记

    以下是一份详细的Ajax学习笔记,涵盖了其基本概念、工作原理、优势与限制,以及实际应用。 ### 一、基本概念 Ajax的核心是JavaScript对象XMLHttpRequest(XHR),它允许浏览器在后台与服务器进行通信,而不会打断...

    ajax学习笔记

    Ajax,全称Asynchronous JavaScript And XML,是一种用于创建交互性更强、更快速的Web应用程序的技术。它通过JavaScript的XMLHttpRequest对象实现了客户端与服务器之间的异步通信。这种技术的关键优势在于,它能够在...

    Ajax学习笔记.zip

    Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript在后台与服务器进行通信,实现了异步数据交换。 在Ajax中,主要涉及以下几个关键知识点: 1. **XMLHttpRequest对象**:这是Ajax的基础,它创建了一个...

    AJAX应用笔记(1)

    - **XML 和 JSON**:虽然名称中含有XML,但现代AJAX应用更常使用JSON作为数据交换格式,因为JSON更轻量级且易于处理。 2. **AJAX 工作流程** - **用户交互**:用户触发一个事件,例如点击按钮。 - **创建 ...

    ajax的学习笔记

    2. **JavaScript**:Ajax主要通过JavaScript实现,利用浏览器提供的XMLHttpRequest对象与服务器进行交互。 3. **XML**:Ajax最初使用XML作为数据格式,但现在更常见的是JSON,因为JSON更轻量且易于处理。 ### 二、...

    AJAX高级的应用--DWR框架使用的学习笔记

    DWR (Direct Web Remoting) 是一个强大的AJAX框架,它允许JavaScript与Java在浏览器和服务器之间进行直接通信,实现了异步数据交换,从而提供了丰富的用户体验。DWR使得开发者能够轻松地在客户端使用JavaScript调用...

Global site tag (gtag.js) - Google Analytics