Practical Training Ajax-原生

本篇内容为:原生Ajax的含义、解析、课上代码和创建的Ajax、以及效果图.

首先是对Ajax进行的解析:

(1) 含义
ajax 的全称:Asynchronous Javascript And XML。异步传输+js+xml。所谓异步,在这里
简单地解释就是:向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等
到有了结果它自己会根据设定进行后续操作,与此同时,页面是不会发生整页刷新的,提高了用户
体验。
(2) 创建步骤
1) 创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
2) 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
3) 设置响应 HTTP 请求状态变化的函数
4) 发送 HTTP 请求
5) 获取异步调用返回的数据
6) 使用 JavaScript 和 DOM 实现局部刷新

课堂原生Ajax.html代码:(整页代码内容)

<!-- 整理代码:shift+alt+f -->
    <script>
        window.onload = function () {
            // 1)创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
            var request = new XMLHttpRequest();
            // 2) 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
            request.open("get", "./00 data.json");
            // 3) 设置响应 HTTP 请求状态变化的函数
            request.onreadystatechange = function (res) {
                // 第五步和第六步都在函数里
                // 5) 获取异步调用返回的数据
                // console.log(res);
                // request.status
                if (request.status === 200 && request.readyState === 4) {
                    // console.log(request.responseText);
                    // console.log(request.responseXML);
                    // parse 对语法进行解析  responseText 回复信息
                    var data = JSON.parse(request.responseText);
                    // console.log(data);
                    // 6) 使用 JavaScript 和 DOM 实现局部刷新
                    if (data.status===200) {
                        var cls = data.data;
                        document.querySelector("h1").innerText = cls.name;
                    }else{
                        console.log(data.msg);
                    }
                }
            }
            // 4) 发送 HTTP 请求
            request.send();
        }
    </script>
</head>
<body>
    <h1></h1>
</body>

onreadystatechange什么意思?

onreadyStateChange事件是在readyState属性发生改变时触发的,readyState的值表示了当前请求的状态,在事件处理程序中可以根据这个值来进行不同的处理。

readyState有五种可取值0:尚未初始化,1:正在加载,2:加载完毕,3:正在处理;4:处理完毕。

request.readyState === 4  是代表的这个事件的第4步

 

00 data.json:(json内容可以理解为文本。):

Practical Training Ajax-原生

 

Ajax-json:

 // 这个是错误为0

    // "error":0,

// 先判断状态 在返回数据

"status":200,状态码

"status":200,

    "data":{

       

    },

    "msg":"错误信息"

 

效果为:

Practical Training Ajax-原生

 

上一篇:HD Verb Table


下一篇:Ajax