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

时间 2019-12-04

标签前端单排 ajax 一期栏目 Ajax 繁體版

原文原文链接

ajax的使用一直是以jQuery为主，对于底层的实现有点不明觉厉。做为一个有追求的前端，这是不能够接受的。便让咱们今晚好好走进ajax的心里世界。前端

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
而后来写一个简单的demoapp

<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时，应对数据进行相应的解析url

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.');
        }
    }
}

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

参考资料