• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    AJAX+JSP实现读取XML内容并按排列显示输出的方法示例

    本文实例讲述了AJAX+JSP实现读取XML内容并按排列显示输出的方法。分享给大家供大家参考,具体如下:

    实现功能:点击按扭,显示出JSP页面中通过out.println传过来的xml信息

    一、含XML的JSP页面

    %@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    %
      response.setContentType("text/xml");
      String txt = request.getParameter("username");
      out.println("student>name>张三/name>age>21/age>sex>男/sex>/student>");
     %>
    
    

    二、AJAX处理并显示返回页面

    %@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    html>
     head>
      title>ajax02/title>
      script type="text/javascript">
      /*
        ajax 的几个步骤:
        1、建立XmlHttpRequest对象
        2、设置回调函数
        3、使用Open方法建立与服务器的连接
        4、向服务器发送数据
        5、在回调函数中针对不同响应状态进行处理
      */
        var xmlHttp;
        function createXMLHttpRequest(){  //1建立XmlHttpRequest对象
          if(window.ActiveXObject){
            try{
              alert("Msxml2.XmlHttp.5.0");
                xmlHttp = new ActiveXObject("Msxml2.XmlHttp.5.0");
            }catch(e){
              try{
                xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
              }catch(e){
                alert("Microsoft.XMLHttp");
              }
            }
          }else{
            xmlHttp = new XMLHttpRequest();
          }
        }
        function showMes(){   //2设置回调函数
          if(xmlHttp.readyState==4){ //数据接收完成并可以使用
            if(xmlHttp.status==200){ //http状态OK
            //5、在回调函数中针对不同响应状态进行处理
            // document.getElementById("sp").innerHTML = xmlHttp.responseText; //服务器的响应内容
              var name = xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.nodeValue;
              var age = xmlHttp.responseXML.getElementsByTagName("age")[0].firstChild.nodeValue;
              var sex = xmlHttp.responseXML.getElementsByTagName("sex")[0].firstChild.nodeValue;
              document.getElementById("spanname").innerHTML = name;
              document.getElementById("spanage").innerHTML = age;
              document.getElementById("spansex").innerHTML = sex;
            }else{
              alert("出错:"+xmlHttp.statusText); //HTTP状态码对应的文本
            }
          }
        }
        /**
        //这是GET方法传送
        function getMes(){
          createXMLHttpRequest();
          var txt = document.getElementById("txt").value;
          var url="servlet/AjaxServlet?txt="+txt;
          url = encodeURI(url); //转换码后再传输
          xmlHttp.open("GET",url,true); //3使用Open方法建立与服务器的连接
          xmlHttp.onreadystatechange=showMes;
          xmlHttp.send(null); //4向服务器发送数据
        }
        */
        /**
        *这是post方法
        */
        function postMes(){
          createXMLHttpRequest();
          var txt = document.getElementById("txt").value;
        // var url = "servlet/AjaxServlet";
          var url = "work02forxml-2.jsp"
          var params = "username="+txt;
          xmlHttp.open("POST",url,true);
          xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
          xmlHttp.send(params);
          xmlHttp.onreadystatechange = showMes;
        }
      /script>
     /head>
     body>
      input type="text" id="txt"/>
      input type="button" value="query" onclick="postMes()" />br>
      span id="sp">/span>
      姓名:span id="spanname">/span>br>
      年龄:span id="spanage">/span>br>
      性别:span id="spansex">/span>
     /body>
    /html>
    
    

    PS:这里再为大家提供几款关于xml操作的在线工具供大家参考使用:

    在线XML/JSON互相转换工具:
    http://tools.jb51.net/code/xmljson

    在线格式化XML/在线压缩XML
    http://tools.jb51.net/code/xmlformat

    XML在线压缩/格式化工具:
    http://tools.jb51.net/code/xml_format_compress

    XML代码在线格式化美化工具:
    http://tools.jb51.net/code/xmlcodeformat

    更多关于ajax相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《JavaScript中ajax操作技巧总结》、《PHP+ajax技巧与应用小结》及《asp.net ajax技巧总结专题》

    希望本文所述对大家ajax程序设计有所帮助。

    您可能感兴趣的文章:
    • JQuery的ajax获取数据后的处理总结(html,xml,json)
    • AJAX使用post发送数据xml格式接受数据
    • 用Ajax读取xml文件的简单例子
    • Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
    • AJAX中同时发送多个请求XMLHttpRequest对象处理方法
    • 通过XMLHttpRequest和jQuery实现ajax的几种方式
    • JS通过ajax动态读取xml文件内容的方法
    • AJAX 常用函数创建XMLHTTP对象,区别IE,Mozilla浏览器
    • javascript解析ajax返回的xml和json格式数据实例详解
    • firefox下jquery ajax返回object XMLDocument处理方法
    • 用Ajax读取XML格式的数据
    上一篇:关于Ajax异步请求后台数据进行动态分页功能
    下一篇:AJAX+Servlet实现的数据处理显示功能示例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    AJAX+JSP实现读取XML内容并按排列显示输出的方法示例 AJAX+JSP,实现,读取,XML,内容,