AJAX 面接でよくある質問の概要

[関連トピックの推奨事項: ajax 面接の質問 (2020)]

1. 実行しますか?仕事中ですか?背景と対話しますか?それでは、カプセル化された ajax のいくつかのパラメーターについて話してもらえますか?

url: リクエストを送信するアドレス。

タイプ: リクエスト メソッド (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

: リクエストが成功した後に呼び出されるコールバック関数には 2 つのパラメータがあります。 (1)

サーバーから返され、dataType パラメーターに従って処理されたデータ。 (2)

ステータスを説明する文字列。

error: タイプ Function のパラメーターが必要です。これは、リクエストが失敗したときに呼び出される関数です。この関数には 3 パラメータ

(1) XMLHttpRequestobject

(2) エラー メッセージ

(3) キャプチャされたエラー オブジェクト( Optional#)

complete :function(XMLHttpRequest,status){ //

リクエスト完了後の最終実行パラメータ#[トピックの推奨事項]:

2020 ajax 面接の質問と回答 (最新)

2.json データを以前使用していた形式で処理する方法があるかどうか仕事で固定フォーマットを使用していますか? データ内のデータの一部を削除するリクエストを送信した場合、削除が成功したことはどのようにしてわかりますか? または、削除後にどこに表示されますか?

JSON .parse()

JSON オブジェクトに変換し、データに基づいて解析し、ページに配置します。 形式:

{} と [] を結合した JSONStringデータ削除リクエストを送信すると、バックグラウンドが処理結果を返し、フロントエンドがその結果に基づいて成功したかどうかを判断します。返された結果を返し、ページ要素を処理します。

3. IE ブラウザで、背景画像データは変更されているのに、クライアントは変更されていない、という状況に遭遇したことはありませんか?彼は、ブラウザのキャッシュ

JQuery.ajax()

メソッドで cache を false に設定するよう求めました。 、リクエストはブラウザ キャッシュからロードされません。 または

post メソッドを使用してデータをリクエストします。 、キャッシュされず、データは毎回再度リクエストされます4. タブの実装アイデア

マウスホバー時間、メソッドの呼び出し、渡し

this、すべてのタブの内容を部分的に非表示にし、this を表示し、display ## を制御します#5. カスケードの実装アイデア

一般に、地域データは 2 次元配列を使用して保存され、バックグラウンドから取得され、後で保存されます。ドロップダウン ボックスの最初のオプションに従って、対応する 2 次元配列データを見つけます。loop

new Option() add

をドロップダウン ボックス ## に追加します。 #6. カルーセル チャートの実装アイデア最初のアイデア:

画像に順番に名前を付け、タイマーを使用してパスを変更します。数秒ごとに画像を表示

2 番目のタイプ:

シームレス スクロール テクノロジーを使用して、すべての画像をページに配置すると、タイマーが作動します。 run

scroll#スクロール、スクロール距離を決定し、残りを取得します

(%)

画像の幅は ## に等しいです#0、タイマーを一時停止します。タイマーを開始する前に何秒かかります。 7. ブートストラップについて理解していることを話してください

Bootstrap は HTML5 および CSS3 に基づいて開発されており、# で開発されています。 ##jQuery に基づいて、よりパーソナライズされ、人間らしい改良が加えられました。タグに対応する Class 名を付けるだけです。 Bootstrap 独自の独自の Web サイト スタイルのセットであり、ほとんどの 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) ページの読み込み時にバックグラウンドで返される JSON データの処理方法li

1.

二重ループ。最初のビットから開始して後続の各ビットのサイズを判断し、条件が満たされる場合は、次の原則を使用して位置を変更しますc = a;

a = b;

b = c;

2.

JSON.parse() を使用して、対応する JSON# を取得します## オブジェクトを追加し、ループ #li に ## を追加し、データを入れます。 12. 全選択の実装アイデア全選択チェックボックスをクリックすると、

チェックが入ったと判断されます

は true または false ですか、true はすべてであることを証明しますselected、 以下の対応するチェック ボックスをすべて取得し、checked を true に変更します。それ以外の場合は # に変更します。 ＃＃＃＃＃ 間違い＃＃＃＃＃＃。

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 マップ に戻ると、非表示の IFRAME が検索され、検索結果が反映されます。 Ajax 要素に追加して、アプリケーションの状態をその時点の現在の状態に復元します。)
ただし、こうは言われていますが、この問題は解決可能ですが、開発コストが非常に高くつくため、Ajax フレームワークで必要とされる迅速な開発とは相反します。これは、Ajax によって引き起こされる非常に深刻な問題です。
#関連する点は、動的なページ更新を使用すると、ユーザーが特定の状態をお気に入りに保存することが困難になることです。この問題に対する解決策は、ほとんどが URL フラグメント識別子 (アンカーと呼ばれることが多い、つまり URL の後の部分) を使用するものです。 ) を追跡し、ユーザーが指定されたアプリケーションの状態に戻れるようにします。 (多くのブラウザでは、JavaScript がアンカーを動的に更新できるため、Ajax アプリケーションは、表示されるコンテンツと同時にアンカーを更新できます。)これらのソリューションは、「戻る」ボタンのサポートに関する多くの議論も解決します。
<2>.AJAX セキュリティの問題。
AJAX テクノロジーは、ユーザーに優れたユーザー エクスペリエンスをもたらすだけでなく、IT 企業にも利益をもたらします。新たなセキュリティ脅威をもたらす Ajax テクノロジは、企業データへの直接チャネルを確立するようなものです。これにより、開発者は以前よりも多くのデータとサーバー ロジックを誤って公開してしまう可能性があります。 Ajax のロジックはクライアント側のセキュリティ スキャン テクノロジから隠蔽され、ハッカーがリモート サーバーから新たな攻撃を作成できるようになります。また、Ajax は、クロスサイト スクリプティング攻撃、SQL インジェクション攻撃、## などの既知のセキュリティ上の弱点を回避することも困難です。 #Credentials などの -based セキュリティ脆弱性。
<3>.検索エンジンのサポートが弱い。
検索エンジンのサポートは比較的弱いです。 AJAX を不適切に使用すると、ネットワーク データ トラフィックが増加し、システム全体のパフォーマンスが低下します。
<4>.プログラムの例外処理メカニズムを破棄します。
少なくとも現時点では、Ajax.dll、Ajaxpro.dll これらのAjax フレームワークは、プログラムの例外メカニズムを破壊します。この問題に関しては、私も開発過程で遭遇したことがありますが、調べてみるとネット上には関連する紹介がほとんどありません。その後、実験を行い、#Ajax と従来の form 送信モードを使用してデータの一部を削除しました …… はデバッグに大きな困難をもたらします。 <5>.
URL とリソースの配置の本来の意図に違反します。 #たとえば、
URL アドレスを指定した場合、Ajax# の場合、 ##テクノロジーが使用されています。おそらく、この URL アドレスの下に表示されるものは、この URL アドレスの下に表示されるものと同じです。違う。これは、リソースの配置の本来の目的に反します。 <6>.AJAX はモバイル デバイスを十分にサポートしていません。
一部のハンドヘルド デバイス (携帯電話、PDA など) は現在、Ajax をサポートできません。モバイル ブラウザで Ajax テクノロジを使用して Web サイトを開く場合、現時点ではサポートされていません。
##<7>.クライアントが多すぎるため、クライアント コードが多すぎると開発コストが発生します。
複雑な記述とエラーが発生しやすい; 多くの冗長なコードがあります (レイヤーには js ファイルが含まれています)これは #AJAX の一般的な問題であり、さらに過去の多くのサーバー側コードが現在クライアントに配置されており、## の本来の目的が破壊されます。 #Web 標準があります。 21. クロスドメインリクエストについてどのくらい知っていますか?

同一生成元ポリシーでは、ドメイン名、プロトコル、およびポートがリクエストが開始された場所と一致しない場合、それはクロスドメインリクエストであると規定されています。

#この種の時々、いくつかのクロスドメインリクエストテクノロジーを使用する必要があります

## 1：

JQuery

メソッド、JSONP モード、dataType を使用してアクセスします: ' jsonp' に続いて url を入力し、callback=?## を渡します。 ## ランダムなコールバック関数名が生成されます。または、自分で名前を付けることもできます。 背景は

callback の値を取得し、それを ()

に接続します。 () と入力してページに戻ります は関数 function を呼び出すことと同じです 名前 (データ)

。 2: Use

jsタグ読み込みメソッド

#script タグ

src

を使用してリクエストを作成しますURL、アドレスの後にパラメータを接続しますか? callback= 関数名 背景は callback## を取得します# 値、()

にデータを入れます () 、ページに戻ります、関数の呼び出しと同等functionName(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 は、これらの変数をメモリ内に保持することです。つまり、クロージャは、その誕生環境を常に存在させることができます。

54.eval は、特定の文字列、もっと良い方法はありますか?

55. 初期化 CSS はブラウザ互換性以外に何をしますか?

おすすめの関連記事: ajax ビデオ チュートリアル

以上がAJAX 面接でよくある質問の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。