AJAX常见面试问题大汇总

【相关专题推荐：ajax面试题（2020）】

1.工作当中会和后台交互吗？  那你能说说封装好的 ajax里的几个参数吗 ？

url:  发送请求的地址。

type: 请求方式（post或get）默认为get。

async: 同步异步请求，默认true所有请求均为异步请求。

timeout : 超时时间设置，单位毫秒

data：要求为Object或String类型的参数，发送到服务器的数据

cache：默认为true（当dataType为script时，默认为false）, 设置为false将不会从浏览器缓存中加载请求信息。

dataType: 预期服务器返回的数据类型。

可用的类型如下：

xml：返回XML文档，可用JQuery处理。

html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。

script：返回纯文本JavaScript代码。不会自动缓存结果。

json：返回JSON数据。

jsonp：JSONP格式。使用JSONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。

text：返回纯文本字符串。

success：请求成功后调用的回调函数，有两个参数。

(1)   由服务器返回，并根据dataType参数进行处理后的数据。

(2)   描述状态的字符串。

error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数

(1) XMLHttpRequest对象

(2) 错误信息

(3) 捕获的错误对象(可选)

complete :function(XMLHttpRequest,status){ //请求完成后最终执行参数

【专题推荐】：2020年ajax面试题及答案（最新）

2.json数据  如果怎么处理  他的格式 你以前工作中有没有固定格式  如果我发送一个请求 删除数据里的一条数据 我怎么知道删除成功了 或者说 删除后 会在哪里显示

JSON.parse() 转换为JSON对象，根据数据进行解析，放到页面中。

格式：{} 与 [] 结合拼接的JSON串

发送请求删除数据，后台会返回处理的结果，前台根据返回的结果判断是否成功，然后处理页面元素。

3.有没有遇到过这种情况 在ie浏览器中 后台图片数据已经改变 但是客户端没有发生改变  该怎么处理？ 他提示说浏览器的缓存

JQuery.ajax() 方法，设置cache为false，就不会从浏览器缓存中加载请求，

或者利用post方法，请求数据，不会缓存，每次都是重新请求数据

4.选项卡的实现思路

鼠标悬浮时间，调用方法，传入this，对所有的选项卡内容部分隐藏操作，对this的进行显示操作，控制display

5.级联  的实现思路

一般地区数据都是利用二维数组存储，从后台获取到以后存储起来，根据第一个下拉框的选项，找到对应的二维数组数据，循环new Option() add进下拉框

6. 轮播图的实现思路

第一种：

把图片名称按顺序取好名字，利用定时器，每隔多少秒，更换图片的路径

第二种：

利用无缝滚动的技术，把图片都放入页面中，定时器进行scroll滚动，判断滚动距离取余(%) 图片宽度等于0，暂停定时器，多少秒后再开启定时器。

7.说说你理解中的bootstrap

Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，只需要给标签起上响应的Class名称，就可以形成一套Bootstrap自己独有的网站风格，并兼容大部分jQuery插件。

8.angularjs和JQ的区别

JQ 先获取再使用。

Angularjs 直接使用

9.JQmobile和JQ的区别

jQuery Mobile 是创建移动 web 应用程序的框架。jQuery Mobile 适用于所有流行的智能手机和平板电脑。jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局

(1) jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
(2) jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。
(3) jQuery本身注重于后台，没有漂亮的界面，而jQuery UI则补充了前者的不足，他提供了华丽的展示界面，使人更容易接受。既有强大的后台，又有华丽的前台。jQuery UI是jQuery插件，只不过专指由jQuery官方维护的UI方向的插件。

10.你工作当中用过那些库？

jQuery

11.（1）冒泡排序，60秒倒计时，（2）页面加载更多li时怎么处理后台反回的json数据

1.双重循环，从第一位开始判断与后面每一位的大小，如果符合条件利用下面的原理换位置

c = a;

a = b;

b = c;

2.利用JSON.parse() 获得相应的JSON对象，循环添加li，数据放进去。

12.全选的实现思路

点击全选复选框时，判断checked是true还是false，是true证明全都选中，获取到下面所有的对应的复选框，把checked改成true，否则改成false。

13.有一个输入框，只允许输入数字或字母，如果输入不合法则将输入框的边框变为红色，写代码

       var reg =/^[a-zA-Z0-9]+$/;
       if(!reg.text(输入框取出的value)){
              input.style.border= “red”;
};

14.有一个数组a=[1,2,3]，如果数字a中包含1，则将数组内容复制一遍变为[1,2,3,1,2,3],写代码

       for(var i = 0;i<a.length;i++){
              if(a[i] ==1){
                     a.concat(a);
                     break;
}
}15.写一个函数，用于生产随机密码，传入的参数为密码的长度，返回生产的随机密码，要求生成的随机密码必须含有大写字母、小写字母和数字

var padArr = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","0","1","2","3","4","5","6","7","8","9"];var padStr = "";function asd(length){
    for(var i = 0 ; i<length;i++){
        padStr += padArr[Math.floor(Math.random()*padArr.length)];
    }
}

16.点击按钮向后台发起请求，将返回的数据直接输出，如果3秒内没有获得返回的数据则显示“请求超时，请重新提交”，写代码

varajaxTimeoutTest = $.ajax({
url:'',  //请求的URL
timeout : 1000, //超时时间设置，单位毫秒
type : 'get',  //请求方式，get或post
data :{},  //请求所传参数，json格式
dataType:'json',//返回的数据格式
success:function(data){ //请求成功的回调函数
alert("成功");
},
complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
if(status=='timeout'){//超时,status还有success,error等值的情况
  ajaxTimeoutTest.abort();//终止请求
  alert("超时");
}
}
});

17.ajax的四部：

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("post||get","URL",true||false);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = callBack;
xmlhttp.send(null);

18.ajax接受到的数据类型是什么？

String

JSON串

JSON对象

19.ajax接受到的数据如何处理？

JSON对象直接循环使用

JSON串转JSON使用

String直接使用

20.哪些地方需要ajax，哪些地方不需要，ajax的优点是什么，缺点是什么？

页面不进行跳转刷新的时候，异步处理数据的时候，表单自动补全功能----使用Ajax，

提交后不再使用原页面，可以进行跳转刷新的，查询之类的功能，可以不用Ajax

优点：

<1>.无刷新更新数据。
AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
<2>.异步与服务器通信。
AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
<3>.前端和后端负载平衡。
AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
<4>.基于标准被广泛支持。
AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。
<5>.界面与应用分离。
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

缺点：

<1>.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是Ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的Ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变Ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）
但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，并与Ajax框架所要求的快速开发是相背离的。这是Ajax所带来的一个非常严重的问题。
一个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现，大部分都使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持跟踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关于不支持后退按钮的争论。
<2>.AJAX的安全问题。
AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。
<3>.对搜索引擎支持较弱。
对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。
<4>.破坏程序的异常处理机制。
至少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。关于这个问题，曾在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来做了一次试验，分别采用Ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。
<5>.违背URL和资源定位的初衷。
例如，我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
<6>.AJAX不能很好支持移动设备。
一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax，比如说我们在手机的浏览器上打开采用Ajax技术的网站时，它目前是不支持的。
<7>.客户端过肥，太多客户端代码造成开发上的成本。
编写复杂、容易出错；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准。

21.你对于跨域请求了解多少？

同源策略规定在访问时如果域名，协议，端口与发起请求的地方不一致时，就属于跨域请求，

这种时候，需要使用一些跨域请求的技术，

一：

利用JQuery的方法，使用JSONP模式访问，dataType：‘jsonp’并且再url后传入callback=?

JQuery会生成随机回调函数名称，或者你自己起名字。

后台会获取callback的值，连接上() 把数据放入() 中，返回页面，

相当于调用函数function名(data)。

二：

使用js标签加载方式

利用script标签 src写想要请求的URL，地址后面连接上参数？callback= 函数名

后台会获取callback的值，连接上() 把数据放入() 中，返回页面，

相当于调用函数function名(data)

三：

后台直接开启同源策略的访问限制，设置响应头信息。

response.setHeader("Access-Control-Allow-Origin","*");

22.如何控制网页在网络传输中的数据量？

分页加载，瀑布流，限制每次加载的数据量。(??????不确定)

23.前端常规开发优化策略？

• 请减少HTTP请求

• 请正确理解 Repaint 和 Reflow

• 请减少对DOM的操作

• 使用JSON格式来进行数据交换

• 高效使用HTML标签和CSS样式

• 使用CDN加速（内容分发网络）

• 将CSS和JS放到外部文件中引用，CSS放头，JS放尾

• 精简CSS和JS文件（压缩）

• 压缩图片和使用图片Sprite技术

• 注意控制Cookie大小和污染

24.为什么异步加载JS文件？加载方式？

平时常用的引入JS方式，是同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，也就是说，浏览器在下载或执行该js代码块时，后面的标签不会被解析。

异步加载（async）JS文件，允许页面内容异步加载，仅适用于外部脚本。

延迟加载（defer）属性规定是否对脚本执行进行延迟，直到页面加载为止。

25.如果对一个js对象进行深度拷贝？

varajaxTimeoutTest = $.ajax({
url:'',  //请求的URL
timeout : 1000, //超时时间设置，单位毫秒
type : 'get',  //请求方式，get或post
data :{},  //请求所传参数，json格式
dataType:'json',//返回的数据格式
success:function(data){ //请求成功的回调函数
alert("成功");
},
complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
if(status=='timeout'){//超时,status还有success,error等值的情况
  ajaxTimeoutTest.abort();//终止请求
  alert("超时");
}
}
});

26.JS中有哪些数据类型？

number boolean string underfind null

object function array

27.ajax交换模型？同步异步的区别？

• 触发事件调用函数

• 创建XMlHttpRequest 对象open连接，send发送后台服务器

• 后台接收前端数据，根据业务需求访问数据库进行增删改查

• 数据库返回后台程序所需要的数据

• 后台拿到数据库数据，进行合理的处理，比如JSON串，返回给前端

• 前端接收到后台的响应数据，进行解析，根据业务需求动态操作页面元素

28.如何添加HTML事件，三种。

1. 直接在html标签的属性上添加<p οnclick="alert(&#39;p&#39;)">p</p>
2. 用dom的on...方法添加document.getElementById(&#39;p&#39;).onclick = function () {alert(&#39;p&#39;)};
3. 用事件监听addEventListener或attachEvent（IE）添加document.getElementById(&#39;p&#39;).addEventListener(&#39;click&#39;, function () {alert(&#39;p&#39;)}, false);

29.JS面向对象中继承的实现方式？

简单继承：

function A(x){
 　　this.x=x;
}

function B(x,y){
 　　this.tmpObj=A;
 　　this.tmpObj(x);
 　　delete this.tmpObj;
 　　this.y=y;
}

完美继承：

function AA(x){
    this.x = x;}AA.prototype.xxx = 2;function Obj(){
    AA.call(this,22);
    this.cc = 11;
    this.constructor = arguments.callee;
}Obj.prototype = new AA();var obj = new Obj();

30.编写一个方法，判断字符串是否是这样的组成，第一个必须是字母，最后一个必须是数字。

function checkStr(str){
       var diyige =str.subStr(0,1);
       var dierge =str.subStr(str.length-1,1);
var reg = /^[a-zA-Z]$/ 
if(reg.test(diyige) &&!isNAN(dierge)){
//第一个是字母,最后一个是数字
}
}

31.如何隐藏一个DOM元素？

Object.style.dispaly = “none”; || Object.style.visibility = “hidden”;

32.document.write，innerHTML和innertext区别是什么？

• document.write只能重绘整个页面

• innerHTML可以重绘页面的一部分(包含标签+文字)

• innertext可以重绘页面的一部分(只包含文字)

33.字符串abcdefg把de换成12，b后面接le，写出JS。

var str = “abcdefg”;
str = str.replace(“de”,”12”);
str = str.replace(“b”,”b1e”);

或者

var str = “abcdefg”;
str = str.split(“de”,”12”);
var str1 =str.subString(0,str.indexOf(‘b’)+1);
var str2 =str.subString(str.indexOf(‘b’)+1);
str = str1+”1e”+str2;

34.判断每个字符出现的次数：hello，最后显示： h:1,e:1,l:2,o:1.

var str = “hello”;
var o = [];
for(var i = 0 ;i<str.length;i++){
if(str.indexOf(str[i]) == i){
o[str[i]] = str.split(str[i]).length-1;
}
}
console.log(o);

35.使用CSS3动画效果实现一个小球的来回滚动。

36.h5的canvas画板如何实现会旋转的地球仪效果？（说出思想）

37.如何使过长的字体自动隐藏？

text-overflow: 
hidden
;

38.一个H5+C3的鼠标悬停效果？

39.移动端跟PC端的js文件区别？

40.如何处理一些手机端的兼容性？

41.IE浏览器兼容性，你了解哪些，简单举例子。

addEventListener() || attachEvent()

42.谈谈你对框架的理解。

对功能进行封装，使用者直接调用，或对样式进行预设置，使用者直接起名字

43.如何实现跨域？具体怎么实现？

第一种：

JSONP，利用传递方法名的方式，告诉后台前端方法名是什么，后台取到后，在名称后面拼接（），把数据（DATA）放到小括号中，返回前端，相当于返回：方法名（data）到前端后就直接调用这个方法了。

$.get(“ULR?callback=?”,function(data){
console.log(data);
})

第二种：

前端正常Ajax访问，后台开启同源策略限制！

“Access-Control-Allow-Origin”,”*”

44.对后台语言了解几种，如果了解其中一种，举例说明一个？

45.与后台的交互，AJAX只是其中的一小部分，其他的知道吗？

46.在上一家公司的要上线作品的具体流程是什么？

前后台项目整合，测试，上线

47.手机端和PC端有什么区别，需要注意哪些方面？

本质上没有什么太大的区别，需要注意一些浏览器的兼容问题。

48.用JQ完整的写出AJAX与后台交互的方法。

$.get(“url”,function(data){
 
});
 
$.post(“url”,{data},function(data){
 
});
 
$.ajax({
url:””,
......
.....
....
});

49.编写一段jq的方法扩展。

50.ECMAScript6怎么写class. 为什么会出现class这种东西？

51.如何判断一个对象是否属于某个类？

var obj = new String("abc"); 
alert(obj instanceof String);

52.使用过哪些可视化控件？

53.什么是闭包？

简单理解成：定义在一个函数内部的函数

闭包本质：将函数内部和函数外部连接起来的一座桥梁

最大用处：

1、可以读取函数内部变量

2、就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在

54.eval可以计算某个字符串，有没有更好的方式？

55.初始化CSS除了浏览器兼容还有什么作用？

相关文章推荐：ajax视频教程

Atas ialah kandungan terperinci AJAX常见面试问题大汇总. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!