Ajax-Day39

最新推荐文章于 2024-07-05 22:58:38 发布

今天十五

最新推荐文章于 2024-07-05 22:58:38 发布

阅读量114

点赞数

本文链接：https://blog.csdn.net/qq_26016931/article/details/117016666

版权

Ajax

Ajax简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

创建XMLHttpRequest对象

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

    <title>Document</title>
    <script>
        window.οnlοad=function(){
            var i;
            var btn=document.getElementById('btn')
            btn.οnclick=function(){
                 //为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如
                //果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
                var xmlhttp;
                if(window.XMLHttpRequest){
                  xmlhttp=new XMLHttpRequest();
                }else{
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
                }var xmlhttp;
                if(window.XMLHttpRequest){
                  xmlhttp=new XMLHttpRequest();
                }else{
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
                }

                xmlhttp.open('GET','test.txt',true);
                xmlhttp.onreadystatechange=function(){
                    if(xmlhttp.readyState==4&&xmlhttp.status==200){
                        console.log(xmlhttp.responseText);
                        document.getElementById('saveData').innerHTML=xmlhttp.responseText;
                    }
                }
                xmlhttp.send();
            }
        }
    </script>
</head>
<body>
    <button id="btn">getIn</button>
    <input type="text">
    <div id="saveData"></div>
</body>

Ajax三级联动

 <title>Document</title>
    <script>

        window.onload = init;
        function init() {
            // 初始化省份
            initProvince();
            // 省下拉列表绑定更改触发的事件
            var pn = document.getElementById('province');
            pn.onchange = getCities;

            var c = document.getElementById('city');
            c.onchange = getCounties;
        }

        // 加载区县
        function getCounties() {
            // 选择是谁,value就是谁
            // console.log(this.value);
            // 获取选择的名字  北京
            var optionValue = this.value;
            // 区县下拉列表
            var c = document.getElementById('county');
            c.options.length=1;
            // 1 获取ajax引擎对象
            var xhr = createXMLHttpRequest();
            // 2 配置url
            xhr.open('get', 'Area.xml', true);
            // 3 监听状态和回调函数
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 文档对象
                    var xmlDoc = xhr.responseXML;
                    // 获取对应省份
                    // 省下拉列表的选项值
                    var provinceValue = document.getElementById('province').value;
                    var p = xmlDoc.querySelector("province[name='" + provinceValue + "']");
                    // 对应的城市
                    var city = p.querySelector("city[name='" + optionValue + "']");

                    // 获取所有区县
                    var cs = city.getElementsByTagName('county');
                    var nodes = "";
                    for (let i = 0; i < cs.length; i++) {
                        var nameValue = cs[i].getAttribute('name');
                        // console.log(nameValue);
                        nodes += '<option value="' + nameValue + '">' + nameValue + '</option>';
                    }
                    c.innerHTML += nodes;
                }
            }
            // 4 发送
            xhr.send();
        }
        // 省事件
        function getCities() {
            // 选择是谁,value就是谁
            // console.log(this.value);
            // 获取选择的名字  北京
            var optionValue = this.value;
            // 城市下拉列表
            var c = document.getElementById('city');
            c.options.length=1;
            // 区县下拉列表
            var c1 = document.getElementById('county');
            c1.options.length=1;
            // 1 获取ajax引擎对象
            var xhr = createXMLHttpRequest();
            // 2 配置url
            xhr.open('get', 'Area.xml', true);
            // 3 监听状态和回调函数
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 文档对象
                    var xmlDoc = xhr.responseXML;
                    // 获取对应省份
                    var pn = xmlDoc.querySelector("province[name='" + optionValue + "']");

                    // 省份下所有城市
                    var cs = pn.getElementsByTagName('city');

                    var nodes = "";
                    for (let i = 0; i < cs.length; i++) {
                        var nameValue = cs[i].getAttribute('name');
                        // console.log(nameValue);
                        nodes += '<option value="' + nameValue + '">' + nameValue + '</option>';
                    }
                    c.innerHTML += nodes;
                }
            }
            // 4 发送
            xhr.send();
        }
        // 初始化省
        function initProvince() {
            // 1 获取ajax引擎对象
            var xhr = createXMLHttpRequest();
            // 2 配置url
            xhr.open('get', 'Area.xml', true);
            // 3 监听状态和回调函数
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 文档对象
                    var xmlDoc = xhr.responseXML;
                    // 获取所有省份
                    var pns = xmlDoc.getElementsByTagName("province");
                    // console.log(pns);

                    // 省下拉列表
                    var pn = document.getElementById('province');

                    // 遍历所有省份,并拼接
                    // <option value="北京">北京</option>
                    var nodes = "";
                    for (let i = 0; i < pns.length; i++) {
                        var nameValue = pns[i].getAttribute('name');
                        // console.log(nameValue);
                        nodes += '<option value="' + nameValue + '">' + nameValue + '</option>';
                    }
                    pn.innerHTML += nodes;
                }
            }
            // 4 发送
            xhr.send();
        }

        /**
         * 获取ajax引擎对象
         */
        function createXMLHttpRequest() {
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                return new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                return new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
    </script>
</head>

<body>
    <select name="" id="province">
        <option value="1">---请选择省份---</option>
    </select>
    <select name="" id="city">
        <option value="1">---请选择城市---</option>
    </select>
    <select name="" id="county">
        <option value="1">---请选择区县---</option>
    </select>
</body>