JavaScript基础---AJAX

内容提纲:

1.XMLHttpRequest

2.GET与POST

3.封装Ajax

 发文不易,转载请注明链接出处,谢谢!

 

2005年Jesse James Garrett发表了一篇文章,标题为:Ajax:A new Approach to Web Applications。他在这篇文章里介绍了一种技术,用他的话说,就叫:Ajax,是Asynchronous JavaScript + XML的简写。这种技术能够想服务器请求额外的数据而无须卸载页面(即刷新),会带来更好的用户体验。一时间,席卷全球。

 

一.XMLHttpRequest

Ajax技术核心是XMLHttpRequest对象(简称XHR),这是由微软首先引入的一个特性,后来其他浏览器供应商都提供了相同的实现。在XHR出现之前,Ajax式的通信必须借助一些hack手段来实现,大多数是使用隐藏的框架或内嵌框架。

XHR的出现,为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息,这就意味着,用户只要触发某一事件,在不刷新网页的情况下,更新服务器最新的数据。

虽然Ajax中的x代表的是XML,但Ajax通信和数据格式无关,也就是说这种技术不一定使用XML

 

IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象,在这些浏览器中创建XHR对象可以直接实例化XMLHttpRequest即可。

var xhr = new XMLHttpRequest();

alert(xhr);                                                        //XMLHttpRequest

 

如果是IE6及以下,那么我们必须还需要使用ActiveX对象通过MSXML库来实现。在低版本IE浏览器可能会遇到三种不同版本的XHR对象,即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。我们可以编写一个函数。

JavaScript基础---AJAX
 1 function createXHR() {
 2 
 3        if (typeof XMLHttpRequest != ‘undefined‘) {
 4 
 5               return new XMLHttpRequest();
 6 
 7        } else if  (typeof ActiveXObject != ‘undefined‘) {
 8 
 9               var versions = [
10 
11                                                                       ‘MSXML2.XMLHttp.6.0‘,
12 
13                                                                       ‘MSXML2.XMLHttp.3.0‘,
14 
15                                                                       ‘MSXML2.XMLHttp‘
16 
17               ];
18 
19               for (var i = 0; i < versions.length; i ++) {
20 
21                      try {
22 
23                             return new ActiveXObject(version[i]);
24 
25                      } catch (e) {
26 
27                             //跳过
28 
29                      }
30 
31               }
32 
33        } else {
34 
35               throw new Error(‘您的浏览器不支持XHR对象!‘);
36 
37        }
38 
39 }
40 
41  
42 
43 var xhr = createXHR();
44 
45  
JavaScript基础---AJAX

 

在使用XHR对象时,先必须调用open()方法,它接受三个参数:要发送的请求类型(get、post)、请求的URL和表示是否异步

xhr.open(‘get‘, ‘demo.php‘, false);                        //对于demo.php的get请求,false同步

 

demo.php的代码如下:

<?php

      echo Date(‘Y-m-d H:i:s‘);      //打印一个时间

?>                        

open()方法并不会真正发送请求,而只是启动一个请求以备发送。通过send()方法进行发送请求,send()方法接受一个参数,作为请求主体发送的数据。如果不需要(如用get方式)则必须填null。执行send()方法之后,请求就会发送到服务器上。

xhr.send(null);                            //发送请求

PS:如果没有向服务器端发送,火狐firebug无发送提示,如果有send()方法,则firebug会提示已发送(到火狐中用FireBug调试)。

 

当请求发送到服务器端,收到响应后响应的数据会自动填充XHR对象的属性。那么一共有四个属性:

 

属性名

说明

responseText

作为响应主体被返回的文本

responseXML

如果响应主体内容类型是"text/xml"或"application/xml",则返回包含响应数据的XML DOM文档

status

响应的HTTP状态

statusText

HTTP状态的说明

 

接受响应之后,第一步检查status属性,以确定响应已经成功返回。一般以HTTP状态代码为200作为成功的标志。除了成功的状态代码,还有一些别的状态码:

 

HTTP状态码

状态字符串

说明

200

OK

服务器成功返回了页面

400

Bad Request

语法错误导致服务器不识别

401

Unauthorized

请求需要用户认证

404

Not found

指定的URL在服务器上找不到

500

Internal Server Error

服务器遇到意外错误,无法完成请求

503

ServiceUnavailable

由于服务器过载或维护导致无法完成请求

 

一般来说,我们判断HTTP状态值即可,不建议使用HTTP状态说明(statusText),因为在跨浏览器的时候,可能会不太一致。

JavaScript基础---AJAX
 1 addEvent(document, ‘click‘, function () {
 2 
 3        var xhr = new createXHR();
 4 
 5        xhr.open(‘get‘, ‘demo.php?rand=‘ + Math.random(), false);  //设置了同步
 6 
 7        xhr.send(null);
 8 
 9        if (xhr.status == 200) {                              //如果返回成功了
10 
11               alert(xhr.responseText);                     //调出服务器返回的数据
12 
13        } else {
14 
15               alert(‘数据返回失败!状态代码:‘ + xhr.status + ‘状态信息:‘ + xhr.statusText);
16 
17        }
18 
19 });
JavaScript基础---AJAX

 

PS:通过点击事件,不断的向服务器发送请求,然后服务器会实时的返回最新的数据,就是Ajax功能。

PS:IE浏览器第一次会向服务器端请求,获取最新数据,而第二次它就默认获取的是缓存数据,导致数据不是最新的,怎么处理缓存?可以使用JS随机字符串:Math.random()

 

以上的代码每次点击页面的时候,返回的时间都是实时的,说明都是通过服务器及时加载回的数据。那么我们也可以测试一下在非Ajax下的情况。

创建一个demo2.php文件,使用非Ajax:

JavaScript基础---AJAX
 1 <script type="text/javascript" src="base.js"></script>
 2 
 3 <script type="text/javascript">
 4 
 5        addEvent(document, ‘click‘, function () {       //当不断点击页面,返回的时间不发生变化
 6 
 7               alert("<?php echo Date(‘Y-m-d H:i:s‘)?>");
 8 
 9        });
10 
11 </script>
JavaScript基础---AJAX

 

同步调用固然简单,但使用异步调用才是我们真正常用的手段。使用异步调用的时候,需要触发readystatechange事件,然后检测readyState属性即可。这个属性有五个值:

状态

说明

0

未初始化

尚未调用open()方法

1

启动

已经调用open()方法,但尚未调用send()方法

2

发送

已经调用send()方法,但尚未接受响应

3

接受

已经接受到部分响应数据

4

完成

已经接受到全部响应数据,而且可以使用

      

//异步方式

JavaScript基础---AJAX
 1 addEvent(document, ‘click‘, function () {
 2 
 3        var xhr = new createXHR();
 4 
 5        xhr.onreadystatechange = function () {
 6 
 7               if (xhr.readyState == 4) {
 8 
 9                      if (xhr.status == 200) {
10 
11                             alert(xhr.responseText);
12 
13                      } else {
14 
15                             alert(‘数据返回失败!状态代码:‘ + xhr.status + ‘状态信息:‘+ xhr.statusText);
16 
17                      }
18 
19               }
20 
21        };
22 
23        xhr.open(‘get‘, ‘demo.php?rand=‘ + Math.random(), true);
24 
25        xhr.send(null);
26 
27        //xhr.abort();                //取消异步请求    
28 
29 });
30 
31  
JavaScript基础---AJAX

 

PS:使用abort()方法可以取消异步请求,放在send()方法之前会报错。放在responseText之前会得到一个空值。

 

二.GET与POST

在提供服务器请求的过程中,有两种方式,分别是:GET和POSTAjax使用的过程中,GET的使用频率要比POST高。

在Web程序中:

GET一般是URL提交请求,比如:

demo.php?name=Lee&age=100

POST一般是Web表单提交, 比如:

<form method="post">

  <input type="text" name="name" value="Lee">

  <input type="text" name="age" value="100">

</form>

在了解这两种请求方式前,我们先了解一下HTTP头部信息,包含服务器返回的响应头信息和客户端发送出去的请求头信息。我们可以获取响应头信息(不可以设置)或者设置请求头信息(不可以获取)。我们可以在Firefox浏览器的firebug查看这些信息。

JavaScript基础---AJAX
 1 addEvent(document, ‘click‘, function () {
 2 
 3        var xhr = createXHR();        
 4 
 5        xhr.onreadystatechange = function () {
 6 
 7               if (xhr.readyState == 4) {
 8 
 9                      if (xhr.status == 200) {                          
10 
11                             //alert(xhr.getAllResponseHeaders());           //获取全部响应头信息                         
12 
13                             //alert(xhr.getResponseHeader(‘Content-Type‘));      //获取单个响应头信息
14                      } else {
15 
16                             alert(‘获取数据错误!错误代号:‘ + xhr.status + ‘,错误信息:‘ + xhr.statusText);
17 
18                      }    
19 
20               }
21 
22        };
23 
24        xhr.open(‘get‘, ‘demo.php?rand=‘ + Math.random(), true);
25        xhr.setRequestHeader(‘myheader‘,‘Lee‘);        //设置请求头信息,一般没什么用,在POST提交请求有用
26        xhr.send(null);                    
27 
28 });
JavaScript基础---AJAX

 

PS:我们只可以获取服务器返回回来响应头信息,无法获取向服务器提交的请求头信息,自然自定义的请求头,在JavaScript端是无法获取到的。

 

GET请求

GET请求是最常见的请求类型,最常用于向服务器查询某些信息。必要时,可以将查询字符串参数追加到URL的末尾,以便提交给服务器。

xhr.open(‘get‘, ‘demo.php?rand=‘ + Math.random() + ‘&name=Koo‘, true);

 

注意:通过URL后的问号给服务器传递键值对数据,服务器接收到然后返回响应数据。特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理;中文字符的返回及传参,可以将页面保存和设置为utf-8格式即可。

 

//一个通用的URL提交函数

JavaScript基础---AJAX
 1 function addURLParam(url, name, value) {
 2 
 3        url += (url.indexOf(‘?‘) == -1 ? ‘?‘ : ‘&‘);                    //判断的url是否有已有参数
 4 
 5        url += encodeURIComponent(name) + ‘=‘ + encodeURIComponent(value);
 6 
 7        alert(url);
 8 
 9        return url;
10 
11 }
JavaScript基础---AJAX

 

PS:当没有encodeURIComponent()方法时,在一些特殊字符比如“&”,会出现错误导致无法获取。

 

代码汇总:

demo.php代码部分:

JavaScript基础---AJAX
 1 <?php
 2 
 3        header(‘Content-Type: text/html;charset=utf-8‘);
 4 
 5        //echo Date(‘Y-m-d H:i:s‘);
 6 
 7        print_r($_GET);
 8 
 9        print_r($_POST);
10 
11       
12 
13        //if ($_GET[‘name‘] == ‘Lee‘) {
14 
15        //     echo ‘中文‘;
16 
17        //}
18 
19        if ($_POST[‘name‘] == ‘Lee‘) {
20 
21               echo ‘中文‘;
22 
23        }
24 
25 ?>
JavaScript基础---AJAX

 

//GET请求

JavaScript基础---AJAX
 1 addEvent(document, ‘click‘, function () {
 2 
 3        var xhr = createXHR();        
 4 
 5        var url = ‘demo.php?rand=‘ + Math.random();
 6 
 7        url = params(url, ‘name‘, ‘Lee‘);
 8 
 9        url = params(url, ‘age‘, 100);
10 
11        alert(url);
12 
13        xhr.onreadystatechange = function () {
14 
15               if (xhr.readyState == 4) {
16 
17                      if (xhr.status == 200) {
18 
19                             alert(xhr.responseText);
20 
21                      } else {
22 
23                             alert(‘获取数据错误!错误代号:‘ + xhr.status + ‘,错误信息:‘ + xhr.statusText);
24 
25                      }    
26 
27               }
28 
29        };
30 
31        xhr.open(‘get‘, url, true);
32 
33        xhr.send(null);                    
34 
35 });
36 
37  
38 
39 function params(url, name, value) {
40 
41        url += url.indexOf(‘?‘) == -1 ? ‘?‘ : ‘&‘;
42 
43        url += encodeURIComponent(name) + ‘=‘ + encodeURIComponent(value);
44 
45        return url;
46 
47 }
48 
49  
JavaScript基础---AJAX

 

POST请求

POST请求可以包含非常多的数据,我们在使用表单提交的时候,很多就是使用的POST传输方式。

xhr.open(‘post‘, ‘demo.php‘, true);

 

而发送POST请求的数据,不会跟在URL的尾巴上,而是通过send()方法向服务器提交数据。

xhr.send(‘name=Lee&age=100‘);

 

一般来说,向服务器发送POST请求由于解析机制的原因,需要进行特别的处理。因为POST请求和Web表单提交是不同的,需要使用XHR来模仿表单提交。代码如下:

xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);

 

代码汇总:

JavaScript基础---AJAX
 1 addEvent(document, ‘click‘, function () {
 2 
 3        var xhr = createXHR();        
 4 
 5        var url = ‘demo.php?rand=‘ + Math.random();
 6 
 7        xhr.onreadystatechange = function () {
 8 
 9               if (xhr.readyState == 4) {
10 
11                      if (xhr.status == 200) {
12 
13                             alert(xhr.responseText);
14 
15                      } else {
16 
17                             alert(‘获取数据错误!错误代号:‘ + xhr.status + ‘,错误信息:‘ + xhr.statusText);
18 
19                      }    
20 
21               }
22 
23        };
24 
25        xhr.open(‘post‘, url, true);                           //第一步改为post
26 
27        xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);     //第三步,模拟表单提交      
28 
29      xhr.send(‘name=Lee&age=100‘);                //第二步,将名值对放入send方法里(其实也需要像get一样进行编码) 
30 
31 });
32 
33  
JavaScript基础---AJAX

 

PS:从性能上来讲POST请求比GET请求消耗更多一些,用相同数据比较,GET最多比POST快两倍。

 

JSON数据也可以使用Ajax来回调访问:

var url = ‘demo.json?rand=‘ + Math.random();

var box = JSON.parse(xhr.responseText);

 

三.封装Ajax

因为Ajax使用起来比较麻烦,主要就是参数问题,比如到底使用GET还是POST;到底是使用同步还是异步等等,我们需要封装一个Ajax函数,来方便我们调用。部分核心代码如下:

//封装ajax

JavaScript基础---AJAX
 1 function ajax(obj) {
 2 
 3        var xhr = createXHR();
 4 
 5        obj.url = obj.url + ‘?rand=‘ + Math.random();
 6 
 7        obj.data = params(obj.data);
 8 
 9        if (obj.method === ‘get‘) obj.url += obj.url.indexOf(‘?‘) == -1 ? ‘?‘ + obj.data : ‘&‘ + obj.data;          //1.GET方式发送数据
10 
11        if (obj.async === true) {                     //异步方式会执行这儿
12 
13               xhr.onreadystatechange = function () {
14 
15                      if (xhr.readyState == 4) {
16 
17                             callback();                        //调用callback函数
18 
19                      }
20 
21               };
22 
23        }
24 
25        xhr.open(obj.method, obj.url, obj.async);
26 
27        if (obj.method === ‘post‘) {     //2.POST方式发送数据
28 
29               xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);
30 
31               xhr.send(obj.data); 
32 
33        } else {
34 
35               xhr.send(null);
36 
37        }
38 
39        if (obj.async === false) {     //同步方式会执行这儿
40 
41               callback();                                        //调用callback函数回调
42 
43        }
44 
45        function callback() {                              //封装为callback函数,方便上面调用
46 
47               if (xhr.status == 200) {
48 
49                      obj.success(xhr.responseText);       //调用obj的success方法回调传递参数
50 
51               } else {
52 
53                      alert(‘获取数据错误!错误代号:‘ + xhr.status + ‘,错误信息:‘ + xhr.statusText);
54 
55               }    
56 
57        }
58 
59 }
JavaScript基础---AJAX

 

For my lover and

Thank you, Mr.Lee!

JavaScript基础---AJAX,布布扣,bubuko.com

JavaScript基础---AJAX

上一篇:C++之易混淆知识点四---虚函数与虚继承


下一篇:Java基础——异常(2)