zoukankan      html  css  js  c++  java
  • Ajax返回值之XML、json类型

    Ajax返回值之XML、json类型

    2015-01-29

     

    注意:Ajax默认是不能跨域的,在最新的2.0里是可以跨域,但是需要对方应答、

     

    Ajax返回值之XML类型

    <HTML代码>

    <html>

        <head>

            <title>Ajax返回return</title>

        <script>

    function createXHR(){

        var xhr = null;

        if(window.XMLHttpRequest){

            xhr = new XMLHttpRequest();

        }else if(window.ActiveXObject){

            xhr = new ActiveXObject('Microsoft.XMLHTTP');

        }

        return xhr;

    }

    function test1(){

        var xhr = createXHR();

        xhr.open('GET','return.php',true);

        xhr.onreadystatechange = function(){

            if(this.readyState == 4){

                alert(this.responseText);

                //alert(this.responseXML);

                var xmldom = this.responseXML;

                var chs = xmldom.getElementsByTagName('book')[0].childNodes;

                //alert(chs[0].firstChild.wholeText);

                //alert(chs[1].firstChild.wholeText);

                document.getElementById('btitle').value = chs[0].firstChild.wholeText;

                document.getElementById('bintro').value = chs[1].firstChild.wholeText;

            }

        }

        xhr.send(null);

    }

        </script>

        </head>

        <body>

            书名:<input type="text" id="btitle" /><br/> 

            简介:<input type="text" id="bintro" /><br/><br/>    

            <input type="button" value="测试返回值1" onclick="test1();"/>

            <input type="button" value="测试返回值2" onclick="test2();"/>

        </body>

    </html>

     

    return.php 代码

    <?php

    header("Content-Type: text/xml");

    ?>

    <?xml version="1.0" encoding="utf-8"?>

    <bookstore><book bid="boo8"><title>天龙八部</title><intro>人生太苦</intro></book></bookstore>

     

     

    我们点击按钮1:

    得到:我们对到return.php文件的字符串形式的内容:

    然后。我们用XML格式对其进行解析,分别解析出文本节点title,和intro

    就简单实现了Ajax对xml的解析

    Ajax返回值之json类型2

     

    作为普通文本返回类型时,又有了一下几种常用的变通形式

    1. 返回剪短的标志字符串,0,1
    2. 后台返回大段的html代码,直接innerHTML到前端页面
    3. json格式,再由JS解析,

    111111111111111111

    {title:'天龙八部',intro:'人生八苦'}

     

    var book = eval('('+this.responseText+')');    //将json文本转换为对象

    alert(book);                             //得到的是对象

    document.getElementById('news').innerHTML = "书名:"+book.title+"<br/>简介:"+book.intro;                            //对象名.节点 就是使用

    2222222222222222

    //模拟服务器数据库取数据 json_encode() 自动编码

    $book = array('title'=>"天龙八部",'intro'=>'人生八苦');

    echo json_encode($book);

    json会自动编码:

    解析后得到一样的效果:

     

    PHP中使用json格式字符串:

    使用反向解码: json_decod();    即可以实现

    returnhtml.php代码:

     

    foreach(array('新闻1','新闻2','新闻3') as $v)

    { echo '<li>',$v,'</li>'; }

     

     

    returnjson.php 代码

    <?php

     

    //javascriptObjacetNotation

    //{title:'天龙八部',intro:'人生八苦'}

    //

    //

    //模拟服务器数据库取数据

    $book = array('title'=>"天龙八部",'intro'=>'人生八苦');

    echo json_encode($book);

     

    ?>

     

    html代码:

     

    <html>

        <head>

            <title>Ajax返回return</title>

        <script>

    function createXHR(){

        var xhr = null;

        if(window.XMLHttpRequest){

            xhr = new XMLHttpRequest();

        }else if(window.ActiveXObject){

            xhr = new ActiveXObject('Microsoft.XMLHTTP');

        }

        return xhr;

    }

    function test1(){

        var xhr = createXHR();

        xhr.open('GET','return.php',true);

        xhr.onreadystatechange = function(){

            if(this.readyState == 4){

                alert(this.responseText);

                //alert(this.responseXML);

                var xmldom = this.responseXML;

                var chs = xmldom.getElementsByTagName('book')[0].childNodes;

                //alert(chs[0].firstChild.wholeText);

                //alert(chs[1].firstChild.wholeText);

                document.getElementById('btitle').value = chs[0].firstChild.wholeText;

                document.getElementById('bintro').value = chs[1].firstChild.wholeText;

            }

        }

        xhr.send(null);

    }

    function test2(){

        var xhr = createXHR();

        xhr.open('GET','returnhtml.php',true);

        xhr.onreadystatechange = function(){

            if(this.readyState == 4){

                ///alert(this.responseText);

                document.getElementById('news').innerHTML = this.responseText;

            }

        }

        xhr.send(null);

    }

    function test3(){

        var xhr = createXHR();

        xhr.open('GET','returnjson.php',true);

        xhr.onreadystatechange = function(){

            if(this.readyState == 4){

                //alert(this.responseText);

                //alert({name:'zhangsan',age:29});  //js对象

                var book = eval('('+this.responseText+')');

                alert(book);

                document.getElementById('news').innerHTML = "书名:"+book.title+"<br/>简介:"+book.intro;

            }

        }

        xhr.send(null);

    }

        </script>

        </head>

        <body>

            书名:<input type="text" id="btitle" /><br/> 

            简介:<input type="text" id="bintro" /><br/><br/>    

            <input type="button" value="测试返回XML格式" onclick="test1();"/>

            <input type="button" value="测试返回HTML代码" onclick="test2();"/>

            <input type="button" value="测试返回json格式" onclick="test3();"/>

            <div id="news">

                  

            </div>

        </body>

    </html>

     

     

     

     

    ********************************************
    * 博客园: http://www.cnblogs.com/lihaiyan/
    * 邮箱:1063385677@qq.com
    * QQ: 1063385677
    * Copyright ©2014 Lover雪儿
    ********************************************
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。
  • 相关阅读:
    bzoj3688 折线统计
    bzoj3678 wangxz与OJ
    「6月雅礼集训 2017 Day8」route
    「6月雅礼集训 2017 Day8」gcd
    [ SHELL编程 ] 编程常用的ORACLE相关命令
    Oracle数据库备份/导入工具
    Oracle数据文件迁移到裸设备
    Oracle数据文件转移操作
    Oracle重建表空间操作实例
    Linux性能测试分析命令_sar
  • 原文地址:https://www.cnblogs.com/lihaiyan/p/4274255.html
Copyright © 2011-2022 走看看