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比较安全
转载于:https://www.cnblogs.com/timePasser-leoli/p/8556949.html
AJAX异步原理与实现相关推荐
- 【java项目实践】具体解释Ajax工作原理以及实现异步验证username是否存在+源代码下载(java版)...
一年前,从不知道Ajax是什么,伴随着不断的积累,到如今常常使用,逐渐有了深入的认识. 今天,假设想开发一个更加人性化,友好,无刷新,交互性更强的网页,那您的目标一定是Ajax. 介绍 在具体讨论Aj ...
- SpringMVC→简介、MVC、SpringMVC工作原理、Maven搭建第一个SpringMVC、请求参数接收、重定向、文件上传、AJAX异步访问、请求参数接收绑定JSON、@注解及传参
MVC SpringMVC工作原理 Maven搭建第一个SpringMVC 目录结构 web.xml *-servlet.xml Controller请求处理类 跳转页面 Maven运行服务器项目 浏 ...
- Ajax异步请求原理和过程
Ajax异步请求原理和过程 1.什么是Ajax 2.AJAX创建异步对象XMLHttpRequest ( 考虑兼容性 ) 3.操作XMLHttpRequest 对象 1.什么是Ajax Ajax是一种 ...
- AJAX工作原理及其优缺点 1.什么是AJAX? AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页
参考文章:https://www.cnblogs.com/SanMaoSpace/archive/2013/06/15/3137180.html AJAX工作原理及其优缺点 1.什么是AJAX? AJ ...
- Ajax异步请求原理
一.Ajax能做什么 异步请求.局部刷新 二.同步请求 JavaScript的特点是单线程,也正是因为单线程造成了同步请求 1. 为什么JS是单线程: JS 作为游览器脚本语言,主要用途是和用户交互. ...
- ajax通讯原理,ajax通讯原理以及自己封装一个ajax函数
ajax通讯原理 要解释ajax的原理,需要从旧的交互方式开始,当用户触发一个http请求到服务器,服务器对其进行处理之后,再返回一个新的html页到客户端,每当服务器处理客户端提交的请求时,客户都只 ...
- JavaScript———从setTimeout与setInterval到AJAX异步
setTimeout与setInterval执行 首先我们看一下以下代码打印结果 1 2 3 4 5 6 7 console.log(1); setTimeout(function() { conso ...
- 【面试题】Ajax的原理和优缺点总结
[面试题]Ajax的原理和优缺点总结 Ajax的原理 Ajax的原理简单来说就是通过XmlHttpRequest对象来向服务器发送异步请求,从服务器获得数据,然后用JavaScript来操作dom从而 ...
- Ajax的原理和应用
http://www.cnblogs.com/ustbwuyi/archive/2007/02/08/645061.html http://www.w3school.com.cn/ajax/index ...
最新文章
- Oracle IMP-00403
- Android性能优化之一:ViewStub
- 小程序iconfont报错_【经验】开发微信小程序经验总结
- 遗留问题,排雷会炸,不排也会炸!
- zookeeper使用和原理探究(一)
- Java学习之Thread之【Monitor】与【wait】与【notify】与【sleep】_加【Callable】【Executor】【ExecutorService】【Future】
- rgmanager 介绍
- bzoj4006 [JLOI2015]管道连接
- P4782 【模板】2-SAT 问题
- python发布代码图片_gitpython模块与代码发布项目流程图
- JavaScript综述
- uniapp不是自定义导航栏的情况下,点击返回按钮直接返回首页
- 数学三大危机与无穷小微积分
- [设计模式] 设计模式面面观(3):单件模式(Singletion)-创建型模式
- Apple, Steve Jobs, iCon
- JCenter挂掉后的解决方案
- 如何安装OpenCVE
- vi两个文件之间复制
- 项目管理思维是什么?
- 复制微信好友发来的代码