博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AJAX原理及XMLHttpRequest对象分析
阅读量:4673 次
发布时间:2019-06-09

本文共 2330 字,大约阅读时间需要 7 分钟。

今天的主题是前端都了解的AJAX,但其中都有哪些知识点,还需要深入分析。

首先揭示AJAX的字面意思,Asynchronous Javascript And XML,通俗点就是“异步Javascript和XML”。

那有同步的吗?曾经的form提交并转到另一个页面刷新就是这种‘同步’的案例,有了AJAX后,便可以实现网页不提交(刷新)更新网页内容。

其实质便是依赖异步的Javascript请求网络,响应返回后,通过Javascript操作DOM接口更新HTML节点内容。

而这个能够实现异步的Javascript对象便是XMLHttpRequest。

真正实现异步的并不是XMLHttpRequest对象本身,而且浏览器内核会针对XHR对象的请求另起一个线程进行处理,处理完成后将回调对象放入JS队列。

下面介绍一些XMLHttpRequest对象的基本内容。

XMLHttpRequest对象在W3C标准下提供了很多属性。其中包括:

onreadystatechange 用于监听readyState状态变化

reponseText 响应返回文本

reponseXML   响应格式化为XML返回内容

status HTTP状态码

statusText HTTP状态码文本值

readyState XMLHttpRequest对象的状态

上述这些都是经常用到的属性,其中两个状态值再分类描述一下:

status:

1xx:服务器临时响应

2xx:服务器成功响应

3xx:服务器重定向

4xx: 客户端请求错误

5xx: 服务器内部错误

readyState :

0:XMLHttpRequest对象已实例化,但未初始化open

1:对象已初始化open,但未send

2:对象已send,但status状态未知

3:对象已接收到部分数据

4:对象成功接收完成数据

通过上面介绍之后,我们可以利用XMLHttpRequest来实现一段异步请求并刷新局部页面的功能。

这里不考虑XMLHttpRequest在浏览器间的兼容性。

var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){    if(xhr.readyState == 4 && xhr.state == 200){        handleHTML(xhr.responseText);    }}xhr.open('get', url, true);
xhr.send();

上例就是一个简单的XMLHttpRequest对象使用。还可以使用post方式实现类似form数据的提交。

var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){    if(xhr.readyState == 4 && xhr.state == 200){        handle(xhr.responseText);    }}xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xhr.send("param1=1&param2=2");

上面是XMLHttpRequest Level 1的一些使用方式。虽然功能简单,但是解决了早期很多问题,主要包括:

1.XMLHttpRequest是异步的,请求无需等待,可以提供良好的体验;

2.无需刷新页面,可提高网页加在效率,降低服务器压力;

3.解决了以往需要依靠隐藏iframe实现异步请求的问题。

但是依然存在一些缺陷,比如:

1.受到同源策略的限制,无法实现跨域请求;

2.无法实现文件的上传及其进度;

3.无法获取服务器二进制数据;

4.自身不支持超时处理。

针对上述问题,Level 2还未出来前,前端一直采用特殊的作法,针对每一点:

1.采用JSONP,即<script>标签避开同源策略,实现跨域请求(JSOP知识点有可扩展空间)

2.未知

3.修改mimeType将二进制数据伪装成text,然后再代码中还原二进制数据(mimeType: 'text/plain; charset=x-user-defined')

4.添加setTimeout处理

但Level 2出来以后,上述这些问题都已解决,而且扩展了一下属性:

1.responseType/response,可支持二进制数据,ByteArray/Blob/File;

2.添加了xhr.upload对象,支持上传,还有progress事件可监听上传下载进度。

下面针对上传贴出一个小例子,在此基础上配合服务器编程可实现大文件断点续传。

var xhr = new XMLHttpRequest();xhr.open('POST', url, true);xhr.onload = function (e){    // 当前文件块上传完,可开始上传下一块}xhr.upload.onprogress = function(e){// e.loaded 当前文件块上传字节数    // e.totalSize 当前文件块总字节数} // 可设置一定超时,如果超时可调节发次发送的文件块大小 xhr.send(trunck);

以上是对XMLHttpRequest对象的大概分析,其规范中包括大量属性和接口,请参考对应内容。

 

转载于:https://www.cnblogs.com/tesky0125/p/4619561.html

你可能感兴趣的文章
「Linux」VMware安装centos7(一)
查看>>
Java中模拟POST上传文件
查看>>
Ubuntu 中sendmail 的安装、配置与发送邮件的具体实现
查看>>
时隔2月,我的第二篇
查看>>
[导入]C++ OpenGL底层和C# GUI无缝联合!
查看>>
调试程序Bug-陈棚
查看>>
STM32 寄存器库和固件库
查看>>
第11周表格
查看>>
linux运维云计算课程学习,Linux云计算面试时遇到的问题
查看>>
Abiword对话框资源
查看>>
跟我一起写 Makefile
查看>>
C# uri
查看>>
GPS定位 测试
查看>>
前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查
查看>>
探索从 MVC 到 MVVM + Flux 架构模式的转变
查看>>
tornado的异步效果
查看>>
*2.3.2_加入env
查看>>
JS中SetTimeOut和SetInterval方法的区别?
查看>>
Protocol Buffers proto语言语法说明
查看>>
Hibernate双向一对一对象关系模型映射
查看>>