AJAX异步原理与实现


面试时问到了这个问题,说实话我还是不理解的,只是单单会使用。所以今天我看一下,自己了解下。

看了网上前辈们写的资料,我自己总结归纳ajax的原理和流程如下:

1、AJAX创建异步对象XMLHttpRequest

这个是ajax核心的对象,当然不是所有浏览器创建这个对象的方法是一致的。我们开发过程中一般建议使用chrome浏览器,在chrome中,XMLHttpRequest对象的创建方法直接

var xmlHttp=new XMLHttpRequest();即可。但是IE是特例,我们需要这样var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");(这里忽略低版本IE了,我相信再低不可能使用IE6以下吧),要在一个方法内完成对象创建需要try、catch(JS也是可以的)

2、操作XMLHttpRequest 对象

对象创建完成后当然是使用了。

(1)设置请求参数(请求方式,请求页面的相对路径,是否异步)

(2)设置回调函数,一个处理服务器响应的函数,使用 onreadystatechange ,类似函数指针

(3)获取异步对象的readyState 属性:该属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。

(4)判断响应报文的状态,若为200说明服务器正常运行并返回响应数据,

(5)读取响应数据,可以通过 responseText 属性来取回由服务器返回的数据。

感觉好难记,一时间还是很难消化的。我们还是直接来看ajax怎么写吧

现在ajax我会的就两种,一种就是原生的ajax,另一种就是jquery中提供的ajax,后者比前者更简单。

第一种:

原生ajax,请求方式因为分为post和get等,为了统一,可以当参数传入,不必分开处理,然后我们可以封装这样的一个方法,使用时直接调用

 1 function ajax_method(url,data,method,success) {  2     // 创建异步对象
 3     var ajax = new XMLHttpRequest();  4 
 5     // get 跟post 需要分别写不同的代码
 6     if (method=='get') {  7         // get请求
 8         if (data) {  9             // 如果有值
10             url+='?'; 11             url+=data; 12         }else{ 13 
14  } 15         // 设置 方法 以及 url
16  ajax.open(method,url); 17 
18         // send即可
19  ajax.send(); 20     }else{ 21         // post请求
22         // post请求 url 是不需要改变
23  ajax.open(method,url); 24 
25         // 需要设置请求报文
26         ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 27 
28         // 判断data send发送数据
29         if (data) { 30             // 如果有值 从send发送
31  ajax.send(data); 32         }else{ 33             // 木有值 直接发送即可
34  ajax.send(); 35  } 36  } 37 
38     // 注册事件
39     ajax.onreadystatechange = function () { 40         // 在事件中 获取数据 并修改界面显示
41         if (ajax.readyState==4&&ajax.status==200) { 42             // console.log(ajax.responseText);
43 
44             // 将 数据 让 外面可以使用
45             // return ajax.responseText;
46 
47             // 当 onreadystatechange 调用时 说明 数据回来了
48             // ajax.responseText;
49 
50             // 如果说 外面可以传入一个 function 作为参数 success
51  success(ajax.responseText); 52  } 53  } 54 
55 }

第二种:

其实jquery中使用ajax也是有多种方式的,先看看不带参数的:

 1 $(document).ready(function(){  2     $("button").click(function(){  3         $.ajax({url:"http://localhost:8080/lsd/getChildrenList.action",  4             success:function(result){  5           //处理返回数据12  }}); 13  }); 14 });  

其中第一个参数是请求的url,第二个参数是回调用函数,json数据封装在result,需要对result的json数据进行解析

如果想加入参数,则在url和回调函数之间加入参数即可。

另外,jquery中提供post类型的ajax方法从服务器载入数据

1 $('#send').click(function(){ 2     $.post('jqRequest.jsp',{ 3         num: $('#num').val() 4     },function(data){ 5         $('#result').html('您选择的数字' + $('#num').val() + '是' + data) 6  }) 7 })

写法上我觉得就是三种$.ajax()和$.post()和$.get(),至于参数不参数,按实际需要来就行

三者做个比较:

$.get $.post是简单易用的高层实现,我们使用$.get $.post方法,jQuery会自动封装调用底层的$.ajax。
$.get 只处理简单的 GET 请求功能以取代复杂 $.ajax,请求成功时可调用回调函数。不支持出错时执行函数,否则必须使用$.ajax。
$.post 只处理 post请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。不支持出错时执行函数,否则必须使用$.ajax。
$.get("test.php", { name: "John", time: "2pm" } ) $.get方法在请求时会自动生成queryString提交给服务器(name=John&time=2pm),
$.post方法提交的数据直接类似表单提交,提交的数据量比$.get更大。

这里插一句:post和get提交的区别,面试也问了,回答的不是很全面。

1.post提交的数据量几乎没有限制,get提交有内容大小限制

2.get提交把参数加在url中,post提交不会

3.由于get提交把参数放入了url,所以大家都可以看到是比较不安全的,post比较安全


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM