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

Mertens 发布于2019-08-21 12:17 / 597人阅读

摘要：作为一个有追求的前端，这是不可以接受的。两大特性在不刷新页面的情况下向服务器端发送请求从服务器端接收数据，并进行对应的逻辑处理请求流程首先先建立一个异步请求对象第一步的对象设置已经好了。在闭包中进行相关的操作。

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


  Make a request

爱心小贴士：

如果发送请求之后返回的数据格式为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.");
        }
    }
}

参考资料

MDN AJAX

MDN AJAX Getting Started

Ajax Mistakes

服务器托管专线服务从零开始搭建前端数据监控系统 web前端 ajax ajax前端测试工具 ajax前端数据数组代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87537.html

前端从零单排之Gulp(第二期)

摘要：是个类似于的前端工作流工具，今天就简单的介绍一下和一些我的使用感受在中安装全局切换到你的前端工作目录下确保你的前端工作目录下有这个文件然后就已经安装好了，马上就可以进入简单的配置了。但是在使用的工作之中会遇到一些问题。 gulp 是个类似于grunt的前端工作流工具，今天就简单的介绍一下gulp和一些我的使用感受 Installing gulp 在Terminal中安装全局gulp...

xiaolinbang 2019-08-21 12:17 评论0 收藏0
从零单排之CSS3

摘要：概览大法好今夜秋风阵阵，雾霾层层。布局选择多媒体，字体响应就是屌。说起来条目繁多，乍看之下与之前比起来复杂了好多。圆角指的即使一般正式的写法为效果请看任意一个按钮即可写到此处不禁跟大家说，最好还是配合预编译来写。 CSS3 概览 showImg(https://segmentfault.com/img/bVddDt); CSS3大法好今夜秋风阵阵，雾霾层层。不禁让人想作诗，不过...

刘福 2019-08-28 17:59 评论0 收藏0
前端从零单排之LESS（第四期)

摘要：函数更多的用处在于封装一些需要加前缀的属性，或是多个参数的属性，同时命名一定要足够的语义化。适当嵌套，以保持的优雅。有时要考虑兼容性，需要避免编译某条属性，方法即在值的前面加一个符号具体如下安装同时推荐在线编译网站，能够实时看到效果。 LESS 是一门CSS预编译语言，犹记得当初打算使用CSS预编译语言的时候，可选的有SASS、LESS、Stylus三门，刚好那个时候在学习bootst...

Drummor 2019-08-28 17:55 评论0 收藏0
从零开始单排学设计模式「UML类图」定级赛

摘要：从零开始单排学设计模式的国服排位之旅，今天正式开启目前段位定级赛这篇文章来总结下类图，本来不打算讲类图的，因为我在学习设计模式的时候，一遇到有关的就会自动忽略，一看感觉就很复杂。关联关系用实现箭头来表示。阅读本文大概需要 3.5 分钟。本篇是设计模式系列的开篇，虽然之前也写过相应的文章，但是因为种种原因后来断掉了，而且发现之前写的内容也很渣，不够系统。所以现在打算重写，加上距离现...

Loong_T 2019-08-16 15:04 评论0 收藏0
从零单排系列之写一个类vue框架(一)

摘要：因为我希望这是一个系列的文章，所以开始之前先简单说一下，我几乎没用过这个框架写过项目，所以文章中难免会有一些比较外行的说法。先整理用法，然后再整理自己的框架。因为我希望这是一个系列的文章，所以开始之前先简单说一下，我几乎没用过vue这个框架写过项目，所以文章中难免会有一些比较外行的说法。当然，我用过一些时间的angular，也曾经解决过一些同行们vue方面的问题。所以如果有人原因看的...

raise_yang 2019-08-23 18:26 评论0 收藏0