高性能javascript学习笔记系列(6) -ajax
参考 高性能javascript
javascript高级程序设计
ajax基础 ajax技术的核心是XMLHttpRequest对象(XHR),通过XHR我们就可以实现无需刷新页面就能从服务器端读取数据
var xhr = new XMLHttpRequest(); //只支持IE7以及更高的版本
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if( (xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 ) {
//成功
} else {
//失败
}
}
};
xhr.open("get","test.html",false); //第三个参数代表发送同步请求还是异步请求 false代表同步 true代表异步 open方法选择请求的类型 请求的URL 是否发送异步请求
xhr.send(null);
上面是一个简单的创建XHR对象 并且发送get请求的例子
readyState属性 表示请求/响应过程的当前活动阶段
- 0:初始化阶段 尚未调用open方法
- 1:启动 已经调用open()方法 尚未调用send方法
- 2:发送 已经调用send方法,但是未收到响应
- 3:接收 已经接收到部分的响应数据
- 4: 完成 已经接收到全部的响应数据,而且可以在客户端使用
在接收到响应后,响应的数据会自动的填充XHR对象的属性
responseText 作为响应主体被返回的文本
status 响应的HTTP状态
statusText HTTP状态的说明
请求数据
(1)XHR 缺点XHR无法从外域请求数据 get请求的数据数据会被浏览器缓存起来
(2)动态脚本注入(jsonp) 在页面中创建一个脚本标签并且设置它的src属性 然后将它添加到页面中 它可以从外域请求数据,但是动态脚本控制提供的控制是有限的,不能设置头信息,参数传递的方式也只能GET方式,不能设置请求的超时处理或者重试 响应的消息必须是可执行的js代码 也就是你想请求的任何格式的数据都必须要封装在一个回调函数中
(3) Multipart XHR (MXHR) 允许客户端只用一个HTTP请求就可以从服务端向客户端传送多个资源,通过在服务端将资源打包成双方约定的字符串分割的长字符串发送给客户端,然后在客户端去处理这个长字符串,根据提供它的mime-type类型和其他信息解析出每个资源 但是通过这种方式获取的数据无法被浏览器缓存,但是这种方式能很好的减少http请求
发送数据
(1)XHR 可以选择post 和 get两种方式向服务端发送数据 get请求是将请求信息包含在url中 post请求将请求信息包含在请求体中,下面是一个简单的发送post请求的函数
function xhrPost(url,params,callback) {
var req = new XMLHttpRequest(); req.onerror = function(){
setTimeout(function(){
xhrPost(url,params,callback);
},1000);
} //请求失败 req.onreadystatechange = function() {
if(req.readyState == 4) {
if(callback && typeof callback === 'function') {
callback();
}
}
}
req.post("POST",url,true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//数据返回服务器的编码类型时url编码 服务器端知道如何解析数据
req.setRequestHeader("Content-Length",params.length);
req.send(params.join('&'));
}
(2)Beacons 通过js创建一个新的Image对象,并把src属性设置为服务器上的脚本url(url中包含着需要向服务器端传送的数据) 但是这种方式只能发送get请求,并且在服务端接收到数据想要获取响应信息的方式也有限
提高ajax性能
缓存数据
(1)客户端发送响应的请求头确保响应会被浏览器缓存起来
在请求头中设置expires字段 规定在特定的时间之前 访问该url使用缓存
(2)在客户端将获取的信息缓存到本地,从而避免再次的发起请求
通过将url和请求的数据做成键值对的方式存储在本地
var localCache = {} function xhrRequest(url,callback) {
if(localCache[url]) {
callback.success(localCache[url]);
return;
} var req = new XMLHttpRequest();
req.onerror = function() {
callback.error();
} req.onreadystatechange = function() {
if(req.readyState == 4 ) {
if(req.responseText == "" || req.status == '404') {
callback.error();
return;
}
localCache[url] = req.responseText;
callback.success(req.responseText);
}
}
req.open("GET",url,true);
req.send(null);
}
高性能javascript学习笔记系列(6) -ajax的更多相关文章
- 高性能javascript学习笔记系列(2)-数据存取
参考 高性能javascript Tom大叔深入理解javascript系列 相关概念 1.执行上下文 当控制器转到ecmascript可执行代码的时候,就会进入一个执行上下文,执行上下文是以堆栈 ...
- 高性能javascript学习笔记系列(1) -js的加载和执行
这篇笔记的内容主要涉及js的脚本位置,如何加载js脚本和脚本文件执行的问题,按照自己的理解结合高性能JavaScript整理出来的 javascript是解释性代码,解释性代码需要经历转化成计算机指令 ...
- 高性能javascript学习笔记系列(5) -快速响应的用户界面和编程实践
参考高性能javascript 理解浏览器UI线程 用于执行javascript和更新用户界面的进程通常被称为浏览器UI线程 UI线程的工作机制可以理解为一个简单的队列系统,队列中的任务按顺序执行 ...
- 高性能javascript学习笔记系列(4) -算法和流程控制
参考高性能javascript for in 循环 使用它可以遍历对象的属性名,但是每次的操作都会搜索实例或者原型的属性 导致使用for in 进行遍历会产生更多的开销 书中提到不要使用for in ...
- 高性能javascript学习笔记系列(3) -DOM编程
参考 高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和ja ...
- JavaScript学习笔记系列2:Dom操作(一)
一.什么是Dom? DOM------>Document Object Model 直接翻译就是文档对象模型. DOM------>定义了表示和修改文档所需的对象.这些对象的行为和属性以及 ...
- 高性能javascript 学习笔记(1)
加载和运行 管理浏览器中的javascript代码是个棘手的问题,因为代码运行阻塞了其他浏览器处理过程,诸如用户绘制,每次遇到<script>标签,页面必须停下来等待代码下载(如果是外部的 ...
- JavaScript学习笔记系列1:JavaScript的是什么?
一.JS是什么? JavaScript作为Netscape Navigator浏览器的一部分首次出现在1996年.它最初的设计目标是改善网页的用户体验. 作者:Brendan Eich 期初JavaS ...
- Dynamic CRM 2013学习笔记 系列汇总
这里列出所有 Dynamic CRM 2013学习笔记 系列文章,方便大家查阅.有任何建议.意见.需要,欢迎大家提交评论一起讨论. 本文原文地址: Dynamic CRM 2013学习笔记 系列汇总 ...
随机推荐
- 【Win10应用开发】自适应磁贴中的分组
老周在上一篇文章中介绍过了自适应磁贴的基本结构,以及给大家演示了一些例子. 本文老周给大伙伴们说说自适应磁贴的另一个特点——分组呈现. 当磁贴的内容被分组后,每个组中的内容就会被视为一个整体.比如某磁 ...
- 【转】WPF 单选的Checkbox
今天同事要在DataGrid里用单选的Checkbox,我感觉很多余,因为正常DataGrid就可以单选,为什么还要加一列Checkbox,但是人家要求再那里,我就告诉他,可以用RadioButton ...
- px、dp与sp的区别以及换算
1.px 即像素,1px代表屏幕上的一个物理像素点. 2.dp dip:device independent pixels(设备独立像素),dp与dip一样,不同的设备有不同的显示效果,一般为了支持W ...
- Android okHttp网络请求之Retrofit+Okhttp+RxJava组合
前言: 通过上面的学习,我们不难发现单纯使用okHttp来作为网络库还是多多少少有那么一点点不太方便,而且还需自己来管理接口,对于接口的使用的是哪种请求方式也不能一目了然,出于这个目的接下来学习一下R ...
- 外网访问原理分析 - 每天5分钟玩转 OpenStack(105)
本节我们会将上节创建的 ext_net 连接到 router,并验证内外网的连通性. 更重要的,我们会分析隐藏在表象之下的原理. 将外网连接到 Neutron 的虚拟路由器,这样 instance 才 ...
- Linux安装Node.js
安装环境:Ubuntu:x86_64 Node.js 官网:https://nodejs.org 下载Node.js: wget https://nodejs.org/dist/v4.4.3/node ...
- Java 8新特性-2 接口定义增强
为了解决当原有的接口中方法不足时,向原有的接口中添加新的方法,该接口下的N多实现类也需要重写该方法的问题!Java8引入了接口定义增强概念! Java8 打破了原有的接口的方法定义: 公共的.抽象的 ...
- ES6 - Note4:Class类
1.Class类的介绍 在ES6中新增了Class类的概念,让语法看起来更像是面向对象编程,其实这可以说是一个语法糖,ES5可以做到Class绝大部分功能,但也有一些不同.在ES6以前,可以通过构造函 ...
- 通过SSH连接linux服务器
SSH 为 Secure Shell 的缩写,由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为建立在应用层和传输层基础上的安全协议.SSH 是目前较可靠,专 ...
- 关于z-index鲜为人知的事情
关于z-index很少有人去深入的了解它,因为它看起来一点儿也不复杂,不就是谁的数字大,谁就显示在前面吗?然而今天所摘录的这篇博文,让我震惊了.我承认我从来没有花时间去看具体的z-index相关文档, ...