JS 5 任务总结

       成果链接：代码 https://github.com/814885760lp/JS-Task/tree/master
                         展示 https://814885760lp.github.io/JS-Task/Task2/CSS-13/Task13-1/Task13-1.html

任务耗时：本次任务从2019/09/28-2019/10/8  共耗时11天

技能脑图：

    官方脑图

        个人脑图

任务小结：

(1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象.

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

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

(4)发送`HTTP`请求.

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

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

var xmlHttp = new XMLHttpRequest();

xmlHttp.open('GET','demo.php','true');

xmlHttp.send()

xmlHttp.onreadystatechange = function(){

    if(xmlHttp.readyState === 4 & xmlHttp.status === 200){ }

}

ajax的优缺点

优点：

1、最大的一点是页面无刷新，用户的体验非常好。

2、使用异步方式与服务器通信，具有更加迅速的响应能力。

3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、不容易调试。

ajax中两种请求方式的区别

一. onreadystatechange

1. XMLHttpRequest对象有一个属性readyState，将其(xhr.readyState)打印后发现。进入onreadystatechange请求方式中时，可以打印其状态为2，状态为3，状态为4。

<button id="btn">请求纯文本</button>
    <script>
        let btn = document.getElementById('btn');
        btn.addEventListener("click",loadText);
        function loadText(){
            let xhr = new XMLHttpRequest();
            xhr.open('GET','sample.txt',true);
            xhr.onreadystatechange = function(){
                console.log("READYSTATE"+ xhr.readyState);
                console.log(this.responseText);
            }
            xhr.send();
        }    </script>

2. readyState状态码和HTTP状态码

• 如果在上方代码中的open方法下，打印readyState属性，可得到状态码1

3. 可以利用网络请求码和readyState状态码进行判断

• 当网络请求码为200（服务器成功返回网页），readyState状态码为4时（请求已完成，响应已就绪），方可打印请求的数据。如图，在readyState状态码3的情况下不会再打印请求返回的数据。

function loadText(){
            let xhr = new XMLHttpRequest();
            xhr.open('GET','sample.txt',true);
            console.log("READYSTATE"+ xhr.readyState);
            xhr.onreadystatechange = function(){
                console.log("READYSTATE"+ xhr.readyState);
                if(this.status == 200 && this.readyState == 4){
                    console.log(this.responseText);
                }else if(this.status == 404){
                    console.log("网页不存在");
                }
                
            }
            xhr.send();
        }

4. 如果此时将open中的路径改为一个错误路径，会产生如下效果

二. onload

1. 进入onload之后，只出现了状态码4。也就是说，只有处于状态码4，请求已完成，响应已就绪的情况下，才会进入onload。只要进入onload请求中，一定是已经到4这个状态了。

 function loadText(){
            let xhr = new XMLHttpRequest();
            xhr.open('GET','sample.txt',true);
            console.log("READYSTATE"+ xhr.readyState);
            //两种请求方式onload和onreadystatechange
            xhr.onload = function(){
                console.log("READYSTATE"+ xhr.readyState);
                console.log(this.responseText);
            }
            xhr.send();}

2. 此时如果修改open中的路径为错误路径的话，会出现如下状况。仍然会打印1和4，证明已经进入onload请求状态。这里报错的原因是，HTTP状态码不是200。

3. 实现页面尚未加载完成使，加载页面的实现（eg：进度条或转圈）。可用onprogress方法，打印readyState出现状态3

function loadText(){
            let xhr = new XMLHttpRequest();
            xhr.open('GET','sample.txt',true);
            console.log("READYSTATE"+ xhr.readyState);
            //两种请求方式onload和onreadystatechange
            xhr.onprogress = function(){
                console.log("测试加载状态READYSTATE"+ xhr.readyState);
            }
            xhr.onload = function(){
                console.log("READYSTATE"+ xhr.readyState);
                console.log(this.responseText);
            }
            xhr.send();
        }

三. 将请求到的纯文本附在dom中

xhr.onload = function(){
   document.getElementById('text').innerHTML = this.responseText;}