js框架开发剖析--AJAX
2013-11-07 11:30
435 查看
XMLHttpRequest
XMLHttpRequest的功能是在后台跟服务器实现交互,结合DOM的操作,可以实现页面的局部刷新。通体XMLHttpRequest的请求要求都是同源的,对于跨域的操作可以使用动态插入script标签等形式来实现。
历史
XMLHttpRequest也是浏览器技术战争的产物。最早提出这个概念的是微软,他在1999年发布的IE5中,使用了ActiveX实现了这一功能。直到2006年XMLHttpRequest才进入了W3C的工作草案。请求对象
像jQuery这样的框架让Ajax看上去如此的简单,但是幕后却有非常复杂的工作:1.处理微软和W3C实现上的差异
2.为不同的请求数据和方法设置不同的头部信息
3.通过回调函数处理请求状态的变化
4.处理不同浏览器之间的差异
创建一个请求对象如下:
// W3C compliant new XMLHttpRequest(); // Microsoft new ActiveXObject("Msxml2.XMLHTTP.6.0"); new ActiveXObject("Msxml2.XMLHTTP.3.0"); new ActiveXObject('Msxml2.XMLHTTP');
IE浏览器有不同的MSXML版本,关于版本的不同和选择参考文章Using the right version of MSXML in Internet Explorer
jQuery的实现方法如下:
xhr: window.XMLHttpRequest && (window.location.protocol !== "file:" || !window.ActiveXObject) ? function() { return new window.XMLHttpRequest(); } : function() { try { return new window.ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} },
其中也阻止了IE7使用XMLHttpRequest,因为它不能加载本地文件。
发送请求
发送一个请求主要有下面几个部分1.给onreadystatechange设置回调函数
2.调用请求对象的open方法
3.设置请求头信息
4.调用请求对象的send方法
onreadystatechange可以监听请求状态的变化,主要有一下状态:
0: Uninitialized: 没有调用open方法前
1: Loading: 没有调用send方法前
2: Loaded: 调用了send方法,获取了响应的头信息
3: Interactive: 下载responseText数据
4: Completed: 请求结束
open方法用来初始化HTTP方法,设置URL,确定是否使用异步请求。使用request.setRequestHeader(header, value)方法可以设置请求的头。使用send(postBody)方法可以发送post的数据内容。
下面的代码是基于之前定义的xhr对Ajax的简单实现:
function ajax(url, options) { function successfulRequest(request) { return (request.status >= 200 && request.status < 300) || request.status == 304 || (request.status == 0 && request.responseText); } function respondToReadyState(readyState) { if (request.readyState == 4 ) { if (successfulRequest(request)) { if (options.success) { options.success(request); } } else { if (options.failure) { options.failure(); } } } } function setHeaders() { var headers = { 'Accept': 'text/javascript, text/html, application/xml, text/xml, */*' }; for (var name in headers) { request.setRequestHeader(name, headers[name]); } } var request = xhr(); if (typeof options === 'undefined') { options = {}; } options.method = options.method ? options.method.toLowerCase() : 'get'; options.asynchronous = options.asynchronous || true; options.postBody = options.postBody || ''; request.onreadystatechange = respondToReadyState; request.open(options.method, url, options.asynchronous); setHeaders(); request.send(options.postBody); }
接口
我们将要设计的接口提供了get,post和ajax方法,如下:turing.net.get('/example', { success: function(r) { alert(r.responseText); } });
查看代码的详情请点击turing.net.js
预告
下一篇我将继续讲述ajax的原理,并且演示如何实现一个跨域的请求。相关文章推荐
- js框架开发剖析--AJAX(跨域)
- ajax的js开发的目录规范 (目录框架下载)
- ext框架插件协助JSEclipse开发ajax的配置过程
- [转]prototype.js开发笔记(针对Ajax的JS框架Prototype的使用介绍)
- Ajax 开发框架property 1.5 js
- [转]prototype.js开发笔记(针对Ajax的JS框架Prototype的使用介绍)
- js+ asp.Net ajax开发163邮箱效果(列表底色、多选拖动等)--列表底色随鼠标移动变化
- 移动WebApp开发 JS框架对比
- 移动WebApp开发 JS框架对比
- 分享一个基于 Node.js 的 Web 开发框架 - Nokitjs
- java web开发:Ajax技术(四):DWR——WEB远程调用框架
- Node.js 入门手册:那些最流行的 Web 开发框架
- 十大加速Ajax开发的框架
- 初识ReactJS的组件化开发(五):ajax加载评论列表,并定时获取更新
- 常用Node.js开发工具、开发包、框架等总结
- Scrapy框架结合Spynner采集需进行js,ajax动态加载的网页并提取网页信息(以采集微信公众号文章列表为例)
- 【后台】开发框架之Node.js
- 移动开发框架,Hammer.js 移动设备触摸手势js库
- 移动开发框架,第【二】弹:Hammer.js 移动设备触摸手势js库