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 version="1.0" encoding="utf-8"?>//XML声明。指定了xml的版本和字符编码
<person>
    <name>Jeremy Keith</name>
    <website>http://www.baidu.com</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
  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. 后退按钮
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值