JavaScript之AJAX:原生ajax入门

来源:互联网 发布:旧金山和奥克兰 知乎 编辑:程序博客网 时间:2024/06/17 11:59

背景

      传统的Web应用允许用户端填写表单(form),当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单,然后送回一个新的网页,但这个做法浪费了许多带宽,因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求,应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。

      2005年2月18号,一位大佬,名叫Jesse James Garrett(杰西·詹姆斯·贾瑞特),发表了一篇文章叫做“Ajax: A new Approach to Web Applications”,介绍了一种技术叫做Asynchronous JavaScript and XML,这项技术能够向服务器请求额外的数据而不需要重新加载页面,这样就可以部分请求数据而不需要刷新整个页面,不仅仅节约了大量的带宽,还加快了响应速度。

--摘自维基百科并稍作修改

XHR

      XHR全称是XMLHttpRequest,可扩展超文本传输请求,是一个API,它通过URL在客户端和服务器端传输数据而不需要使页面刷新,提供了对 HTTP 协议的完全的访问,是AJAX技术的核心对象,AJAX的请求过程可以据此分为四个部分:

1 创建 XMLHttpRequest 对象2 连接后台服务器3 发送数据请求4 接收服务器的响应数据;

      XHR对象在IE5中第一次引入,对象是通过MSXML库中的一个ActiveX对象实现的。因而IE中可能遇到三种不同版本的XHR对象:MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。IE7+、Firefox、Opera、Chrome 和Safari 都支持原生的XHR 对象。

一、创建XMLHttpRequest 对象

      如果要兼容IE7之前的浏览器的话,要根据不同的XHR版本来编写函数,再创建ActiveXObject对象,而其他的浏览器,则可以直接创建 XMLHttpRequest 对象。代码如下:

 1 function createXHR(){ 2     if (typeof XMLHttpRequest != "undefined"){ 3         return new XMLHttpRequest(); 4     } else if (typeof ActiveXObject != "undefined"){ 5         if (typeof arguments.callee.activeXString != "string"){ 6             var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", 7                     "MSXML2.XMLHttp"], 8                 i, len; 9             for (i=0,len=versions.length; i < len; i++){10                 try {11                     new ActiveXObject(versions[i]);12                     arguments.callee.activeXString = versions[i];13                     break;14                 } catch (ex){15                     //跳过16                 }17             }18         }19         return new ActiveXObject(arguments.callee.activeXString);20     } else {21         throw new Error("No XHR object available.");22     }23 }24 var xhr = createXHR();

 

      不过现在一般很少人想要兼容IE7之前的版本了,于是可以简化如下:

var xhr = new XMLHttpRequest();

二、连接服务器与发送数据

      XMLHttpRequest连接服务器也不难:

xhr.open(method, url, async, user, password)

      使用以上的open方法来初始化一个请求即可,open方法的参数说明如下:

method:请求所使用的HTTP方法; 例如 "GET", "POST", "PUT", "DELETE"等. 如果下个参数是非HTTP(S)的URL,则忽略该参数.url:该请求所要访问的URLasync:一个可选的布尔值参数,默认为true,意味着是否执行异步操作,如果值为false,则send()方法不会返回任何东西,直到接受到了服务器的返回数据。如果为值为true,一个对开发者透明的通知会发送到相关的事件监听者。这个值必须是true,如果multipart 属性是true,否则将会出现一个意外。user:用户名,可选参数,为授权使用;默认参数为空string.password:密码,可选参数,为授权使用;默认参数为空string.

 

       method方法中最常用的请求类型便是GET和POST,一般情况下:

1、GET用于向服务器查询某些信息,而POST向服务器发送要保存的数据。2、GET将查询字符串参数追加到URL的末尾发给服务器,而POST通过传递参数给send()方法发送数据。

      举个栗子:

1      if ( method == "GET") {2             xhr.open("GET",url + "?" + params, true);3             xhr.send(null);4         } else if ( method == "POST") {5             xhr.open("POST", url, true);6             //设置表单提交时的内容类型7             xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");8             xhr.send(params);9         }

 

      如上所示,GET请求是直接在URL后面添加 ?+parm_name=parm_value&……来传递数据,然后xhr.send(null)(注:null不能省略)

http://www.yourhost.com?username="myname"&password="123"

而POST请求则是模拟表单提交,将头部信息设置为表单提交时的内容类型,然后将params当做send()方法的参数传递给服务器。

三、接收服务器的响应数据

      在调用send()方法后,请求便会派发到服务器,服务器对请求进行处理后作出响应。然后自动填充到XHR对象的属性中。

responseText:作为响应主体被返回的文本。responseXML:如果响应的内容类型是"text/xml"或"application/xml",这个属性中将保存包含着响应数据的XML DOM 文档。status:响应的HTTP 状态。statusText:HTTP 状态的说明。

      我们根据检测XHR对象中的 readyState 属性,可以获取当前的响应状态:

0:未初始化。尚未调用open()方法。1:启动。已经调用open()方法,但尚未调用send()方法。2:发送。已经调用send()方法,但尚未接收到响应。3:接收。已经接收到部分响应数据。4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。

      一般而言,我们只对状态“4”感兴趣,而 readyState 每次更改,都会触发一次readystatechange监听事件,因此,我们可以通过在监听函数中判断 readyState 的来判断响应是否成功,并取得响应数据。

xhr.onreadystatechange = function(){    if (xhr.readyState == 4){        //200-300表示成功返回,304表示资源未修改        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){            //在这里对响应数据进行处理(保存、打印等)            console.log(xhr.responseText);        } else {            alert("Request was unsuccessful: " + xhr.status);        }    }};

至此,一次完整的AJAX请求就已经完成了:

 1 //创建 2 var xhr = createXHR(); 3 //监听状态、处理数据 4 xhr.onreadystatechange = function(){ 5     if (xhr.readyState == 4){ 6         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ 7             //对xhr.responseText响应数据进行处理; 8         } else { 9             alert("Request was unsuccessful: " + xhr.status);10         }11     }12 };13 //连接14 xhr.open("get", "/xxx/xxx?param1=value1&param2=value2", true);15 //发送16 xhr.send(null);17 18 function createXHR(){19     if (typeof XMLHttpRequest != "undefined"){20         return new XMLHttpRequest();21     } else if (typeof ActiveXObject != "undefined"){22         if (typeof arguments.callee.activeXString != "string"){23             var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",24                     "MSXML2.XMLHttp"],25                 i, len;26             for (i=0,len=versions.length; i < len; i++){27                 try {28                     new ActiveXObject(versions[i]);29                     arguments.callee.activeXString = versions[i];30                     break;31                 } catch (ex){32                 }33             }34         }35         return new ActiveXObject(arguments.callee.activeXString);36     } else {37         throw new Error("No XHR object available.");38     }39 }

 

参考资料:

1、XMLHttpRequest-MDN

2、《JavaScript高级程序设计(第三版)》