JS面试——AJAX


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是非常合适的选择。


免责声明!

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



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