无为清净楼资源网 Design By www.qnjia.com
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
在js中使用ajax请求一般包含三个步骤:
- 1、创建XMLHttp对象
- 2、发送请求:包括打开链接、发送请求
- 3、处理响应
在不使用任何的js框架的情况下,要想使用ajax,可能需要向下面一样进行代码的编写
<span style="font-size:14px;">var xmlHttp = xmlHttpCreate();//创建对象 xmlHttp.onreadystatechange = function(){//响应处理 if(xmlHttp.readyState == 4){ console.info("response finish"); if(xmlHttp.status == 200){ console.info("reponse success"); console.info(xmlHttp.responseText); } } } xmlHttp.open("get","TestServlet",true);//打开链接 xmlHttp.send(null);//发送请求 function xmlHttpCreate() { var xmlHttp; try { xmlHttp = new XMLHttpRequest;// ff opera } catch (e) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");// ie } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp; } console.info(xmlHttpCreate());</span>
如果在比较复杂的业务逻辑里面使用这种ajax请求,会使得代码很臃肿,不方便重用,并且可以看到,可能在服务器响应成功后要处理一个业务逻辑操作,这个时候不得不把操作写在onreadystatechage方法里面。
为了方便代码的重用我们可以做出如下处理;
- 1、服务器响应成功后,要处理的业务逻辑交给开发人员自己处理
- 2、对请求进行面向对象的封装
处理之后看起来应该像下面这个样子:
<pre code_snippet_id="342814" snippet_file_name="blog_20140513_2_2489549" name="code" class="javascript">window.onload = function() { document.getElementById("hit").onclick = function() { console.info("开始请求"); ajax.post({ data : 'a=n', url : 'TestServlet', success : function(reponseText) { console.info("success : "+reponseText); }, error : function(reponseText) { console.info("error : "+reponseText); } }); } } var ajax = { xmlHttp : '', url:'', data:'', xmlHttpCreate : function() { var xmlHttp; try { xmlHttp = new XMLHttpRequest;// ff opera } catch (e) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");// ie } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp; }, post:function(jsonObj){ ajax.data = jsonObj.data; ajax.url = jsonObj.url; //创建XMLHttp对象,打开链接、请求、响应 ajax.xmlHttp = ajax.xmlHttpCreate(); ajax.xmlHttp.open("post",ajax.url,true); ajax.xmlHttp.onreadystatechange = function(){ if(ajax.xmlHttp.readyState == 4){ if(ajax.xmlHttp.status == 200){ jsonObj.success(ajax.xmlHttp.responseText); }else{ jsonObj.error(ajax.xmlHttp.responseText); } } } ajax.xmlHttp.send(ajax.data); } };
上述代码实现了类似jquery中的ajax操作,希望对大家的学习有所帮助。
标签:
js,ajax,封装
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
更新日志
2024年11月20日
2024年11月20日
- [ABC]蔡琴《百万琴歌[6N纯银镀膜]》[低速原抓WAV+CUE]
- 群星《国风超有戏 第7期》[FLAC/分轨][147.99MB]
- 群星《闪光的夏天 第3期》[320K/MP3][61.94MB]
- 群星《闪光的夏天 第3期》[FLAC/分轨][336MB]
- 【迷幻电音】Elea-2024-Hypnos(FLAC)
- 【民族融合】VA-2024-TheOrientCollective:GoldenSand(FLAC)
- 谭嘉仪-EyesOnMe新曲+精选2022【低速原抓WAV+CUE】
- 尚士达《莫回头》[320K/MP3][184.64MB]
- 尚士达《莫回头》[Hi-Res][24bit 48kHz][FLAC/分轨][1.27G]
- 群星《奔赴!万人现场 第3期》[320K/MP3][98.9MB]
- 谭嘉仪《Lonely》【WAV+CUE】
- 群星《红色钢琴浪漫曲》2CD【WAV+CUE】
- 凤飞飞《浮世情怀》HQCD[正版原抓WAV+CUE]
- 群星《奔赴!万人现场 第3期》[FLAC/分轨][537.75MB]
- 群星 《2024好听新歌23》十倍音质 U盘音乐 [WAV分轨][1.6G]