JS——Ajax原理

AJAX：

AJAX不是JavaScript的规范，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。

若是仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，而后在新页面里告诉你操做是成功了仍是失败了。若是不幸因为网络太慢或者其余缘由，就会获得一个404页面。

这就是Web的运做原理：一次HTTP请求对应一个页面。

若是要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感受本身仍然停留在当前页面，可是数据却能够不断地更新。

最先大规模使用AJAX的就是Gmail，Gmail的页面在首次加载后，剩下的全部数据都依赖于AJAX来更新。

用JavaScript写一个完整的AJAX代码并不复杂，可是须要注意：AJAX请求是异步执行的，也就是说，要经过回调函数得到响应。（转自：廖雪峰的AJAX介绍）

归根结底，AJAX就是无刷新数据读取。（应用于用户注册、在线聊天等功能）

 

1）HTTP请求方式

　　》GET：把数据放在url（网址）里面来提交　　多半用于获取数据（例如：浏览帖子）

　　》POST：把数据放在不是url的地方　　　　　 多半用于上传数据（例如：用户注册/上传图片等）

两者区别：

　　GET　　　安全性低、容量低、会有缓存　　　　　　　便于分享

　　POST　　 安全性通常、容量几乎无限、不会缓存　　    不便于分享

以下图所示，就明白GET的方法了：　　（当使用GET方法时，在表单中填入相关信息后，浏览器网址后面会带着你所提交的信息，【若用户名/密码之类的信息显示在网址后面，那安全性就低了，我的信息很容易被人窃取】）

 

2）Ajax的编写

Ajax请求顺序：

1）建立Ajax对象：

　　》ActiveObject("Microsoft.XMLHTTP")

　　》XMLHttpRequest()

2）链接服务器：

　　》open(方法、文件名、异步传输)

3）发送请求：

　　》send()

4）接收返回：

 　　》请求状态监控（onreadystatechange事件）

　　　　>readyState属性：　　请求状态【状态值】

　　　　　　*0　　（未初始化）尚未调用open()方法

　　　　　　*1　　（载入）已调用send()方法，正在发送请求

　　　　　　*2　　（载入完成）send()方法完成，已收到所有响应内容

　　　　　　*3　　（解析）正在解析响应内容

　　　　　　*4　　（完成）响应内容解析完成，能够在客户端调用了　　　（主要是：4）

　　　　>status属性：　　请求结果【状态码（相应的状态码能够百度去搜索）】

　　　　　　*1xx：信息响应类，表示接收到请求而且继续处理

　　　　　　*2xx：处理成功响应类，表示动做被成功接收、理解和接受　　（主要是：200）

　　　　　　*3xx：重定向响应类，为了完成指定的动做，必须接受进一步处理

　　　　　　*4xx：客户端错误，客户请求包含语法错误或者是不能正确执行

　　　　　　*5 xx：服务端错误，服务器不能正确执行一个正确的请求

　　　　>responseText：　　服务器发回来的信息/内容

 

注意：对于Ajax的使用，须要本身搭建一个服务器来使用（本人用的是wamp服务器），把相对应文件放在（wamp/www的路径下），其中ajax.html文件是用来编写ajax的，abc.txt用来让ajax获取里面的内容【并且abc.txt中要以utf-8的编码格式保存（跟浏览器编码格式同样）】

详细以下图：

（1）：

（2）：

 

1）建立Ajax对象

2）链接服务器

3）发送请求

4）接收返回

 

至此，对于AJAX的编写就完成了，为了能够长期利用，能够把它封装到函数里，放在js代码中，有必要时能够拿来调用。（新建一个js文档来存放所封装的函数）

 1 function Ajax(url,fnSucc,fnFaild){
 2     //1.建立ajax对象
 3     var oAjax=null;
 4     if(window.XMLHttpRequest){          
 5         oAjax=new XMLHttpRequest();
 6     }
 7     else {
 8         oAjax=new ActiveXObject('Microsoft.XMLHTTP');
 9     }
10 
11     //2.链接服务器
12     oAjax.open('GET',url,true);
13 
14     //3.发送请求
15     oAjax.send();
16 
17     //4.接收返回
18     oAjax.onreadystatechange=function(){    
19         if(oAjax.readyState==4){       //完成     
20             if(oAjax.status==200){     //成功      
21                 fnSucc(oAjax.responseText);   
22                 //把oAjax.responseText做为参数给fnSucc函数调用   
23             }else{
24                 if(fnFaild){        
25                     //若调用ajax时，有传入fnFaild这个参数时就执行
26                     fnFaild(oAjax.status); 
27  　　　　　　　　　} 
28  　　　　　　 } 
29  　　　　} 
30  　　} 
31 }