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 が挿入されると タグが実行されます。

: プレーンテキストの JavaScript コードを返します。結果は自動的にキャッシュされません。

: JSON データを返します。

：JSONP 形式。形式 JSONP を使用して関数を呼び出す場合 (例: myurl?callback=?、JQuery##) #最後の "?" はコールバック関数を実行するための正しい関数名に自動的に置き換えられます。 text

: プレーン テキスト文字列を返します。 success

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

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

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

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

(1) XMLHttpRequestobject

(2) エラー メッセージ

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

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

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

JSON .parse()

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

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

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

JQuery.ajax()

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

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

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

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

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

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

2 番目のタイプ:

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

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

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

Bootstrap は HTML5 および CSS3 に基づいて開発されており、# で開発されています。 ##jQuery に基づいて、よりパーソナライズされ、人間らしい改良が加えられました。タグに対応する Class 名を付けるだけです。 Bootstrap 独自の独自の Web サイト スタイルのセットであり、ほとんどの jQuery プラグインと互換性があります。

JQ まず入手してから使用してください。

Angularjs 直接使用

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. クロスドメインリクエストについてどのくらい知っていますか?

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

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

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("超时");
}
}
});

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);

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();

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)){
//第一个是字母,最后一个是数字
}
}

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

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;

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);

text-overflow: 
hidden
;

addEventListener() || attachEvent()

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

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

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

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