web前端面试

ajax

2020-03-10  本文已影响0人  Love大猪蹄子嘚MM

1.什么是Ajax呢?

Ajax是Asynchronous JavaScript and XML的缩写,核心是通过XMLHttpRequest对象进行异步获取的方法,向服务器发送数据请求,通过这个对象进行接收请求返回的数据。

jquery中的load()方法,进行获取异步数据。

load(url,[data],[callback]);

$.getJSON(url,[data],[callback]);$.getJSON("xxx.json",function(data){$.each(data,function(InfoIndex,Info){// 显示})})

通过全局函数getJSON()可以获取.json格式的文件内容

2.关于全局函数中的getScript()

通过全局函数getScript()可以获取.js文件内容

$.getScript(url,[callback])// 加载的js文件地址 和 加载成功时执行的回调函数

<script type="text/javascript">

     $(function(){

          $("#btn").click(function(){

                 $.getScript("User.js");

     }) })

</script>

$.getScript("User.js",function(){alert("加载成功");});

3.全局函数get()?

$.get(url,[data],[callback],[type])异步获取xml文档数据

$.get()请求数据

4.安全请求数据

$.post()请求数据

$.post(url,[data],[callback],[type]);

5.序列化表单效果

serialize()方法

<scripttype="text/javascript">

      $("#btn").click(function(){  

            $.post("User.aspx", $("#formUser").serialize(), 

                  function(data) {    $("div").empty.html(data);  }) 

      })

</script>

6.底层方法$.ajax()?

$.ajax([options]);

$.ajaxSetup([options]);

ajaxSuccess(callback) ajax请求成功时执行

ajaxStop(callback) ajax请求结束时执行

ajaxStart(callback) ajax请求开始时执行

ajaxComplete(callback) ajax请求完成时执行函数

ajaxError(callback) ajax请求发送错误时执行函数

ajaxSend(callback) ajax请求发送前执行函数

7.ajax常用参数说明

$.ajax({url,type,data,dataType,beforeSend,success,error})

8.ajax的最大特点是什么

Ajax可以实现动态不刷新(局部刷新)

就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。

9.ajax的优缺点

优点

1、最大的一点是页面无刷新,用户的体验非常好。

2、使用异步方式与服务器通信,具有更加迅速的响应能力。

3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。

缺点

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

10.ajax请求时,如何解释json数据

1.直接定义返回数据类型为json,

    $.ajax({

         url:"",

         dataType:"json"

    });

然后请求成功后返回的数据就是json数据,

2.直接使用JSON.parse ()

11. ajax请求的时候get 和post方式的区别和localStorage跟sessionStorage的区别?

get 和post方式的区别

get是把参数数据队列加到提交表单的action属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。

post是通过HTTP post机制,将表单内各个字段与其内容放置在html header内一起传送到action属性所指的URL地址。

用户看不到这个过程。

2、 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。

两种方式的参数都可以用Request来获得。

3、get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,因服务器的不同而异.

4、get安全性非常低,post安全性较高

总而言之post是把数据传输到HTTP中  而get是把数据传输到url中

如果传输的数据比较大用post数据小于2kb时用post传值

localStorage跟sessionStorage的区别 ?

1 本地存储localStorage是在手机端存储了一些数据,其实这些数据就是写在你手机里了,而sessionStorage是写在服务器里的,

2 它们两个都是变量,只不过一个是存在你手机里的,另一个是存在服务器里的,这就是它们大概的意思,

3 但是它们主要用在什么地方呢?比如本地存储localStorage,当我们点赞时,有5颗星 ,那么此时这个5就会被存储起来,再次刷时还是5颗星,

还有我们的登录状态,有个是否记住密码,那么我们登录一次之后,事实上,它就是把用户名,密码存储在本地的localStorage中了,

那么下次来,它首先是从localStorage中检测你用户名,密码在不在,如果在,那就直接添加到上面的input中了,那这样,只用点登录就进去了。

所以localStorage主要就是存储一些数据的,

4 sessionStorage就不一样了,sessionStorage是在服务器里为你保存数据,比如你登录一次,你在服务器那端,不管你访问多少个页面,

都会显示你是登录状态。只要是在它们网站,就都有这个登录状态,这就是因为你登录了一次之后,它在服务器那边,创建了一些数据,存储到sessionStorage里面了,

那后面所有的页面都检测sessionStorage里面的数据,有,那就是登录状态,没有,则就是没有登录,另外,还有像网页的浏览人次那个计数器,本条评论有多少人浏览或者点赞,

这些数据都是存在sessionStorage或localStorage中的。

12.什么是ajax和JSON,它们的优缺点

Ajax就是支持异步请求,用户体验较为良好的一门技术

JSON就是一种简单的文本格式

ajax

优点:

    1.页面无刷新,在页面内与服务器通信,用户体验非常好

    2.基于标准化的并被广泛支持的技术

缺点:

    1.ajax干掉了back按钮

    2.安全问题

    3.搜索引擎较弱

    4.破坏了程序的异常机制

    5.如果用户禁用了JS就找不到数据了

JSON

优点:

    1.数据格式比较简单,易于读写

    2.易于解析

    3.支持多种语言

缺点:

    1.没有XML格式推广的那么广泛

13.简述ajax的过程

getData(url, fn) {

    // 实例化XMLHttpRequest对象

    var xhr = new XMLHttpRequest();

    // 监听状态

    xhr.onreadystatechange = () => {

    // 数据请求完毕             判断状态码

        if (xhr.readyState === 4&&xhr.status === 200) {

            // 将数据转化成json在、数组

            fn && fn(JSON.parse(xhr.responseText))

            }

        }

        // 打开数据请求   请求方式,路径,同步false 异步true(默认)

    xhr.open('get/post', "路径", "true/false");

    // 发送数据

        xhr.send(null)

    }

14.解释jsonp的原理,以及为什么不是真正的ajax

ajax和jsonp的调用方式很像,目的一样,都是请求url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;

ajax的核心是通过xmlHttpRequest获取非本页内容jsonp的核心是动态添加script标签调用服务器提供的js脚本(后缀.json)  

区别联系不在于是否跨域ajax通过服务端代理一样跨域jsonp也不并不排斥同域的数据的获取

jsonp是一种方式或者说非强制性的协议ajax也不一定非要用json格式来传递数据

jsonp只支持get请求,ajax支持get和post请求

15.什么是AJAX,为什么要使用Ajax(请谈一下你对Ajax的认识)

AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。

Ajax包含下列技术:

基于web标准(standards-basedpresentation)XHTML+CSS的表示;

使用 DOM(Document ObjectModel)进行动态显示及交互;

使用 XML 和 XSLT 进行数据交换及相关操作;

使用 XMLHttpRequest 进行异步数据查询、检索;

使用 JavaScript 将所有的东西绑定在一起。

16.为什么要用ajax:

Ajax应用程序的优势在于:

通过异步模式,提升了用户体验

优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用

Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。

17.请介绍一下XMLhttprequest对象。

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。通过XMLHttpRequest对象,Web开发人员可以在页面加载以后进行页面的局部更新。

18.AJAX技术体系的组成部分有哪些。

HTML,css,dom,xml,xmlHttpRequest,javascript

19.AJAX应用和传统Web应用有什么不同。

在传统的Javascript编程中,如果想得到服务器端数据库或文件上的信息,或者发送客户端信息到服务器,需要建立一个HTML form然后GET或者POST数据到服务器端。用户需要点击”Submit”按钮来发送或者接受数据信息,然后等待服务器响应请求,页面重新加载。

因为服务器每次都会返回一个新的页面, 所以传统的web应用有可能很慢而且用户交互不友好。

使用AJAX技术, 就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。

通过HTTP Request, 一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面),展示给用户的还是通一个页面,用户感觉页面刷新,也看不到到Javascript后台进行的发送请求和接受响应。

20.AJAX请求总共有多少种CALLBACK。

Ajax请求总共有八种Callback

onSuccess  onFailure  onUninitialized  onLoading  onLoaded  onInteractive  onComplete  onException

21.Ajax和javascript的区别。

javascript是一种在浏览器端执行的脚本语言,Ajax是一种创建交互式网页应用的开发技术 ,它是利用了一系列相关的技术其中就包括javascript。

Javascript是由网景公司开发的一种脚本语言,它和sun公司的java语言是没有任何关系的,它们相似的名称只是一种行销策略。

在一般的web开发中,javascript是在浏览器端执行的,我们可以用javascript控制浏览器的行为和内容。

在 Ajax应用中信息是如何在浏览器和服务器之间传递的

通过XML数据或者字符串

22.在浏览器端如何得到服务器端响应的XML数据。

XMLHttpRequest对象的responseXMl属性

23. XMLHttpRequest对象在IE和Firefox中创建方式有没有不同。

有,IE中通过new ActiveXObject()得到,Firefox中通过newXMLHttpRequest()得到

24.介绍一下XMLHttpRequest对象的常用方法和属性。

open(“method”,”URL”) 建立对服务器的调用,第一个参数是HTTP请求    方式可以为GET,POST或任何服务器所支持的您想调用的方式。

第二个参数是请求页面的URL。

send()方法,发送具体请求

abort()方法,停止当前请求

readyState属性  请求的状态 有5个可取值

0=未初始化 ,1=正在加载   2=以加载,3=交互中,4=完成

responseText 属性  服务器的响应,表示为一个串

reponseXML 属性 服务器的响应,表示为XML

status  服务器的HTTP状态码,200对应ok  400对应not found

25.什么是XML

XML是扩展标记语言,能够用一系列简单的标记描述数据

26.XML的解析方式

常用的用dom解析和sax解析。dom解析是一次性读取xml文件并将其构造为DOM对象供程序使用,优点是操作方便,但是比较耗内存。Sax是按事件驱动的方式解析的,占用内存少,但是编程复杂

27.你采用的是什么框架(架包)

这题是必问的,一般也是最开始就会问到。

在java中比较流行的有 dojo, Prototype , JQuery, Dwr, extjs  等等

 28.如果熟悉某种ajax框架,他可能会问到怎样在程序中使用这种框架

DWR框架介绍

DWR(DirectWeb Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).

DWR的实现原理是通过反射,将java翻译成javascript,然后利用回调机制,从而实现了javascript调用Java代码

29.介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用

$() 方法是在DOM中使用过于频繁的document.getElementById() 方法的一个便利的简写,就像这个DOM方法一样,这个方法返回参数传入的id的那个元素。

$F()函数是另一个大收欢迎的“快捷键”,它能用于返回任何表单输入控件的值,比如textbox,drop-down list。这个方法也能用元素id或元素本身做为参数。

$A()函数能把它接收到的单个的参数转换成一个Array对象。

30.介绍一下XMLHttpRequest对象

通过XMLHttpRequest对象,Web开发人员可以在页面加载以后进行页面的局部更新。

AJAX开始流行始于Google在2005年使用的”Google Suggest”。

“Google Suggest”就是使用XMLHttpRequest对象来创建动态的Web接口:

当用户开始输入google的搜索框,Javascript发送用户输入的字符到服务器,然后服务器返回一个建议列表。

XMLHttpRequest对象在IE5.0+, Safari 1.2, Mozilla1.0/Firefox, Opera 8+ 和NetScapt7 开始被支持。

31.AJAX的全称是什么? 介绍一下AJAX?

AJAX的全称是Asynchronous JavaScript And XML.

AJAX是2005年由Google发起并流行起来的编程方法, AJAX不是一个新的编程语言,但是它是一个使用已有标准的新的编程技术。

使用AJAX可以创建更好,更快,更用户界面友好的Web应用。

AJAX技术基于Javascript和HTTP Request.

32.Ajax主要包含了哪些技术?

Ajax(Asynchronous JavaScript + XML)的定义

基于web标准(standards-based presentation)XHTML+CSS的表示;

使用 DOM(Document Object Model)进行动态显示及交互;

使用 XML 和 XSLT 进行数据交换及相关操作;

使用XMLHttpRequest 进行异步数据查询、检索;

使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文,原文题目(Ajax: A New Approach to Web Applications)。

类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。

AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。

上一篇下一篇

猜你喜欢

热点阅读