读书笔记"/>
Bulletproof Ajax 读书笔记
什么是Ajax
1. Ajax(Asynchronous Javascript and XML)的定义:一种不用刷新整个页面就可以与服务器通信的方法。
2. 与ajax相似的概念:
- flash;
- java applet :用java编写,可以嵌入在网页中;
- 框架(frame):如果用一组框架构建了一个页面,可以只单独更新其中一个框架;
- iframe:与frame的区别,frame是把网页切割成不同的牙面,而iframe是嵌入到页面中的一个新的页面;
- XMLHttpRequest对象:驱动Ajax的引擎
3. Ajax不是一种具体的技术,它是几种技术协同产生的方法:
- 服务器端语言:php,java,python;
- XML:服务器与浏览器之间进行数据交换的一种数据格式(不仅限于XML);
- HTML或XHTML+CSS+javascript;
- XMLHttpRequest对象
XMLHttpRequest对象
定义
一种用在服务器和客户端之间通讯的对象,依赖于javascript;
创建方法:
function getHTTPObject(){var xhr = false;/*chrome*/if(window.XMLHttpRequest){ //对象检测xhr = new XMLHttpRequest(); }else if(window.ActiveXObject){ /*IE*/xhr = new ActiveXObject("Microsoft.XMLHttp");}return xhr;
}
发送请求
创建XMLHttpRequest实例后,与服务器的通讯包含三个部分:
- onreadystatechange事件处理函数;
- open方法;
send方法。
- onreadystatechange:
在Ajax执行的过程中,服务器会通知客户端当前的通讯状态,这依赖于XMLHttpRequest对象的一个属性readystate。每次readystate的改变都会触发onreadystatechange函数; - open:
客户端向服务器发送一个请求,方法包含两个必选参数,请求类型和请求的文件在服务器上的位置。
- 请求类型:
Get: 将数据附加在URL上发送数据,对数据的大小有限制,而且由于数据在URL上所以安全性不够好。一般情况不发送数据是用GET。还有如果要对表单的结果页面加书签必须用GET;
Post: 对数据大小的限制比GET宽松。数据作为请求的一部分发送,因此数据对用户不可见; - 文件位置:URL
- 是否异步传输
- 用户名和密码
- 请求类型:
- send
open方法定义了请求的细节,send方法将已经待命的请求发送到服务器。
//一个完整的Get请求 var request=getHTTPObject(); request.onreadychanger=dosomething; request.open("Get","file.txt",true); request.send(null); //Get请求无需发送数据//一个完整的Post请求 var request=getHTTPObject(); request.onreadychanger=dosomething; request.open("Post","file.txt",true); request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");/*它会告诉服务器正在发送数据,而且数据已符合URL编码*/ request.send("name=jay+chou&message=hello+world");//每个名值对都符合URL编码,"+"表示空格
setRequestHeader:当浏览器向服务器发送请求时,会伴随请求发送一组首部信息(header)。这些首部信息是一系列描述请求的元数据。首部信息用来声明一个请求是Get还是Post.
setRequestHeader方法有两个参数,第一个参数定义了首部的名字,第二个参数表示要传递的首部的值。- onreadystatechange:
接受响应
用XMLHttpRequest的方法向服务器发送消息,同时根据该对象的属性来跟踪服务器和客户端之间的交互状态。
1. readyState : Ajax请求的当前状态
- 0:未初始化,还没有调用open方法;
- 1:正在加载,open方法已调用,send方法还未调用;
- 2:已加载完毕,send方法已调用,请求开始;(客户端向服务器发送响应)
- 3:交互中,服务器正在发送响应;HTTP头部信息已返回,报文主体部分消息未返回 (服务器向客户端发送响应)
- 4:响应发送完毕。
每次readyState 值的改变都会触发onreadystatechange函数:
onreadystatechange=dosomething;
2. status
与浏览器想服务器发送带首部信息的请求类似,服务器向浏览器发送的每一个响应也带有首部信息。首部信息包含了浏览器的相关信息以及文档信息。
三位数状态码(即status)是响应中最重要的首部信息,并且属于HTTP的一部分:
- 404:not found;
- 403 : 禁止访问;
- 500:内部服务器出错;
- 304 : 没有被修改(直接调用缓存);
200 : 一切正常(OK),说明浏览器成功的接收到了响应。
function dosomething(){if(request.readyState == 4){if(request.status == 200 || request.status == 304){// the response was sent successfully}else{//something went wrong!}}}
3.response
- responseText:包含了从服务器发送过来的数据,它是一个字符串;
- reresponseXML:只有当服务器发送了带有正确首部信息(MIME类型必须为text/xml)的数据时,reresponseXML属性才可用。
数据格式
当浏览器从服务器接受数据时,这些数据必须是以浏览器能理解的格式发送:XML、JSON、HTML.
XML
XML属于一种描述性语言(responseXML)
<?xml version="1.0" encoding="utf-8"?>//XML声明。指定了xml的版本和字符编码
<person><name>Jeremy Keith</name><website>;/website>
</person>
xml不能进行任何操作,它只是用来存数据,而不是对数据进行操作。例如,XML可以储存人的联系方式,而需要借助另一种编程语言(如javascript)获取xml文件中联系人的信息并把它显示在网页上。
优点:
- 通用的数据格式
- 灵活,易操作
- 可以用dom的方法来解析任何标记
缺点:
-从服务器端获取xml时必须确保正确的首部信息。如果文档类型不是application/xml,那么responseXML将是空的;
-dom解析效率低
- XSLT可以通过模版把xml转化成html,但不是所有浏览器都支持XSLT
JSON
Json创始人建议把Json当作xml的轻量级替代品,xml内容同样可以存储在Json中,他们都属于一种基于文本的数据描述方式。不同的是,xml使用的是开始标签和结束标签,而Json使用的是冒号,逗号和大括号。
Json不是一种需要javascript解释的数据格式,Json本身就是javascript。(responseText)
从Json中提取数据
var data=eval('('+request.responseText+')');
优点:
- 比xml更灵巧;
- 不需要首部信息;
- 可跨服务器传输。
缺点:
- 语法过于严谨;
- 不易阅读;
- 用eval函数解析json数据有风险。
HTML
优点:如果以xml或json的方法传递数据,必须转换成html才能在界面上显示,而直接用html格式传输可以省去这一步(responseText)。可通过innerHTML直接将数据插入到页面中,节省时间;
缺点:html不适合更新一个页面中的多个部分,而且非常依赖于非标准属性innerHTML。
Hjax
Hjax:可分离的ajax。产生原因是为了兼容浏览器没有(或禁用)javascript的情况;
渐进式改变
定义:在网页设计中,按照不同功能的重要性差异排出优先级。比如先确保网页的内容被读取,再在这基础之上改进页面设计。这些改进都是各自独立,彼此之间没有任何依赖。(如CSS)
分离式javascript
同css一样,应将javascript保存在外部文件中
渐进式改变和ajax
Hijax:创建向后兼容的ajax
- 首先创建一个常规网站,通过链接和表单向服务器请求和发送信息。每次点击链接或提交表单时整个页面会被刷新一次;
- 用DOM截获正向服务器请求或发送信息的链接和表单。通过xmlHttpRequest对象转发这些请求。这样每一次更新不需要刷新整个页面。
架构
- 从开始为ajax规划;
- 最后再实现ajax
Ajax的挑战
向后兼容:遵循渐进式改变的原则
文档和应用程序
- 连续性:连续交互;
- 数字游戏:尽可能支持所有用户。
Web服务
XmlHttpRequest对象的open方法只能向同域名下的资源发送请求,而获取第三方服务数据的方法(跨域):
- 公共编程接口(API):返回xml格式的数据;(存在同域名限制的问题————不懂)
- 代理(proxy):代理就是一个简单的网关(gateway),用它对请求进行转发。用自己的服务器作为第三方服务的代理。xmlHttpRequest对象向你自己的服务器请求某个文件,这个文件然后再向第三方服务器上的web服务器发送一个请求,由第三方服务器负责返回数据。这个数据最终会传回到xmlHttpRequest对象。
- 不足:请求和响应必须通过额外的网关来传输,这多出来的一步使数据传输的速度下降;
- 优点:不再需要javascript。
反馈
- Loading…………
- 刚刚发生了什么
浏览器行为
- 收藏书签;
- 后退按钮
更多推荐
Bulletproof Ajax 读书笔记
发布评论