zoukankan      html  css  js  c++  java
  • javascript 解析ajax返回的xml和json格式的数据

    写个例子,以备后用

    一、JavaScript 解析返回的xml格式的数据:

    1、javascript版本的ajax发送请求

    (1)、创建XMLHttpRequest对象,这个对象就是ajax请求的核心,是ajax请求和响应的信息载体,单是不同浏览器创建方式不同

    (2)、请求路径

    (3)、使用open方法绑定发送请求

    (4)、使用send() 方法发送请求

    (5)、获取服务器返回的字符串   xmlhttpRequest.responseText;

    (6)、获取服务端返回的值,以xml对象的形式存储  xmlhttpRequest.responseXML;

    (7)、使用W3C DOM节点树方法和属性对该XML文档对象进行检查和解析。


    2、 实例:

    (1)、发送ajax请求,以及解析返回的数据


    <script type="text/javascript">
    /* js版本发送ajax请求  */
    function tellxml(){
     // 创建对象,适合于firefox 和safari
     var  xmlhttpRequest= new XMLHttpRequest();
     // 创建对象,适合于ie
     // var xmlhttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
     // 请求发送路径 url 
     var url="http://localhost:18080/servlet/Servlet1?aa=10";
     // Open方法绑定一个发送过程,但不发送数据。Open方法最后一个参数为true时表示异步,否则同步
     xmlhttpRequest.open("POST",url,true);
     // Send方法就是发送请求数据
     xmlhttpRequest.send(url);
     // readstate 就是一个xmlhttprequest 对象的一个属性,来记录服务器返回的状态
     var readstate =xmlhttpRequest.readyState;
     alert("状态:"+readstate);
     // status 就是发送请求的状态,如果是200 则说明请求响应成功
     var status=xmlhttpRequest.status;
     alert("请求发送结果"+status);
     // "responseText”是xmlhttpRequest的一个属性,来以字符串形式存储HTTP响应值;“responseXML”属性是以XML形式来记录HTTP响应的值。
     var text= xmlhttpRequest.responseText;
     alert(text);
     // “responseXML”是xmlhttpRequest的一个属性,是以XML文档的对象来存储服务器端返回的值,可以使用W3C DOM节点树方法和属性对该XML文档对象进行检查和解析。
     var  xml= xmlhttpRequest.responseXML;
     var values=xml.getElementsByTagName("info"); 
     alert("值"+values);
     alert("长度"+values.length);
     // 解析获取内容
     for(var i=0;i<values.length;i++){
         var  name1=values[i].getElementsByTagName("name")[0].firstChild.data;
         alert(name1);
     }
    };
    </script>


    (2)、servlet 接受ajax 请求:

     @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // TODO Auto-generated method stub
            String aaa= request.getParameter("aa");
            System.out.print("ajax 数据:"+aaa);
            // 向客户端响应信息
            response.setCharacterEncoding("GBK");
            response.setContentType("text/xml");
            PrintWriter  out= response.getWriter(); 
            out.print("<?xml version="1.0" encoding="GBK"?>");
            out.println("<infos>");
            out.println("<info>");
            out.println("<name>"+"name1"+"</name>");
            out.println("<age>"+12+"</age>");
            out.println("<name>"+"name2"+"</name>");
            out.println("<age>"+22+"</age>");
            out.println("</info>");
            out.println("<info>");
            out.println("<name>"+"name11"+"</name>");
            out.println("<age>"+112+"</age>");
            out.println("<name>"+"name22"+"</name>");
            out.println("<age>"+222+"</age>");
            out.println("</info>");
            out.println("</infos>");
        
        }



    二、JavaScript 解析返回的json格式的数据:注意这里获取的是responseText 而不是responseXML也就是字符串而不是xml对象,因为返回的是json

    1、发送请求,并解析返回的json格式的数据(这里返回的是json 对象的格式)
    <script type="text/javascript">
    /* js 解析返回的格式为 json  */
    function  telljson(){
        // 创建 xmlhttpRequest 对象
         var  xmlhttpRequest= new XMLHttpRequest();
         //请求URL
         var url="http://localhost:18080/servlet/Servlet3?aa=10";
         // 将请求过程绑定到 open 方法
         xmlhttpRequest.open("POST",url,true);

         // 发送请求     

         xmlhttpRequest.send(url);
         // readstate 就是一个xmlhttprequest 对象的一个属性用来记录服务端响应的状态
         var readstate =xmlhttpRequest.readyState;
         alert("请求准备状态:"+readstate);

         // status 服务器执行的状态  

        var status=xmlhttpRequest.status;
         alert("请求发送结果"+status);
         //  responseText 对象为xmlhttpRequest 对象的一个属性,用来以字符串的方式存储服务器端返回的值。
         var text= xmlhttpRequest.responseText;
         alert("json text: "+text);
         // 获取json 返回值
         // 那边传的是json对象的格式的一个字符串,在前台首先将字符串转化为一个json格式的js对象
         var  json= eval("("+text+")");
          // 通过eval() 方法将json格式的字符串转化为js对象,并进行解析获取内容
        alert("age:"+json.age+"age1:"+json.age1);
         
    };
    </script>


    2、servlet 接受请求,并返回数据

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // 向ajax 返回json格式的数据
                    String aaa= request.getParameter("aa");
                    System.out.print("ajax 数据:"+aaa);
                    // 向客户端响应信息
                    response.setCharacterEncoding("GBK");
                    response.setContentType("text/json");
                    PrintWriter  out= response.getWriter();
                    // 这里组装json对象的格式,并转化为json格式的字符串返回。
                    String stu="{age:12,age1:23,age2:33}"; 

                    out.print(stu);
                    out.flush();
                    out.close();

        }


    三、JavaScript 解析返回的json数组格式的数据:

    1、发送ajax请求

    <script type="text/javascript">
    /* js 解析返回的格式为 json  */
    function  telljson(){
        // 创建xmlhttpRequest对象
         var  xmlhttpRequest= new XMLHttpRequest();
         //请求url
         var url="http://localhost:18080/servlet/Servlet3?aa=10";
         // open 方法绑定请求路径
         xmlhttpRequest.open("POST",url,true);
        // 发送ajax请求 

        xmlhttpRequest.send(url);
         // readstate 就是一个xmlhttprequest 对象的一个属性用来记录服务器返回的状态信息
         var readstate =xmlhttpRequest.readyState;
         alert("请求准备状态:"+readstate);

         //   status 属性用来记录服务器返回的执行状态信息 

         var status=xmlhttpRequest.status;
         alert("请求发送结果"+status);
         // responseText属性用来以字符串方式存储服务器端返回的数据
         var text= xmlhttpRequest.responseText;
         alert("json text: "+text);
         // 那边传的是json数组的格式,通过js的eval() 方法将json数组格式的字符串转化为js数组
        var  json= eval("("+text+")");
        //  解析这个js数组,获取数值

        var  age=json[0].age;
        var  age1=json[0].age1;
        var  age2=json[0].age2;
        alert("age:"+age+"age1"+age1+"age2"+age2); 

    };
    </script>



    四、ajax  XMLHttpRequest 对象的三个属性以及open 和send方法:

    (1)onreadystatechange 属性
    onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行设置:

    xmlHttp.onreadystatechange=function()
    {
    // 我们需要在这里写一些代码
    }
    (2)readyState 属性

    readyState 属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。

    这是 readyState 属性可能的值:

    状态 描述 
    0 请求未初始化(在调用 open() 之前) 
    1 请求已提出(调用 send() 之前) 
    2 请求已发送(这里通常可以从响应得到内容头部) 
    3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应) 
    4 请求已完成(可以访问服务器响应并使用它)

    我们要向这个 onreadystatechange 函数添加一条 If 语句,来测试我们的响应是否已完成(意味着可获得数据):

    xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
        {
        // 从服务器的response获得数据
        }
    }
    (3)responseText 属性

    可以通过 responseText 属性来取回由服务器返回的数据。

    在我们的代码中,我们将把时间文本框的值设置为等于 responseText:

    xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
        {
        document.myForm.time.value=xmlHttp.responseText;
        }
    }

    另外:

    AJAX - 向服务器发送一个请求
    要想把请求发送到服务器,我们就需要使用 open() 方法和 send() 方法。

    open() 方法需要三个参数:

      第一个参数定义发送请求所使用的方法(GET 还是 POST)。

    与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

    然而,在以下情况中,请使用 POST 请求:

    • 无法使用缓存文件(更新服务器上的文件或数据库)
    • 向服务器发送大量数据(POST 没有数据量限制)
    • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

      第二个参数规定服务器端脚本的 URL(该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务))。

      第三个参数规定应当对请求进行异步地处理(true(异步)或 false(同步))。

    send() 方法可将请求送往服务器。如果我们假设 HTML 文件和 ASP 文件位于相同的目录,那么代码是这样的:

    xmlHttp.open("GET","time.asp",true);
    xmlHttp.send(null);


    五、之前的实例都没有使用 XMLHttpRequest 对象的onreadystatechange 这个属性,下面看看这个属性的实例:

    1、onreadystatechange  这个属性在前面也说了,就是在XMLHttpRequest 这个对象的 readyState  这个值改变的时候会执行。

    2、发送ajax请求并解析

    <script type="text/javascript">
    /* js 解析返回的格式为 json  */
    function  telljson(){
        // 创建对象,适合于firefox 和safari
         var  xmlhttpRequest= new XMLHttpRequest();
         //请求发送路径 url 
         var url="http://localhost:18080/servlet/Servlet3?aa=10";
         // Open方法绑定一个发送过程,但不发送数据。Open方法最后一个参数为true时表示异步,否则同步
         xmlhttpRequest.open("POST",url,true);
         // Send方法就是发送请求数据
         xmlhttpRequest.send(url);
        //onreadystatechange 属性存有处理服务器响应的函数
         xmlhttpRequest.onreadystatechange =function(){
            //readyState 属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。
             alert("状态改变了:"+xmlhttpRequest.readyState);
             // 如果是4  请求已完成(可以访问服务器响应并使用它) 
             if(xmlhttpRequest.readyState==4){
                 var readstate =xmlhttpRequest.readyState;
                 alert("请求准备状态:"+readstate);
                 var status=xmlhttpRequest.status;
                 alert("请求发送结果"+status);
                 // "responseText”是xmlhttpRequest的一个属性,来以字符串形式存储HTTP响应值;“responseXML”属性是以XML形式来记录HTTP响应的值。
                 var text= xmlhttpRequest.responseText;
                 alert("json text: "+text);
                 // 获取json 返回值
                 // 那边传的是json数组的格式,这边解析后就是一个json数组
                var  json= eval("("+text+")");
                var  age=json[0].age;
                var  age1=json[0].age1;
                var  age2=json[0].age2;
                alert("age:"+age+"age1"+age1+"age2"+age2); 
             }
         }

    };
    </script>

    3、servlet返回的数据

    protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
            // 向ajax 返回json格式的数据
            String aaa = request.getParameter("aa");
            System.out.print("ajax 数据:" + aaa);
            // 向客户端响应信息
            response.setCharacterEncoding("GBK");
            response.setContentType("text/json");
            PrintWriter out = response.getWriter();
            // 这里使用 json 数组的格式
            String stu = "[{age:12,age1:23,age2:33}]";
            out.print(stu);
            out.flush();
            out.close();
        }

  • 相关阅读:
    RE
    【LeetCode】198. House Robber
    【LeetCode】053. Maximum Subarray
    【LeetCode】152. Maximum Product Subarray
    【LeetCode】238.Product of Array Except Self
    【LeetCode】042 Trapping Rain Water
    【LeetCode】011 Container With Most Water
    【LeetCode】004. Median of Two Sorted Arrays
    【LeetCode】454 4Sum II
    【LeetCode】259 3Sum Smaller
  • 原文地址:https://www.cnblogs.com/mrcharles/p/11879839.html
Copyright © 2011-2022 走看看