前端从零单排之AJAX(第一期)

2024年4月6日 158次阅读 来源: duian

ajax的运用一向是以jQuery为主，关于底层的完成有点不明觉厉。作为一个有寻求的前端，这是不可以吸收的。便让我们今晚好好走进ajax的内心世界。

ajax 两大特征：

  • 在不革新页面的情况下向服务器端发送要求
  • 从服务器端吸收数据，并举行对应的逻辑处置惩罚

ajax 要求流程
step-1
起首先竖立一个异步要求对象

var httpRequest
if(window.XMLHttpRequest) {
   httpRequest = new XMLHttpRequest();
} else if(window.ActiveXObject) {
   httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

step-2
第一步的httpRequest对象设置已好了。然后我们要做的就是设置我们的要求被响应时的行动

httpRequest.onreadystatechange = function(){
    if(httpRequest.readyState === 4) {
       // everything is good, the response is received   
    } else {
      // still not ready
    }
}

readyState 申明

  • 0 （’UNSENT’,未初始化，即httpRequest对象已建立，然则open()要领还没挪用）
  • 1 (‘OPENED’,载入中， 即要求已open()过了，然则send()要领还没挪用)
  • 2 (‘HEADERS_RECEIVED’,已载入， 即send()过了，然则data数据还没返回)
  • 3 (‘LOADING’,动态交互，即data数据已吸收到了，然则responseText内容会猎取)
  • 4 (‘DONE’,完成， 即悉数data数据吸收胜利)

Response 属性

  • status (返回状况码，比方1/2/3/4/500)
  • statusText(返回状况文本，比方OK)
  • responseType(返回响应的状况， 比方’loading’,’done’)
  • response (返回响应的详细内容)
  • responseText(返回响应的详细文本内容)

step-3
然后来写一个简朴的demo

<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
  Make a request
</span>


<script>
(function(){
    var httpRequest;
    if (window.XMLHttpRequest) {
        httpRequest = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }

    if (!httpRequest) {
        alert('Giving up :( (Cannot create an XMLHTTP instance');
        return false;
    }
    httpRequest.onreaystatechange = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                alert(httpRequest.responseText);
            } else {
                alert('There was a problem with the request.');
            }
        }
    }
    httpRequest.open('GET', url);
    httpRequest.send();

})()
</script>

爱心小贴士：

  • 假如发送要求以后返回的数据格式为XML时，那末在IE中须要设置http-header头， “Content-Type”: application/xml 不然IE会抛出一个”Object Expected”的毛病
  • 假如你没有http-header Cache-Control: no-cache, 那末浏览器则会缓存要求，不会再发送新的要求。固然你还可以运用时间戳之类的情势来使每次要求的url差别，来绕过缓存题目。
  • 在闭包中举行ajax相干的操纵。

返回的数据为JSON时，应对数据举行响应的剖析

function alertContents() {
    if(httpRequest.readyState === 4) {
        if(httpRequest.status === 200) {
            var response = JSON.parse(httpRequest.responseText);
        } else {
            alert('There was s problem with the request.');
        }
    }
}

参考资料

    原文作者：duian
    原文地址: https://segmentfault.com/a/1190000000492937
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞