JavaScript---Ajax和函数回调,异步编程

一 Ajax 函数的定义 : Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），无刷新的从服务器读取数据，可以在不重新加载整个网页的情况下，对网页的某部分进行更新，使网页实现异步更新。

交换过程:

　　1 创建对象

　　2 建立连接

　　3 发送请求

　　4 接收数据( 调用回调函数)

 1 function ajax(json){
 2     if(!json.url){return;}
 3     json = json||{};
 4     json.type = json.type||'GET';
 5     json.data = json.data||{};
 6     json.timeout = json.timeout||10000;
 7     //1.创建对象
 8     if(window.XMLHttpRequest){
 9         //chrome FF IE7+
10         var oAjax = new XMLHttpRequest();
11     }else{
12         //IE低版本    
13         var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
14     }
15     switch(json.type.toLowerCase()){
16         case 'get':
17         //2.建立连接  //是否异步
18         oAjax.open('GET',json.url+'?'+json2url(json.data),true);
19         //3.发送
20         oAjax.send();
21         break;
22         case 'post': 
23         oAjax.open('POST',json.url,true);
24         oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
25         oAjax.send(json2url(json.data));
26         break;
27     }
28     json.loading&&json.loading();
29     //超过json.timeout 后认为失败 不在请求
30     var timer = setTimeout(function(){
31         json.error&&json.error();
32         json.complete&&json.complete();
33         oAjax.onreadystatechange = null;
34     },json.timeout);
35     
36     //4.接收 
37     //当网络状态改变的时候
38     oAjax.onreadystatechange = function(){  //每当 readyState 改变时，就会触发 onreadystatechange 事件
39         //网络状态
40         if(oAjax.readyState == 4){  //0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
41             //http状态
42             if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
43                 //服务器返回的数据
44                 clearTimeout(timer);
45                 json.success&&json.success(oAjax.responseText); //执行回调函数   
46                 json.complete&&json.complete();
47             }else{
48                 clearTimeout(timer);
49                 json.error&&json.error(oAjax.status);
50                 json.complete&&json.complete();
51             }
52         }
53     }; 
54 }

二，Ajax的调用：

 1 ajax({
 2             url:url,
 3             data:{
 4                //数据接口 7             },
 8             success:function(str){
10                 var json = eval('('+str+')');
11                 if(!json.error){
12                     alert('发表成功');
13                    //成功之后运行的代码18                 }
19             }    
20         });

三，异步和回调函数

　　参考连接： http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html

　　异步编程： 同步模式：后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的

　　　　　　　"异步模式"：每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

　　异步编程的方法：

　　　回调函数:把一个函数f1作为参数传递给另一个函数f2,并在f2中在恰当的时机执行,这个f1就叫回调函数，常见的比如事件函数，定时器，ajax。　　

　　　事件监听：任务的执行不取决于代码的顺序，而取决于某个事件是否发生。　