Ajax的入门小案例

关于Ajax

html部分

<select></select>
<button>点我有惊喜</button>

js部分

    <script>
        //第一步先获取页面渲染容器select，这里是想把获取的省份数据放在下拉列表中，所以选择了select
        var set = document.querySelector('select');
        // 下面是正式的ajax操作
        // 说一下背景，ajax是一种异步获取数据的方法，但是不能跨域获取数据。
        document.querySelector('button').onclick = function() {
            // 第一步：先创建一个异步对象，这里我创建的对象赋给了ajax
            var ajax = new XMLHttpRequest();
            // 第二步：想象一下，如果要发快递的话，就需要先选下用什么快递发送到哪个地址
            // 在ajax‘get’和‘post’就像是快递公司，URL就像是要发送的地址。
            // 所以这里第二部就是设置发送的方式和地址url，这里使用的是get方式和一个省份json数据接口
            ajax.open('get', 'http://sisecourse.free.idcfengye.com/jsonX/AreaServlet');
            // 好了快递信息填完了接下来就是要发快递了,send()方法就是告诉浏览器,要发送信息给服务器了
            ajax.send();
            // 然后最后一步需要注册一下事件信息.
            ajax.onreadystatechange = function() {
                // 写一些逻辑,这里只有当status=200并且readyState=4的时候才表示数据成功的返回回来了可以调用了.
                // 所以用if语句判断了一下
                if (ajax.status == 200 && ajax.readyState == 4) {
                    console.log('获取成功');
                    // 使用JSON.parse()方法,把json数据转变成js的对象
                    var data = JSON.parse(ajax.responseText);
                    // 这里data是一个大全局对象,比数据中的数组高一层,所以寻找数组需要找到data的数组对象allAreas
                    // 然后遍历数组，把里面的数据都拿出来。

                    for (var i = 0; i <= data.allAreas.length; i++) {
                        var ele = document.createElement('option');
                        // 这里有个坑，创建新的元素不能再遍历外面创建，因为每一次循环都需要创建一个元素
                        // 来装数据,如果放在了遍历外面,那么创建的元素就只能是一个,放的数据也只是遍历到的最后一个数据.
                        ele.innerHTML = data.allAreas[i].title;
                        // 最后把创建的新元素并且装了数值之后,加入到父元素select的下面成为其子元素.
                        set.appendChild(ele);
                    }
                }
            }
        }
    </script>

未加载ajax

点击按钮加载后的页面

传回来的json数据

02)]

传回来的json数据

[外链图片转存中…(img-N4uKU82H-1608192864006)]