>>工作日志

Ajax面试和使用技巧

发表于2013-11-04 17:28:37  |  评论（ 0 ） 

一 、 什么是Ajax技术? 1）ajax 的全称是"Asynchronous JavaScript and XML"(异步JavaScript和XML)，是一种创建交互式网页应用的网页开发技术 2）不是一种新技术，是如下几种技术的组合应用 -- 使用CSS和XHTML来表示。 -- 使用DOM模型来交互和动态显示。 -- 使用XML和XSLT进行数据交换及相关操作 -- 使用XMLHttpRequest来和服务器进行异步通信。 -- 使用javascript来绑定和调用。 二 、 Ajax技术的优缺点 优点： (1)、局部刷新：最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。 　 (2)、使用“异步方式”与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。 　 (3)、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。 (4)、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。 缺点: (1):ajax干掉了back按钮，即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。这是ajax所带来的一个非常严重的问题 (2):，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。 (3):一些手持设备（如手机、PDA等）现在还不能很好的支持ajax，比如说我们在手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的 (4):比如说违背了url和资源定位的初衷。例如，我给你一个url地址，如果采用了ajax技术，也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。对搜索引擎的支持比较弱. 三 、 Ajax原理（图） 四 、Ajax使用技巧 1）引入Ajax核心功能代码封装文件(ajaxUtil.js)： //方法一：创建XMLHttpRequest对象 function createXHR(){ var request; if (window.XMLHttpRequest) { // 非IE浏览器 request = new XMLHttpRequest(); }else if (window.ActiveXObject) { // IE浏览器 request = new ActiveXObject("Msxml2.XMLHTTP"); } return request; } //方法二：处理 Ajax 技术通过 get 方式提交的数据 function sendRequestByGet(url,handle200){ //第一步：创建XMLHttpRequest对象 var request = createXHR(); //第三步：监听response对象的状态、监听response的状态,写回调函数处理服务器返回的数据 //注册一个事件,通过XMLHttpRequest对象得到响应内容 request.onreadystatechange=function(){ if(request.readyState==4){ //数据已经成功接收 if(handle200!=null){ //判断处理方法是否为空 var data = request.responseText; handle200(data); } }else{ //其他状态时 //document.getElementById("div").innerHTML ="资源正在加载中..."; //document.getElementById("div").innerHTML =""; } }; //第二步：使用XMLHttpRequest对象创建请求、通过XMLHttpRequest对象发送请求 //reqMethod:请求方式(get/post)、url:访问地址(servlet/jsp)、同步方式：异步-默认(true)/同步(false) request.open("get",url); //创建一个ajax请求 //第四步：使用XMLHttpRequest对象发送请求 request.send(null); //如果不写null,火狐浏览器会报错 } //方法三：处理 Ajax 技术提交的数据,最全的封装方法 function sendRequestAjax(reqMethod,url,postParam,parseMsg200,parseMsg404,parseMsg500,loading){ var request; //第一步：创建XMLHttpRequest对象 if(window.XMLHttpRequest){ // 非IE浏览器 request = new XMLHttpRequest(); }else if(window.ActiveXObject){ // IE浏览器 request = new ActiveXObject("Msxm12.XMLHTTP"); } //第二步：使用XMLHttpRequest对象创建请求、通过XMLHttpRequest对象发送请求 //reqMethod:请求方式(get/post)、url:访问地址(servlet/jsp)、同步方式：异步-默认(true)/同步(false) request.open(reqMethod, url,true)//创建一个ajax请求 //判断是否是post方式提交 if("post"==reqMethod){ request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } //第三步：监听response对象的状态、监听response的状态,写回调函数处理服务器返回的数据 //注册一个事件,通过XMLHttpRequest对象得到响应内容 request.onreadystatechange = function(){ if(request.readyState == 4){ //数据已经成功接收 if(request.status==200){ //数据已经成功接收：状态【请求成功】 if(parseMsg200){ parseMsg200(request); } }else if(request.status==404){ //数据已经成功接收：状态【请求资源未找到】 if(parseMsg404){ parseMsg404(request); } }else if(request.status==500){ //数据已经成功接收：状态【内部服务器错误】 if(parseMsg500){ parseMsg500(request); } } }else{ if(loading){ //其他状态时 loading(request); } } }; //第四步：使用XMLHttpRequest对象发送请求 if("post"==reqMethod){ request.send(postParam); }else{ request.send(null); //如果不写null,火狐浏览器会报错 } } 2）最常用--固定模式调用(get方式)。例如： action请求地址(pagenation_ajax_util)、所传参数(page)、服务器返回数据集(data)、数据集处理方法(function(data);) sendRequestByGet("pagenation_ajax_util?page="+page,function(data){ document.getElementById("DIV01").innerHTML = data;//处理实例：把返回的数据集,添加到DIV01层中 });

分享到：

声明：博客文章版权属于原创作者，受法律保护。如果侵犯了您的权利，请联系管理员,我们将及时删除！
（邮箱：blogadmin#bjsxt.cn（#换为@））

还没有评论数据!