js通过Ajax异步操作后端xml数据的基本原理讲解-博客-最代码

首页>博客>js通过Ajax异步操作后端xml数据的基本原理讲解

juntity 2016-07-15 17:07:38

js通过Ajax异步操作后端xml数据的基本原理讲解

/*
* Ajax的核心操作对象是xmlHttpRequest
* 　　简化操作步骤：实例化一个xmlHttpRequest对象 ==> 发送请求 ==> 接受响应 ==> 执行回调
*/

实例化对象

　　考虑到兼容问题,非IE5/IE6 使用 => new XMLHttpRequest();

　　IE5/IE6使用 => new ActiveXObject(Microsoft.XMLHTTP); ☯神呐，请带走IE吧！

发送请求

　　使用 XMLHttpRequest 对象的 open('GET',url,async) 和 send() 方法：

　　❶ open() 有三个参数：

　　　　分别为http请求方式(get/post) ==》与 POST 相比，GET 更简单也更快，POST 没有数据量限制，不会缓存，相对安全

　　　　http请求地址 ==》url(统一资源定位符)文件所在服务器的地址

　　　　async：true（异步）或 false（同步）

　　❷send(string) string：仅用于 POST 请求

接受响应，执行回调

　　当readyState的值发生改变时，触发readystatechange事件，事件中就可以为所欲为了

　　readyState==4 =>请求加载完成 / http的状态为200 =>响应成功

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title>异步操作集合啦</title>
        <script type="text/javascript">
            /*
             * Ajax的核心操作对象是xmlHttpRequest
             *    简化操作步骤：实例化一个xmlHttpRequest对象  ==> 发送请求  ==> 接受响应 ==> 执行回调
             */
            var jsAjax = function() {
                var xmlHttpR = null;
                if(window.ActiveXObject) {
                    //IE5/IE6把xmlHttpRequest封装在window的子对象ActiveXObject中
                    xmlHttpR = new ActiveXObject(Microsoft.XMLHTTP);
                } else if(window.XMLHttpRequest) {
                    //非IE5、IE6
                    xmlHttpR = new XMLHttpRequest();
                }
 
                if(xmlHttpR) {
                    xmlHttpR.open("GET", "ajax.xml", true);
                    xmlHttpR.onreadystatechange = function(e) {
                        if(xmlHttpR.readyState == 4) {
                            if(xmlHttpR.status == 200) {
                                console.log(xmlHttpR.responseText);
                            }
                        }
                    }
                    xmlHttpR.send(null);
                }
            }
        </script>
    </head>
 
    <body>
 
    </body>
 
</html>

<?xml version="1.0" encoding="utf-8"?>
<bookstore>
    <book category="COOKING">
        <title lang="en">Everyday Italian</title>
        <author>Giada De Laurentiis</author>
        <year>2005</year>
        <price>30.00</price>
    </book>
    <book category="CHILDREN">
        <title lang="en">Harry Potter</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    <book category="WEB">
        <title lang="en">Learning XML</title>
        <author>Erik T. Ray</author>
        <year>2003</year>
        <price>39.95</price>
    </book>
</bookstore>

打赏

0个评论