Ajax属性

如何创建一个 Ajax

<script>

        window.onload=function(){

            1)创建一个异步调用对象

            var request=new XMLHttpRequest();

            2)创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息

            request.open("get","./00 data.json");

            3) 设置响应 HTTP 请求状态变化的函数

            request.onreadystatechange=function(){

               if(request.status===200 && request.readyState===4){

                    console.log(request.responseText);

            5) 获取异步调用返回的数据

                    var data=JSON.parse(request.responseText);

                    console.log(data);

            6) 使用 JavaScript 和 DOM 实现局部刷新

                    if(data.status===200){

                       注：声明一个名字，在JSON中找到data里面的内容也就是data.data

                       var cls=data.data;

                     innerText：获取标签中的文本内容

                     querySelector：获取文档中h1的元素

                       document.querySelector("h1").innerText=cls.name;

                    }else{

                        console.log(data.msg);

                    }

               }

            }

             4)发送 HTTP 请求

            request.send();

        }

</script>

 

HTML内容：

<h1></h1>

JSON内容：

{

    "status": 200,

    "data": {

        "name": "web211001",

        "student": [

            {

                "id": 1001,

                "name": "小明"

            },

            {

                "id": 1002,

                "name": "小红"

            },

            {

                "id": 1003,

                "name": "小蓝"

            }

        ]

    },

    "msg": "错误信息"

}

 

使用jQuery方式：在浏览器上显示table形式

<script src="/jq/jquery-3.3.1.min.js"></script>

    <script>

        $(function(){

            $.ajax({

                type:"get",（请求方式）

                url:"./00 data.json",（请求地址）

                data:{},//请求参数 JSON格式

                data:"1d=10001&name=xiaoming", application/x-www-form-urlencoded （表单格式）

                contentType:"json", (请求格式 参数的格式)

                dataType:"json",(服务器返回数据格式)

                成功请求JSON中data数据

                success:function(data){

                    打印

                  console.log(data);

                  if(data.status===200){

                    var cls=data.data;

                    $("legend").text(cls.name);

                    var students=cls.student;

                    for (let index = 0; index < students.length; index++) {

                        const stu = students[index];

                        stu声明出JSON中内容

                        $(".data tbody").append("<tr><td>"+stu.id+"</td><td>"+stu.name+"</td></tr>");

                    }

                  }else{

                      console.log(data.msg);

                  }

                },

                不成功 err返回的是错误信息

                error:function(res,err){

                    console.log(err);

                }或

                error:function(res){

                   console.log(res);

                }

            })

第二种方式 jquery ajax请求

            url  [data]  succes  [datatype]

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

                if(data.status===200){

                    var cls=data.data;

                    $("legend").text(cls.name);

                    var students=cls.student;

                    for (let index = 0; index < students.length; index++) {

                        const stu = students[index];

                        stu声明出JSON中内容

                        $(".data tbody").append("<tr><td>"+stu.id+"</td><td>"+stu.name+"</td></tr>");

                    }

                  }else{

                      console.log(data.msg);

                  }

            }

            )

        })

    </script>

HTML内容：

<legend></legend>

    <table class="data">

       

        <thead>

            <th>ID</th>

            <th>name</th>

        </thead>

        <tbody>

            <!-- <tr></tr> -->

        </tbody>

    </table>