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><p>16.点击按钮向后台发起请求，将返回的数据直接输出，如果3秒内没有获得返回的数据则显示“请求超时，请重新提交”，写代码</p><pre class='brush:php;toolbar:false;'>varajaxTimeoutTest = $.ajax({
url:&#39;&#39;,  //请求的URL
timeout : 1000, //超时时间设置，单位毫秒
type : &#39;get&#39;,  //请求方式，get或post
data :{},  //请求所传参数，json格式
dataType:&#39;json&#39;,//返回的数据格式
success:function(data){ //请求成功的回调函数
alert("成功");
},
complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
if(status==&#39;timeout&#39;){//超时,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

优点：

.無刷新更新資料。
AJAX最大優點就是能在不刷新整個頁面的前提下與伺服器通訊維護資料。這使得Web應用程式更為迅捷地響應用戶交互，並避免了在網路上發送那些沒有改變的訊息，減少用戶等待時間，帶來非常好的用戶體驗。
.非同步與伺服器通訊。
AJAX使用非同步方式與伺服器通信，不需要打斷使用者的操作，具有更迅速的回應能力。優化了Browser和Server之間的溝通，減少不必要的資料傳輸、時間及降低網路上資料流量。
.前端與後端負載平衡。
AJAX可以把以前一些伺服器負擔的工作轉嫁到客戶端，利用客戶端閒置的能力來處理，減輕伺服器和頻寬的負擔，節省空間和寬頻租用成本。並且減輕伺服器的負擔，AJAX的原則是「按需取資料##」，可以最大程度的減少冗餘請求和回應對伺服器造成的負擔，提升網站效能。
.基於標準廣受支持。
AJAX基於標準化的並被廣泛支援的技術，不需要下載瀏覽器外掛程式或小程序，但需要客戶允許JavaScript在瀏覽器上執行。隨著Ajax的成熟，一些簡化Ajax使用方法的程式庫也相繼問世。同樣，也出現了另一種輔助程式設計的技術，為那些不支援JavaScript#的使用者提供替代功能。
.介面與應用程式分離。
Ajax使WEB中的介面與應用程式分離（也可以說是資料與呈現分離），有利於分工合作、減少非技術人員對頁面的修改造成的WEB應用程式錯誤、提高效率、也更加適用於現在的發布系統。

缺點：#

.AJAX幹掉了Back和History功能，即對瀏覽器機制的破壞。
在動態更新頁面的情況下，使用者無法回到前一個頁面狀態，因為瀏覽器只能記憶歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差別非常微妙；用戶通常會希望單擊後退按鈕能夠取消他們的前一次操作，但是在Ajax在應用程式中，這將無法實現。
後退按鈕是一個標準的web網站的重要功能，但是它沒法和 js進行很好的合作。這是Ajax所帶來的一個比較嚴重的問題，因為使用者往往是希望能夠透過後退來取消前一次的操作。那麼對於這個問題有沒有辦法呢？答案是肯定的，用過Gmail的知道，Gmail下面採用的Ajax技術解決了這個問題，在Gmail下面是可以後退的，但是，它也不能改變Ajax的機制，它只是採用的一個比較笨但是有效的辦法，即用戶單擊後退按鈕訪問歷史記錄時，通過創建或使用一個隱藏的IFRAME##來重現頁面上的變更。 （例如，當用戶在Google Maps中單擊後退時，它在一個隱藏的IFRAME中進行搜索，然後將搜尋結果反映到Ajax元素上，以便將應用程式狀態恢復到當時的狀態。）
但是，雖然說這個問題是可以解決的，但是它所帶來的開發成本是非常高的，並且與Ajax框架所要求的快速開發是相背離的。這是Ajax所帶來的一個非常嚴重的問題。
一個相關的觀點認為，使用動態頁面更新使得使用者難以將某個特定的狀態儲存到收藏夾中。這個問題的解決方案也已出現，大部分都使用URL片段標識符（通常被稱為錨點，即##URL #中#後面的部分）來保持跟踪，允許使用者回到指定的某個應用程式狀態。 （許多瀏覽器允許JavaScript動態更新錨點，這使得Ajax應用程式能夠在更新顯示內容的同時更新錨點.）這些解決方案也同時解決了許多關於不支援後退按鈕的爭論。 #.AJAX的安全性問題。
AJAX技術為使用者帶來很好的使用者體驗的同時也對IT#企業帶來了新的安全威脅，Ajax技術就如同對企業資料建立了一個直接通道。這使得開發者在不經意間會暴露比以前更多的資料和伺服器邏輯。 Ajax的邏輯可以對客戶端的安全掃描技術隱藏起來，讓駭客可以從遠端伺服器建立新的攻擊。還有Ajax也難以避免一些已知的安全弱點，諸如跨站點腳步攻擊、##SQL注入攻擊和基於Credentials的安全漏洞等等。
.對搜尋引擎支援較弱。
對搜尋引擎的支援比較弱。若使用不當，AJAX會增加網路資料的流量，進而降低整個系統的效能。
.破壞程式的例外處理機制。
至少從目前看來，像Ajax.dll，Ajaxpro.dll#這些Ajax框架是會破壞程式的例外機制的。關於這個問題，曾在開發過程中遇到過，但是查了一下網路上幾乎沒有相關的介紹。後來做了一次試驗，分別採用Ajax和傳統的form提交的模式來刪除一條資料 ……給我們的調試帶來了很大的困難。
.違背URL和資源定位的初衷。
例如，我給你一個URL位址，如果採用了Ajax技術，也許你在該URL地址下面看到的和我在這個URL地址下看到的內容是不同的。這個和資源定位的初衷是相背離的。
.AJAX#不能很好支援行動裝置。 #一些手持裝置（如手機、PDA等）現在還不能很好的支援Ajax#，例如當我們說我們在手機的瀏覽器上打開採用Ajax技術的網站時，它目前是不支援的。
.客戶端過肥，太多客戶端程式碼造成開發上的成本。
寫複雜、容易出錯；冗餘程式碼比較多（層層包含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>p</p>
2. 用dom的on...方法添加document.getElementById('p').onclick = function () {alert('p')};
3. 用事件监听addEventListener或attachEvent（IE）添加document.getElementById('p').addEventListener('click', function () {alert('p')}, 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影片教學

以上是AJAX常見面試問題大匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章！