Ajax 基本知识

一. Ajax 用途

初初接触到这个ajax时对它真是一头雾水,只知道干前端必须要会的一个东西,网上看的资料也是一知半解,对于ajax的用处了解的不深入,当初也只是了解了解概念和怎么实现,对于它真正的用途并没有深思,后来在实际的项目中才知道ajax的用途。

Ajax 有什么用?举个简单的例子,假设要弄一个注册的页面,现在的需求是如果用户名已经存在了,服务器告诉浏览器"用户名已经存在",这个在没有ajax怎么实现呢?如果没有ajax,当服务器发现用户名已经存在时候,只能通过返回一个页面给浏览器,浏览器通过跳转到这个页面知道:"哦,原来用户名已经存在了",然后回到上一个页面继续注册。现在有了ajax就不需要这么麻烦了,服务器可以直接发送一个用户名已存在的信息给浏览器,浏览器在不刷新页面的的情况把这个信息直接展示在当前的页面上。

二. Ajax 技术背景

ajax的核心技术最早是由微软发现的,但是不知怎么的,微软并没有对它进行发展和推广,而是搁置一旁,反而是google催生了ajax的流行。

三. Ajax 包含技术

 Ajax(Asynchronous JavaScript and XML,异步的JavaScript和XML),ajax并不是一种新的语言或者技术,而是多种已有的技术的结合.它由下列技术组合而成。

HTML/XHTML —— 主要的内容表示语言
       CSS —— 为 HTML/XHTML 提供文本格式定义.
       XSLT —— 将 XML 转换为 XHTML(这个我没用过).
       DOM —— 使用 DOM 模型来交互和动态显示,对已载入的页面进行动态更新.
       XML —— 数据交换格式.
       XMLHttpRequest —— 用 XMLHttpRequest 来和服务器进行异步通信，是主要的通信代理.
      JavaScript —— 使用 Javascript 来绑定和调用,编写 Ajax 引擎的脚本语言.
      实际上,在 Ajax 解决方案中这些技术都是可用的,不过只有三种是必须的：HTML/XHTML、DOM 以及 JavaScript

四. Ajax 原理

Ajax原理:JavaScript有一个对象XMLHttpRequest,通过这个对象可以向服务器发送异步请求和解析服务器的响应,然后用JavaScript来操作DOM从而更新页面。其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,必须对 XMLHttpRequest有所了解.XMLHttpRequest 是 ajax 的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,就是 Javascript 可以及时向服务器提出请求和处理响应,而不阻塞用户,达到无刷新的效果。

五. XmlHttpRequest 对象 

1. XMLHttpRequest 对象的属性有:

onreadystatechange  每次状态改变所触发事件的事件处理程序.
responseText  从服务器进程返回数据的字符串形式.
responseXML   从服务器进程返回的DOM兼容的文档数据对象.
status    从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪).
    0**：未被始化
    1**：请求收到,继续处理
    2**：操作成功收到,分析、接受
    3**：完成此请求必须进一步处理
    4**：请求包含一个错误语法或不能完成
    5**：服务器执行一个完全有效请求失败
status Text   伴随状态码的字符串信息
readyState    对象状态值,对象状态值有以下几个:
    0 (未初始化) 对象已建立,但是尚未初始化(尚未调用 open 方法)
    1 (初始化) 对象已建立,调用 open 方法,连接已经建立,尚未调用send 方法
    2 (发送数据) send 方法已调用,但是当前的状态及 http 头未知
    3 (数据传送中) 已接收部分数据,因为响应及 http 头不全,这时通过 responseBody 和 responseText 获取部分数据会出现错误
    4 (完成) 数据接收完毕,此时可以通过 responseXml 和 responseText 获取完整的回应数据

2. Ajax的 readyState 状态值与状态码 status 区别

AJAX 状态值是指,运行AJAX所经历过的几种状态,无论访问是否成功都将响应的步骤,可以理解成为AJAX运行步骤.由AJAX对象与服务器交互时所得。

AJAX 状态码是指,无论AJAX访问是否成功,由 HTTP 协议根据所提交的信息,服务器所返回的 HTTP 头信息代码。

但是,由于各浏览器之间存在差异,所以创建一个 XMLHttpRequest 对象可能需要不同的方法.这个差异主要体现在 IE 和其它浏览器之间。

3. 创建XHR对象的函数通用写法(兼容浏览器):
    var xhr;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xhr=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }

4. XMLHttpRequest 对象用法

XMLHttpRequest 对象两个重要方法: 
1) open(method, url, async) 规定请求类型,URL 以及是否异步处理请求
    method: 请求的类型,GET 或 POST
    url: 文件在服务器上的位置,文件可以是任何类型,如 .txt 和 .xml,或者服务器脚本文件(在传回响应之前，能够在服务器上执行任务),如 .asp 和 .php
    async: true(异步) 或 false(同步)
2) send(string) 将请求发送到服务器
    string: 仅用于 POST 请求
例下:
    xhr.open("GET","ajax_info.txt",true);
    xhr.send();

对于open方法,有几点需要注意：
1) URL是相对于当前页面的路径,也可以用绝对路径
2) open方法不会向服务器发送真正请求,它相当于初始化请求并准备发送
3) 只能向同一个域中使用相同协议和端口的URL发送请求,否则会因为安全原因报错
真正能够向服务器发送请求需要调用send方法,并仅在POST请求可以传入参数(不需要则发送null),在调用send方法之后请求被发往服务器

请求发往服务器,服务器根据请求生成响应(Response),传回给XHR对象,在收到响应后相应数据会填充到XHR对象的属性,有四个相关属性会被填充：
1) responseText —— 从服务器进程返回数据的字符串形式.
2) responseXML —— 从服务器进程返回的 DOM 兼容的文档数据对象.
3) status —— 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪).
4) status Text —— 伴随状态码的字符串信息

在收到响应后第一步是检查响应状态,确保响应是否成功返回(状态为200),如下:
xhr.open('get','default.aspx','false'); //准备同步请求
xhr.send();
if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
   //do something
}else{
   //error handler
}
上面代码在发送同步请求的时候没问题,只有得到响应后才会执行检查 status 语句,但是在异步请求时,JavaScript 会继续执行,不等生成响应就检查状态码,这样我们不能保证检查状态码语句是在得到响应后执行,这时候我们可以检查 XMLHttpRequest 对象的 readyState 属性,该属性表示请求/响应过程中的当前活动阶段,每当 readyState 值改变的时候都会触发一次 onreadystatechange 事件,可以利用这个事件检查每次 readyState 变化的值,当为4的时候表示所有数据准备就绪,有一点我们需要注意：必须在 open 方法之前指定 onreadtstatechange 事件处理程序,如下:
xhr.onreadystatechange=function(){
     if (xhr.readyState==4 && xhr.status==200){
         //do something
     }else{
        //error handler
     }
}
xhr.open("GET","/try/ajax/ajax_info.txt",true);
xhr.send();

5. GET or POST?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用,然而,在以下情况中,请使用 POST 请求:
1) 向服务器发送大量数据(POST 没有数据量限制)
2) 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

一个简单的 GET 请求:
xhr.open("GET","/get_test",true);
xhr.send();
在上面的例子中,可能得到的是缓存的结果,为了避免这种情况,向 URL 添加一个唯一的 ID：
xhr.open("GET","/get_test?t=" + Math.random(),true);
xhr.send();

一个简单 POST 请求:
xhr.open("POST","/post_test",true);
xhr.send();
如果需要像 HTML 表单那样 POST 数据,使用 setRequestHeader() 来添加 HTTP 头.然后在 send() 方法中规定希望发送的数据：
xhr.open("POST","ajax_test.html",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("username=Mary&age=15");

setRequestHeader(header, value) 向请求添加 HTTP 头
header: 规定头的名称
value: 规定头的值

6. 异步 - true 或 false?

XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true。
对于 web 开发人员来说,发送异步请求是一个巨大的进步.很多在服务器执行的任务都相当费时.AJAX 出现之前,这可能会引起应用程序挂起或停止,但是通过 Ajax,JavaScript 无需等待服务器的响应,而是：
1) 在等待服务器响应时执行其他脚本
2) 当响应就绪后对响应进行处理

XMLHttpRequest 是完全用来向服务器发出一个请求的,它的作用也局限于此,但它的作用是整个ajax实现的关键,因为ajax无非是两个过程,发出请求和响应请求,并且它完全是一种客户端的技术,而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。

我们可以把服务器端看成一个数据接口,它返回的是一个纯文本流,当然,这个文本流可以是XML格式,可以是Html,可以是Javascript代码,也可以只是一个字符串,这时候,XMLHttpRequest向服务器端请求这个页面,服务器端将文本的结果写入页面,这和普通的web开发流程是一样的,不同的是,客户端在异步获取这个结果后,不是直接显示在页面,而是先由javascript来处理,然后再显示在页面。

点此跳转到Ajax的简单小例子