A summary of common AJAX interview questions

[Related topic recommendations: ajax interview questions (2020)]

1. Will you do it at work? Interact with the background? Then can you talk about a few parameters in the encapsulated ajax?

url: The address to send the request.

type: Request method (post or get ) defaults to get.

async: Synchronous asynchronous requests, default trueAll requests are asynchronous requests.

timeout: Timeout setting in milliseconds

data: The requirement is ## Parameters of type #Object or String, data sent to the server

cache : The default is true (when dataType is script, Default is false) , set to false will not be retrieved from the browser Load request information in cache.

dataType: The data type expected to be returned by the server.

The available types are as follows:

xml: Returns XMLDocument, can be processed with JQuery.

html: Returns plain text HTML information; contains script The tag will be executed when DOM is inserted.

#script: Returns the plain text JavaScript code. Results are not cached automatically.

json: Returns JSON data.

jsonp：JSONP format. When calling a function using the form JSONP, for example myurl?callback=?, JQueryWill automatically replace the last "?" with the correct function name to execute the callback function.

text: Returns a plain text string.

success: The callback function called after the request is successful, has two parameters.

(1) The data returned by the server and processed according to the dataType parameters.

(2) A string describing the status.

error: requires a parameter of type Function, a function that is called when the request fails. This function has 3 parameters

(1) XMLHttpRequestobject

(2) Error message

(3) Captured error object(Optional)

##complete :function(XMLHttpRequest,status){ //Final execution parameters after the request is completed

[Topic Recommendation]:

2020 ajax interview questions and answers (latest)

JSON.parse() Convert to a JSON object, parse it based on the data, and put it on the page.

Format: {} and [] combined with spliced ​​JSONString

Send a request to delete data, the background will return the processing result, the frontend will judge whether it is successful based on the returned result, and then process the page elements.

JQuery.ajax() method, set cache to false, the request will not be loaded from the browser cache,

or use the post method to request data , will not be cached, and the data will be requested again every time

Mouse hover time, call method, pass inthis, partially hide the contents of all tabs, display this, and control display

Generally, regional data are stored using two-dimensional arrays, which are obtained from the background and stored later.According to the first options in a drop-down box, find the corresponding two-dimensional array data, loopnew Option() add into the drop-down box

The first one:

Name the pictures in order, and use the timer to change the path of the pictures every few seconds

Second type:

Use the seamless scrolling technology to put all the pictures into the page, and the timer will runscrollScroll, determine the scroll distance and take the remainder (%) The picture width is equal to 0, pause the timer , how many seconds before starting the timer.

Bootstrap is developed based on HTML5 and CSS3, it is developed in Based on jQuery, we have made more personalized and humanized improvements. You only need to give the tag the corresponding Class name. Form a set of Bootstrap's own unique website style, and is compatible with most jQuery plug-ins.

8. The difference between angularjs and JQ

JQ Get it first and then use it.

Angularjs Use directly

9. The difference between JQmobile and JQ

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

(1) jQuery is a js library that mainly provides selectors, property modifications, event binding, etc.
(2) jQuery UI is based on jQuery, using jQuery Extensibility, designed plug-in. Provides some commonly used interface elements, such as dialog boxes, dragging behaviors, resizing behaviors, etc.
(3) jQuery itself focuses on the background and does not have a beautiful interface, while jQuery UI supplements the deficiencies of the former , it provides a gorgeous display interface, making it easier for people to accept. There is both a powerful backstage and a gorgeous frontstage. jQuery UI is a jQuery plug-in, but it specifically refers to the official maintenance of jQuery The UI direction plug-in.

10. Which libraries have you used in your work?

jQuery

11. (1) Bubble sort, 60-second countdown, (2) How to handle the json data returned by the background when the page loads more li

1.Double loop, starting from the first bit and judging the size of each subsequent bit, if the conditions are met, use the following principle to change the position

c = a;

a = b;

b = c;

2.Use JSON.parse() to obtain the corresponding JSON object, and add ## in a loop #li, put the data in.

When clicking the select all check box, it is judged that checked is true or false, is it true prove that all are selected, Get all the corresponding check boxes below and change checked to true, otherwise change it to 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>.Update data without refreshing.
AJAXThe biggest advantage is that it can communicate with the server to maintain data without refreshing the entire page. This makes the Web application respond more quickly to user interactions and avoids sending unchanged information over the network, reducing user waiting time and bringing a very good user experience. .
<2>.Communicate with the server asynchronously.
AJAXUsing asynchronous communication with the server, there is no need to interrupt the user's operation, and it has a faster response capability. Optimized the communication between Browser and Server, reducing unnecessary data transmission, time and data traffic on the network.
<3>. Front-end and back-end load balancing.
AJAXYou can transfer some of the work previously burdened by the server to the client, and use the idle capabilities of the client to process it, reducing the burden on the server and bandwidth. , saving space and broadband rental costs. And to reduce the burden on the server, the principle of AJAX is“Get data on demand”, which can minimize the burden caused by redundant requests and responses on the server and improve site performance.
<4>.Widely supported based on standards.
AJAXBased on standardized and widely supported technology, there is no need to download browser plug-ins or applets, but customer permission is requiredJavaScriptExecuted on the browser. As Ajax matures, some libraries that simplify the use of Ajax have also come out. Similarly, another technology has emerged to assist programming, providing alternative functionality for users who do not support JavaScript.
<5>.The interface is separated from the application.
Ajax Separates the interface and application in WEB (it can also be said that data and presentation Separation) is conducive to division of labor and cooperation, reducing WEB application errors caused by non-technical personnel's modification of pages, improving efficiency, and is more suitable for the current publishing system.

shortcoming:

<1>.AJAX kills the Back and History functions, that is Breakage of browser mechanisms.
In the case of dynamically updated pages, users cannot return to the previous page state because the browser can only remember static pages in the history. The difference between a page that has been fully read and a page that has been dynamically modified is very subtle; users will often expect that clicking the back button will cancel their previous operation, but in Ajax Application, this will not be possible.
The back button is an important feature of a standard web site, but it cannot be compared with js Great cooperation. This is a serious problem caused by Ajax, because users often hope to cancel the previous operation by going back. So is there any solution to this problem? The answer is yes, those who have used Gmail know that Gmail is used below AjaxTechnology has solved this problem. You can go back under Gmail, but it cannot change the mechanism of Ajax , it is just a relatively stupid but effective method, that is, when the user clicks the back button to access the history, he creates or uses a hidden IFRAME to reproduce the content on the page. change. (For example, when the user clicks back in Google Maps, it searches in a hidden IFRAME and then The search results are reflected onto the Ajax element to restore the application state to its then-current state.)
However, although It is said that this problem can be solved, but the development cost it brings is very high, and is contrary to the rapid development required by the Ajax framework. This is a very serious problem caused by Ajax.
#A related point is that using dynamic page updates makes it difficult for users to save a specific state to favorites. Solutions to this problem have emerged, most using the URL fragment identifier (often called an anchor, i.e. URLThe part after ##) to keep track and allow the user to return to a specified application state. (Many browsers allow JavaScript to dynamically update anchors, which allows Ajax applications to update anchors simultaneously with the displayed content. .) These solutions also resolve many of the arguments surrounding back button support.
<2>.AJAX security issues.
AJAX Technology not only brings a good user experience to users, but also benefits IT enterprises Bringing new security threats, Ajax technology is like establishing a direct channel to enterprise data. This allows developers to inadvertently expose more data and server logic than before. The logic of Ajax can be hidden from client-side security scanning technology, allowing hackers to create new attacks from remote servers. And Ajax is also difficult to avoid some known security weaknesses, such as cross-site scripting attacks, SQL injection attacks and ##-based Security vulnerabilities of #Credentials and so on.
<3>.Weak support for search engines.
The support for search engines is relatively weak. If used improperly, AJAX will increase network data traffic, thereby reducing the performance of the entire system.
<4>.Destroy the exception handling mechanism of the program.
At least for now, like Ajax.dll, Ajaxpro.dll TheseAjax frameworks will destroy the exception mechanism of the program. Regarding this problem, I have encountered it during the development process, but after checking, there is almost no relevant introduction on the Internet. Later, I did an experiment and used Ajax and the traditional form submission mode to delete a piece of data …… brings great difficulties to our debugging.
##<5>.Violates the original intention of URL and resource positioning.
For example, if I give you a URL address, if Ajax# is used ##Technology, maybe what you see under this URL address is the same as what I see under this URL address. different. This is contrary to the original intention of resource positioning. <6>.AJAX
does not support mobile devices well. Some handheld devices (such as mobile phones, PDA, etc.) currently cannot support Ajax, such as When we open a website using Ajax technology on a mobile browser, it is currently not supported.
##<7>.The client is too fat, and too much client code causes development costs.
Complex writing and error-prone; there are many redundant codes (layers contain js files It is a common problem of AJAX, plus a lot of server-side code in the past is now placed on the client); it destroys the original purpose of Web There are standards.

The same-origin policy stipulates that if the domain name, protocol, and port are inconsistent with the place where the request is initiated, it is a cross-domain request.

This kind of Sometimes, you need to use some cross-domain request technology,

1:

                                                                                                                                                                                                                                                      ## JQuery method, accessed using JSONP mode, dataType: 'jsonp' and then url and then pass in callback=?

The background will get the value of

, connect it to () and put the data Enter () and return to the page. is equivalent to calling the function

name (data). Two:

jsTag loading method                 

script tag src to write the request URL, connect the parameters after the address? callback= Function name

callback value, connect to () Put the data into () , return to the page, Equivalent to calling function

Name(data)Three:

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

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, is to keep these variables in the memory, that is, the closure can make its birth environment always exist

54.eval can calculate a certain String, is there a better way?

55. What else does initialization CSS do besides browser compatibility?

Recommended related articles: ajax video tutorial

The above is the detailed content of A summary of common AJAX interview questions. For more information, please follow other related articles on the PHP Chinese website!