AJAX异步请求

 ajax 请求步骤

    document.querySelector("#btn1").onclick = function() {

        // 第一步 创建XMLHttpRequet对象

        var xmlhttp = new XMLHttpRequest()

            // 第二步 告诉浏览器请求的方式是什么

        xmlhttp.open("get", "http://127.0.0.1:8090", true);

        // 第三步 设置响应服务器端数据处理

        xmlhttp.onreadystatechange = function() {

                //做数据处理

                document.querySelector("#div1").innerHTML = xmlhttp.responseText;

            }

            // 第四步 发送请求

        xmlhttp.send()

    }

请求json数据

        document.querySelector("#btn1").onclick = function() {

            // 第一步 创建XMLHttpRequet对象

            var xmlhttp = new XMLHttpRequest()

                // 第二步 告诉浏览器请求的方式是什么

            xmlhttp.open("get", "js/student.json", true);

            // 第三步 设置响应服务器端数据处理

            xmlhttp.onreadystatechange = function() {

                    //做数据处理

                    var students = JSON.parse(xmlhttp.responseText);

                    // console.log(students[0].stuID)

                    var table = "<table border='1'bordercolor='red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>"

                    for (var i = 0; i < students.length; i++) {

                        var stuid = students[i].stuID;

                        var stuname = students[i].stuName;

                        var stuage = students[i].stuAge;

                        table += "<tr><td>" + stuid + "</td><td>" + stuname + "</td><td>" + stuage + "</td></tr>"

                    }

                    table += "</table>";

                    document.querySelector("#div1").innerHTML = table;

                }

                // 第四步 发送请求

            xmlhttp.send()

        }

 

        document.querySelector("#btn1").onclick = function() {

            // 第一步 创建XMLHttpRequet对象

            var xmlhttp = new XMLHttpRequest()

                // 第二步 告诉浏览器请求的方式是什么

            xmlhttp.open("get", "student.xml", true);

            // 第三步 设置响应服务器端数据处理

            xmlhttp.onreadystatechange = function() {

                    //做数据处理

                    xmlData(xmlhttp.responseXML);

                }

                // 第四步 发送请求

            xmlhttp.send()

        }

        function xmlData(xmldata1) {

            var students = xmldata1.getElementsByTagName("student");

            // console.log(students[0].stuID)

            var table = "<table border='1'bordercolor='red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>"

            for (var i = 0; i < students.length; i++) {

                var stuid = students[i].getElementsByTagName("stuID")[0].innerHTML;

                var stuname = students[i].getElementsByTagName("stuName")[0].innerHTML;

                var stuage = students[i].getElementsByTagName("stuAge")[0].innerHTML;

                table += "<tr><td>" + stuid + "</td><td>" + stuname + "</td><td>" + stuage + "</td></tr>"

            }

            table += "</table>";

            document.querySelector("#div1").innerHTML = table;

        }

 Jquery请求

 

       $(function() {

            $("#btn").click(function() {

                //     $.ajax({

                //         type: "get", //请求方式

                //         url: "js/student.json", //请求的url位置

                //         async: true, 异步

                //         dataType: "text",响应的数据类型

                //         success: function(data) { //请求成功时对数据的处理

                //             // console.log(typeof data);

                //             var students = JSON.parse(data);

                //             for (var i = 0; i < students.length; i++) {

                //                 console.log(students[i].stuID);

                //             }

                //         }

                //     })

 get请求

$.get("js/student.json", function(data) {

                    console.log(data);

                })