1、ajax的实现和原理
原理:Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。
实现步骤:
1.创建XMLHTTPRequest对象
2.注册回调函数 xhr.onreadystatechange=callback;
3.设置和服务器端的链接信息。xhr.open(http请求方式(get,post),url,设置异步或同步方式交互(true,false));
4.发送数据开始交互。xhr.send(null);
5.接受响应数据。
2、Ajax的优缺点
Ajax的优点:
1)最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好。
2)使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。
3)把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
4)基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
Ajax的缺点:
1)ajax干掉了back按钮,即对浏览器后退机制的破坏。
2)安全问题
ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击。
3)对搜索引擎的支持比较弱
4)一些手持设备(如手机、PDA等)现在还不能很好的支持ajax
详解:http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html
http://www.jb51.net/article/74357.htm
3、AJAX机制,open的参数是什么
机制见1原理部分
open()有三个参数,第一个是要发送的请求类型(get或post),第二个:请求的URL 第三个:是否异步发送请求的布尔值
4、说说对Ajax的理解,怎么实现局部刷新,怎么将获取到的JSON 数据在页面中显示出来,JSON 序列化成了字符串后应该怎么处理
局部刷新:从服务器获得数据,然后用javascript来操作DOM而更新页面
如果返回的是JSON数据,
1. var str=xhr.responseText; 获取响应数据
2. var obj=JSON.parse(str); 解析JSON数据成为JS对象
3. 操作JS对象
比如JSON数据是:
[ { "term": "BACCHUS", "part": "n.", "definition": "A convenient deity invented by the ancients as an excuse for getting drunk.", "quote": [ "Is public worship, then, a sin,", "That for devotions paid to Bacchus", "The lictors dare to run us in,", "And resolutely thump and whack us?" ], "author": "Jorace" }, { "term": "BACKBITE", "part": "v.t.", "definition": "To speak of a man as you find him when he can't find you." }
]
上面的JSON是个数组,var obj=JSON.parse(str) 后就变成了JS对象数组
obj=[ { "term": "BACCHUS", "part": "n.", "definition": "A convenient deity invented by the ancients as an excuse for getting drunk.", "quote": [ "Is public worship, then, a sin,", "That for devotions paid to Bacchus", "The lictors dare to run us in,", "And resolutely thump and whack us?" ], "author": "Jorace" }, { "term": "BACKBITE", "part": "v.t.", "definition": "To speak of a man as you find him when he can't find you." }
]
现在得到了JS对象数组,因此可以正常操作JS
var str=xhr.responseText; //获得响应数据 var obj=JSON.parse(str); //解析成JS对象数组 var html=''; for(var i=0;i<obj.length;i++){ //遍历整个对象数组 html+='<div class="entry">'; html+='<div class="term">'+obj[i].term+'</div>'; //通过obj[i]获得数组中的某个对象,然后通过obj[i].term直接获取term对应的值 html+='<div class="part">'+obj[i].part+'</div>'; html+='<div class="definition">'+obj[i].definition; if(obj[i].quote){ html+='<div class="quote">'; for(var j=0;j<obj[i].quote.length;j++){ html+='<div class="quote-line">'+obj[i].quote[j]+'</div>'; } if(obj[i].author){ html+='<div class="author">'+obj[i].author+'</div>';
} html+='</div>'; } html+='</div>'; html+='</div>'; } document.getElementById('dictionary').innerHTML=html;
5、请解释 JSONP 的工作原理,以及它为什么不是真正的 AJAX
由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。
为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
Jsonp原理:
首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时,服务器先生成 json 数据。然后将这个callback参数作为函数名来包裹住JSON数据,返回给客户端。
客户端浏览器,动态执行回调函数,将返回的数据作为参数,传入到了客户端预先定义好的 callback 函数里.
ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。
缺陷:
第一,也是最重要的一点,没有关于 JSONP 调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。(未来的 jQuery 版本可能有终止 JSONP 请求的特性)。
JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应,而函数调用是由浏览器执行的,这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务,了解它能造成的威胁非常重要。
http://kb.cnblogs.com/page/139725/
JSONP (JSON with Padding)是一个简单高效的跨域方式,HTML中的script标签可以加载并执行其他域的javascript,于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据,那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据,然后在 pageA中用script标签把pageB加载进来,那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数,pageB加载完之后会执行pageA中定义的函数,所需要的数据会以参数的形式传递给该函数。JSONP易于实现,但是也会存在一些安全隐患,如果第三方的脚本随意地执行,那么它就可以篡改页面内容,截获敏感数据。但是在受信任的双方传递数据,JSONP是非常合适的选择。
