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方法。

  1. onreadystatechange:
     在Ajax执行的过程中，服务器会通知客户端当前的通讯状态，这依赖于XMLHttpRequest对象的一个属性readystate。每次readystate的改变都会触发onreadystatechange函数；
  2. open:
     客户端向服务器发送一个请求，方法包含两个必选参数，请求类型和请求的文件在服务器上的位置。
     
     • 请求类型：
       Get: 将数据附加在URL上发送数据，对数据的大小有限制，而且由于数据在URL上所以安全性不够好。一般情况不发送数据是用GET。还有如果要对表单的结果页面加书签必须用GET；
       Post: 对数据大小的限制比GET宽松。数据作为请求的一部分发送，因此数据对用户不可见；
     • 文件位置:URL
     • 是否异步传输
     • 用户名和密码
  3. 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方法有两个参数，第一个参数定义了首部的名字，第二个参数表示要传递的首部的值。

接受响应

用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声明。指定了xml的版本和字符编码
<person>
    <name>Jeremy Keithname>
    <website>http://www.baidu.comwebsite>
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

1. 首先创建一个常规网站，通过链接和表单向服务器请求和发送信息。每次点击链接或提交表单时整个页面会被刷新一次；
2. 用DOM截获正向服务器请求或发送信息的链接和表单。通过xmlHttpRequest对象转发这些请求。这样每一次更新不需要刷新整个页面。

架构

1. 从开始为ajax规划；
2. 最后再实现ajax

Ajax的挑战

向后兼容：遵循渐进式改变的原则

文档和应用程序

1. 连续性：连续交互；
2. 数字游戏：尽可能支持所有用户。

Web服务

XmlHttpRequest对象的open方法只能向同域名下的资源发送请求，而获取第三方服务数据的方法（跨域）：

1. 公共编程接口（API）：返回xml格式的数据；（存在同域名限制的问题————不懂）
2. 代理（proxy）：代理就是一个简单的网关（gateway），用它对请求进行转发。用自己的服务器作为第三方服务的代理。xmlHttpRequest对象向你自己的服务器请求某个文件，这个文件然后再向第三方服务器上的web服务器发送一个请求，由第三方服务器负责返回数据。这个数据最终会传回到xmlHttpRequest对象。
   
   • 不足：请求和响应必须通过额外的网关来传输，这多出来的一步使数据传输的速度下降；
   • 优点：不再需要javascript。

反馈

1. Loading…………
2. 刚刚发生了什么

浏览器行为

1. 收藏书签；
2. 后退按钮