Ajax

Ajax的概念

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是一种用于创建快速动态网页的技术。

动态网页：是指可以通过服务器语言结合数据库随时修改数据的网页。

静态网页，随着html代码的生成，页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下。

Ajax运行机制：

　　由客户端浏览器创建XMLHttpRequest对象向服务器发出请求，然后等待服务器响应，服务器响应后将数据返回到客户端，保存到XMLHttpReques的responsetext的属性下。

Ajax请求服务器的过程中有5个状态

0：表示请求服务器之前

1：表示打开远程服务器链接对应open方法

2：表示向服务器发送数据对应send方法

3：表示服务器响应过程中并未结束

4：表示服务器响应完成

 

Ajax的优势

1、AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

2、AJAX 可使因特网应用程序更小、更快，更友好。

3、AJAX 是一种独立于 Web 服务器软件的浏览器技术。　

4、AJAX 基于下列 Web 标准： JavaScriptXMLHTMLCSS在 AJAX 中使用的 Web 标准已被良好定义，并被所有的主流浏览器支持。

5、AJAX 应用程序独立于浏览器和平台。

Web 应用程序较桌面应用程序有诸多优势；它们能够涉及广大的用户，它们更易安装及维护，也更易开发。 不过，因特网应用程序并不像传统的桌面应用程序那样完善且友好。 通过 AJAX，因特网应用程序可以变得更完善，更友好。

Ajax异步

异步：是相对于同步而言的，定时器也是异步的一种，也就是其他程序不需要等待定时器的代码全部执行完毕以后才能执行代码。因为定时器有可能是无限循环执行代码的，如果等待定时器执行完毕那么其他的代码将永远无法运行。所以异步编程就是相对于其他代码是独立完成的。也就是上面所说的ajax是独立于浏览器平台的。

Tip:事件也是异步执行的，事件是发生某件事情后才会执行代码的。

同步：就是同一个代码块中代码都是从上到下执行的。

Ajax核心对象XMLHttpRequest

 1 var _hr=new window.XMLHttpRequest();//低版本的IE不兼容
 2 
 3 　　function createXHR(){
 4 
 5 　　　　try{
 6 
 7 　　　　　　return new window.XMLHttpRequest();
 8 
 9 　　　　　　}catch(e){
10 
11 　　　　　　　　 try{
12 
13 　　　　　　　　　　return new ActiveXObject(“Microsoft.XMLHttpRequest”);
14 
15 　　　　　　　　　 }catch(e){
16 
17 　　　　　　　　　　if(window.confirm("浏览器版本太低,是否要下载新版本的浏览器")){ 　　　　　　　　　　     window.location.href="http://download.firefox.com.cn/releases/firefox/48.0/zh-CN/Firefox-latest.dmg";
18 
19 　　　　　　}
20 
21 　　　　}
22 
23 　　}
24 
25 }

 

 

Ajax请求服务器过程

调用上面的方法：

 1 var _xhr=createXHR();
 2 
 3 　　 if(_xhr){　　
 4 
 5 　　　　　_xhr.onreadystatechange=function(){　　　　　　　　
 6 
 7 　　　　　　　if(_xhr.readystate==4){//等于4表示服务器响应完成，一定要等服务器响应完成后才可以处理数据；
 8 
 9 　　　　　　　　　　//TODO…
10 
11 　　　　　　　}
12 
13 　　　　　}
14 
15 　　　　_xhr.open(“post”,”url”,true);
16 
17 //简单请求分为post和get方式两种，第二个参数表示远程服务器接口的地址，第三个参数表示是否为异步；
18 
19 　　　　_xhr.setRequestHeader(“content-type”,”application/x-www-form-urlencoded;charset=utf-8”);
20 
21 　　　　_xhr.send(null);
22 
23 }

 

 

 1 /**
 2  * 创建XMLHttpRequest对象
 3  * @param _method 请求方式: post||get
 4  * @param _url 远程服务器地址
 5  * @param _async 是否异步
 6  * @param _parameter 向服务器发送数据
 7  * @param _callBack 回调函数
 8  */
 9  function parameterDeal(_parameter){
10     var _sender="";
11     if(_parameter instanceof Object){
12         for(var k in _parameter){
13             _sender+=k+"="+_parameter[k]+"&";
14         }
15         _sender =_sender.replace(/\\+|\/+|\$+/g,"");//过滤特殊字符
16         return _sender.replace(/\&$/g,"");//去掉最后一个$
17     }else{
18         return _parameter;
19     }
20 }
21 function createXMLHttpRequest(){
22     try{
23         return new window.XMLHttpRequest();
24     }catch(e){
25         try{
26             return new ActiveXObject("MSXML2.XMLHTTP.6.0");
27         }catch(e){
28             try{
29                 return new ActiveXObject("MSXML2.XMLHTTP.3.0");
30             }catch(e){
31                 try{
32                     return new ActiveXObject("MSXML2.XMLHTTP");
33                 }catch(e){
34                     try{
35                         return new ActiveXObject("Microsoft.XMLHTTP");
36                     }catch(e){
37                         throw new Error("该浏览器版本太低,已经被大部分市场淘汰,请升级!!!");
38                         return;
39                     }
40                 }
41             }
42         }
43     }
44 }
45 function ajaxRequest(_method,_url,_async,_parameter,_callBack){
46     var _ajax=createXMLHttpRequest();
47     if(_ajax){
48         _ajax.onreadystatechange=function(){
49             if(_ajax.readyState==4 && _ajax.status==200){
50                 _callBack(_ajax.responseText);
51             }
52         }
53         _ajax.open(_method,_url,_async);
54         _ajax.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8");
55         _ajax.send(parameterDeal(_parameter));
56     }
57 }
View Code

 

posted @ 2016-12-30 11:45  茹孟凯  阅读(137)  评论(0)  编辑  收藏  举报