ホームページ > 記事 > ウェブフロントエンド > AJAX 面接でよくある質問の概要

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

coldplay.xixi転載: 2020-07-31 11:54:262981ブラウズ

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

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

a = b;

b = c;

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 ; i3a240317e75d0ba58009f06f969d5174.<span style="color:#0000FF;background:#FFFFFF;">データを更新せずに更新します。 </span><span style="color:#333333;"><br></span><span style="color:#FF0000;background:#FFFFFF;">AJAX</span><span style="color:#FF0000;background:#FFFFFF;">最大の利点は、ページ全体を更新せずにサーバーと通信してデータを維持できることです。これにより、</span><span style="color:#FF0000;background:#FFFFFF;">Web</span><span style="color:#FF0000;background:#FFFFFF;"> アプリケーションはユーザーの操作により迅速に応答し、変更されていない情報がネットワーク上に送信されることがなくなり、ユーザーの待ち時間が短縮され、非常に優れたユーザー エクスペリエンスが実現されます。 </span><span style="color:#FF0000;"><br></span><span style="color:#0000FF;background:#FFFFFF;">2cc198a1d5eb0d3eb508d858c9f5cbdb.</span><span style="color:#0000FF;background:#FFFFFF;">サーバーと非同期で通信します。 </span><span style="color:#333333;"><br></span><span style="color:#FF0000;background:#FFFFFF;">AJAX</span><span style="color:#FF0000;background:#FFFFFF;">サーバーとの非同期通信を利用することで、ユーザーの操作を中断する必要がなく、より高速な応答性を実現します。 </span><span style="color:#FF0000;background:#FFFFFF;">Browser</span><span style="color:#FF0000;background:#FFFFFF;"> と </span><span style="color:#FF0000;background:#FFFFFF;">Server</span><span style="color:#FF0000;background:#FFFFFF;"> 間の通信を最適化し、ネットワーク上の不要なデータ送信、時間、データ トラフィックを削減しました。 </span><span style="color:#333333;"><br></span><span style="color:#0000FF;background:#FFFFFF;">5bdf4c78156c7953567bb5a0aef2fc53.</span><span style="color:#0000FF;background:#FFFFFF;"> フロントエンドとバックエンドの負荷分散。 </span><span style="color:#333333;"><br></span><span style="color:#FF0000;background:#FFFFFF;">AJAX</span><span style="color:#FF0000;background:#FFFFFF;">これまでサーバーが負担していた作業の一部をクライアントに転送し、クライアントのアイドル機能を使用して処理することができます。サーバーと帯域幅の負担を軽減し、スペースとブロードバンドのレンタルコストを節約します。サーバーの負担を軽減するために、</span><span style="color:#FF0000;background:#FFFFFF;">AJAX</span><span style="color:#FF0000;background:#FFFFFF;"> の原則は </span>#「<span style="color:#FF0000;background:#FFFFFF;"></span>オンデマンドでデータを取得する」です。 <span style="color:#FF0000;background:#FFFFFF;"></span> を使用すると、サーバー上の冗長なリクエストと応答によって生じる負担を最小限に抑え、サイトのパフォーマンスを向上させることができます。 <span style="color:#FF0000;background:#FFFFFF;"></span><span style="color:#FF0000;background:#FFFFFF;"></span><span style="color:#FF0000;">23889872c2e8594e0f446a471a78ec4c.<br></span>標準に基づいて広くサポートされています。 <span style="color:#0000FF;background:#FFFFFF;"></span><span style="color:#0000FF;background:#FFFFFF;"></span><span style="color:#333333;">AJAX<br></span>標準化され広くサポートされているテクノロジーに基づいているため、ブラウザのプラグインやアプレットをダウンロードする必要はありませんが、顧客の許可が必要です<span style="color:#FF0000;background:#FFFFFF;"></span>JavaScript<span style="color:#FF0000;background:#FFFFFF;"></span>ブラウザ上で実行されます。 <span style="color:#FF0000;background:#FFFFFF;"></span>Ajax<span style="color:#FF0000;background:#FFFFFF;"></span> が成熟するにつれて、<span style="color:#FF0000;background:#FFFFFF;"></span>Ajax<span style="color:#FF0000;background:#FFFFFF;"></span> の使用を簡素化するいくつかのライブラリも登場しました。同様に、プログラミングを支援する別のテクノロジーが登場し、<span style="color:#FF0000;background:#FFFFFF;"></span>JavaScript<span style="color:#FF0000;background:#FFFFFF;"></span> をサポートしていないユーザーに代替機能を提供します。 <span style="color:#FF0000;background:#FFFFFF;"></span><span style="color:#FF0000;background:#FFFFFF;"></span><span style="color:#333333;">43ad812d3a971134e40facaca816c822.<br></span>インターフェイスはアプリケーションから分離されています。 <span style="color:#0000FF;background:#FFFFFF;"></span><span style="color:#0000FF;background:#FFFFFF;"></span><span style="color:#333333;">Ajax<br></span> <span style="color:#FF0000;background:#FFFFFF;"></span>WEB<span style="color:#FF0000;background:#FFFFFF;"></span> でインターフェイスとアプリケーションを分離します (データとアプリケーションを分離することもできます)プレゼンテーション分離）は、分業と協力に役立ち、非技術者によるページの変更によって引き起こされる <span style="color:#FF0000;background:#FFFFFF;"></span>WEB<span style="color:#FF0000;background:#FFFFFF;"></span> アプリケーション エラーを減らし、効率を向上させ、現在の出版システムにより適しています。 。 <span style="color:#FF0000;background:#FFFFFF;"></span><span style="color:#FF0000;background:#FFFFFF;"></span>欠点:<p><strong><span style="color:#C00000;background:#FFFFFF;"><p><span style="color:#0000FF;background:#FFFFFF;">f35d6e602fd7d0f0edfa6f7d103c1b57.AJAX</span><span style="color:#0000FF;background:#FFFFFF;"> は、</span><span style="color:#0000FF;background:#FFFFFF;">Back</span><span style="color:#0000FF;background:#FFFFFF;"> 関数と </span><span style="color:#0000FF;background:#FFFFFF;">History</span><span style="color:#0000FF;background:#FFFFFF;"> 関数を強制終了します。ブラウザのメカニズムの破損です。 </span><span style="color:#333333;"><br></span><span style="color:#FF0000;background:#FFFFFF;">ページが動的に更新される場合、ブラウザは履歴に静的なページしか記憶できないため、ユーザーは前のページの状態に戻ることができません。完全に読み取られたページと動的に変更されたページの違いは非常に微妙です。ユーザーは多くの場合、「戻る」ボタンをクリックすると前の操作がキャンセルされると期待しますが、</span><span style="color:#FF0000;background:#FFFFFF;">Ajax</span><span style="color:#FF0000;background:#FFFFFF;"> アプリケーションでは、これは不可能です。 </span><span style="color:#FF0000;"><br></span><span style="color:#FF0000;background:#FFFFFF;">戻るボタンは標準の </span><span style="color:#FF0000;background:#FFFFFF;">web</span><span style="color:#FF0000;background:#FFFFFF;"> サイトの重要な機能ですが、</span># と比較することはできません。 ## js<span style="color:#FF0000;background:#FFFFFF;"></span> 素晴らしいご協力でした。これは、<span style="color:#FF0000;background:#FFFFFF;"></span>Ajax<span style="color:#FF0000;background:#FFFFFF;"></span> によって引き起こされる深刻な問題です。ユーザーは、前に戻って前の操作をキャンセルしたいと考えることが多いためです。では、この問題に対する解決策はあるのでしょうか?答えは「はい」です。<span style="color:#FF0000;background:#FFFFFF;"></span>Gmail<span style="color:#FF0000;background:#FFFFFF;"></span> を使用したことがある人は、<span style="color:#FF0000;background:#FFFFFF;"></span>Gmail<span style="color:#FF0000;background:#FFFFFF;"></span> が <span style="color:#FF0000;background:#FFFFFF;"></span>Ajax<span style="color:#FF0000;background:#FFFFFF;"> の下で使用されていることを知っています。 </span>テクノロジーがこの問題を解決しました。 <span style="color:#FF0000;background:#FFFFFF;"></span>Gmail<span style="color:#FF0000;background:#FFFFFF;"></span> に戻ることはできますが、 <span style="color:#FF0000;background:#FFFFFF;"></span>Ajax<span style="color:#FF0000;background:#FFFFFF;"></span> のメカニズムを変更することはできません。これは比較的愚かですが効果的な方法です。つまり、ユーザーが戻るボタンをクリックして履歴にアクセスすると、非表示の <span style="color:#FF0000;background:#FFFFFF;"></span>IFRAME<span style="color:#FF0000;background:#FFFFFF;"></span> を作成または使用して、ページ上のコンテンツを再現します。 。 変化。 (たとえば、ユーザーが <span style="color:#FF0000;background:#FFFFFF;"></span>Google マップ<span style="color:#FF0000;background:#FFFFFF;"></span> に戻ると、非表示の <span style="color:#FF0000;background:#FFFFFF;"></span>IFRAME<span style="color:#FF0000;background:#FFFFFF;"></span> が検索され、検索結果が反映されます。 <span style="color:#FF0000;background:#FFFFFF;"></span>Ajax<span style="color:#FF0000;background:#FFFFFF;"></span> 要素に追加して、アプリケーションの状態をその時点の現在の状態に復元します。) <span style="color:#FF0000;background:#FFFFFF;"></span><span style="color:#FF0000;"><br></span> ただし、こうは言われていますが、この問題は解決可能ですが、開発コストが非常に高くつくため、<span style="color:#FF0000;background:#FFFFFF;"></span>Ajax<span style="color:#FF0000;background:#FFFFFF;"></span> フレームワークで必要とされる迅速な開発とは相反します。これは、<span style="color:#FF0000;background:#FFFFFF;"></span>Ajax<span style="color:#FF0000;background:#FFFFFF;"></span> によって引き起こされる非常に深刻な問題です。 <span style="color:#FF0000;background:#FFFFFF;"></span><span style="color:#FF0000;"><br></span>#関連する点は、動的なページ更新を使用すると、ユーザーが特定の状態をお気に入りに保存することが困難になることです。この問題に対する解決策は、ほとんどが <span style="color:#FF0000;background:#FFFFFF;"></span>URL<span style="color:#FF0000;background:#FFFFFF;"></span> フラグメント識別子 (アンカーと呼ばれることが多い、つまり <span style="color:#FF0000;background:#FFFFFF;"></span>URL<span style="color:#FF0000;background:#FFFFFF;"></span> <span style="color:#FF0000;background:#FFFFFF;"> の後の部分) を使用するものです。 </span><span style="color:#FF0000;background:#FFFFFF;"></span><span style="color:#FF0000;background:#FFFFFF;">) を追跡し、ユーザーが指定されたアプリケーションの状態に戻れるようにします。 (多くのブラウザでは、</span><span style="color:#FF0000;background:#FFFFFF;">JavaScript</span><span style="color:#FF0000;background:#FFFFFF;"> がアンカーを動的に更新できるため、</span><span style="color:#FF0000;background:#FFFFFF;">Ajax</span><span style="color:#FF0000;background:#FFFFFF;"> アプリケーションは、表示されるコンテンツと同時にアンカーを更新できます。)これらのソリューションは、「戻る」ボタンのサポートに関する多くの議論も解決します。 </span><span style="color:#FF0000;"><br></span><span style="color:#0000FF;background:#FFFFFF;">2cc198a1d5eb0d3eb508d858c9f5cbdb.AJAX</span><span style="color:#0000FF;background:#FFFFFF;"> セキュリティの問題。 </span><span style="color:#333333;"><br></span><span style="color:#FF0000;background:#FFFFFF;">AJAX</span><span style="color:#FF0000;background:#FFFFFF;"> テクノロジーは、ユーザーに優れたユーザー エクスペリエンスをもたらすだけでなく、</span><span style="color:#FF0000;background:#FFFFFF;">IT</span><span style="color:#FF0000;background:#FFFFFF;"> 企業にも利益をもたらします。新たなセキュリティ脅威をもたらす </span><span style="color:#FF0000;background:#FFFFFF;">Ajax</span><span style="color:#FF0000;background:#FFFFFF;"> テクノロジは、企業データへの直接チャネルを確立するようなものです。これにより、開発者は以前よりも多くのデータとサーバー ロジックを誤って公開してしまう可能性があります。 </span><span style="color:#FF0000;background:#FFFFFF;">Ajax</span><span style="color:#FF0000;background:#FFFFFF;"> のロジックはクライアント側のセキュリティ スキャン テクノロジから隠蔽され、ハッカーがリモート サーバーから新たな攻撃を作成できるようになります。また、</span><span style="color:#FF0000;background:#FFFFFF;">Ajax</span><span style="color:#FF0000;background:#FFFFFF;"> は、クロスサイト スクリプティング攻撃、</span><span style="color:#FF0000;background:#FFFFFF;">SQL</span><span style="color:#FF0000;background:#FFFFFF;"> インジェクション攻撃、## などの既知のセキュリティ上の弱点を回避することも困難です。 </span>#Credentials<span style="color:#FF0000;background:#FFFFFF;"></span> などの -based セキュリティ脆弱性。 <span style="color:#FF0000;background:#FFFFFF;"></span><span style="color:#FF0000;"><br></span>5bdf4c78156c7953567bb5a0aef2fc53.<span style="color:#0000FF;background:#FFFFFF;"></span>検索エンジンのサポートが弱い。 <span style="color:#0000FF;background:#FFFFFF;"></span><span style="color:#333333;"><br></span>検索エンジンのサポートは比較的弱いです。 <span style="color:#FF0000;background:#FFFFFF;"></span>AJAX<span style="color:#FF0000;background:#FFFFFF;"></span> を不適切に使用すると、ネットワーク データ トラフィックが増加し、システム全体のパフォーマンスが低下します。 <span style="color:#FF0000;background:#FFFFFF;"></span><span style="color:#FF0000;"><br></span>23889872c2e8594e0f446a471a78ec4c.<span style="color:#0000FF;background:#FFFFFF;"></span>プログラムの例外処理メカニズムを破棄します。 <span style="color:#0000FF;background:#FFFFFF;"></span><span style="color:#333333;"><br></span>少なくとも現時点では、<span style="color:#FF0000;background:#FFFFFF;"></span>Ajax.dll<span style="color:#FF0000;background:#FFFFFF;"></span>、<span style="color:#FF0000;background:#FFFFFF;"></span>Ajaxpro.dll<span style="color:#FF0000;background:#FFFFFF;"> </span>これらの<span style="color:#FF0000;background:#FFFFFF;"></span>Ajax<span style="color:#FF0000;background:#FFFFFF;"></span> フレームワークは、プログラムの例外メカニズムを破壊します。この問題に関しては、私も開発過程で遭遇したことがありますが、調べてみるとネット上には関連する紹介がほとんどありません。その後、実験を行い、<span style="color:#FF0000;background:#FFFFFF;">#Ajax</span><span style="color:#FF0000;background:#FFFFFF;"> と従来の </span><span style="color:#FF0000;background:#FFFFFF;">form</span><span style="color:#FF0000;background:#FFFFFF;"> 送信モードを使用してデータの一部を削除しました </span><span style="color:#FF0000;background:#FFFFFF;"> ……</span><span style="color:#FF0000;background:#FFFFFF;"> はデバッグに大きな困難をもたらします。 </span><span style="color:#FF0000;background:#FFFFFF;"></span><span style="color:#333333;">43ad812d3a971134e40facaca816c822.<br></span><span style="color:#0000FF;background:#FFFFFF;"></span>URL<span style="color:#0000FF;background:#FFFFFF;"></span> とリソースの配置の本来の意図に違反します。 <span style="color:#0000FF;background:#FFFFFF;"></span><span style="color:#0000FF;background:#FFFFFF;"></span>#たとえば、<span style="color:#333333;"><br>URL</span><span style="color:#FF0000;background:#FFFFFF;"> アドレスを指定した場合、</span><span style="color:#FF0000;background:#FFFFFF;">Ajax</span># の場合、 ##テクノロジーが使用されています。おそらく、この <span style="color:#FF0000;background:#FFFFFF;"></span>URL<span style="color:#FF0000;background:#FFFFFF;"></span> アドレスの下に表示されるものは、この <span style="color:#FF0000;background:#FFFFFF;"></span>URL<span style="color:#FF0000;background:#FFFFFF;"></span> アドレスの下に表示されるものと同じです。違う。これは、リソースの配置の本来の目的に反します。 <span style="color:#FF0000;background:#FFFFFF;"></span><span style="color:#FF0000;background:#FFFFFF;"></span><span style="color:#FF0000;background:#FFFFFF;">efbfa0de8737dc86eae413541a49df20.AJAX</span><span style="color:#333333;"> はモバイル デバイスを十分にサポートしていません。 <br></span><span style="color:#0000FF;background:#FFFFFF;"></span><span style="color:#FF0000;background:#FFFFFF;">一部のハンドヘルド デバイス (携帯電話、</span><span style="color:#FF0000;background:#FFFFFF;">PDA</span><span style="color:#FF0000;background:#FFFFFF;"> など) は現在、</span><span style="color:#FF0000;background:#FFFFFF;">Ajax</span><span style="color:#FF0000;background:#FFFFFF;"> をサポートできません。モバイル ブラウザで </span><span style="color:#FF0000;background:#FFFFFF;">Ajax</span><span style="color:#FF0000;background:#FFFFFF;"> テクノロジを使用して Web サイトを開く場合、現時点ではサポートされていません。 </span><span style="color:#FF0000;"><br></span>##40107655ec554331c1c6222ab67a141c.<span style="color:#0000FF;background:#FFFFFF;"></span>クライアントが多すぎるため、クライアント コードが多すぎると開発コストが発生します。 <span style="color:#0000FF;background:#FFFFFF;"></span><span style="color:#333333;"><br></span>複雑な記述とエラーが発生しやすい<span style="color:#FF0000;background:#FFFFFF;"></span>; 多くの冗長なコードがあります (レイヤーには <span style="color:#FF0000;background:#FFFFFF;"></span>js<span style="color:#FF0000;background:#FFFFFF;"></span> ファイルが含まれています)これは <span style="color:#FF0000;background:#FFFFFF;">#AJAX</span><span style="color:#FF0000;background:#FFFFFF;"> の一般的な問題であり、さらに過去の多くのサーバー側コードが現在クライアントに配置されており、</span>## の本来の目的が破壊されます。 #Web<span style="color:#FF0000;background:#FFFFFF;"></span> 標準があります。 <span style="color:#FF0000;background:#FFFFFF;"></span> <span style="color:#FF0000;background:#FFFFFF;"></span><span style="background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);">21. クロスドメインリクエストについてどのくらい知っていますか? </span></p>
<p>同一生成元ポリシーでは、ドメイン名、プロトコル、およびポートがリクエストが開始された場所と一致しない場合、それはクロスドメインリクエストであると規定されています。 </p>
<p>#この種の時々、いくつかのクロスドメインリクエストテクノロジーを使用する必要があります<span style="color:#FF0000;"></span></p>## 1：<p><span style="color:#FF0000;"></span></p>
<p> <span style="color:#FF0000;"></span></p> JQuery<p><span style="color:#FF0000;"> メソッド、</span><span style="color:#FF0000;">JSONP</span><span style="color:#FF0000;"> モード、</span><span style="color:#FF0000;">dataType</span><span style="color:#FF0000;"> を使用してアクセスします: ' </span><span style="color:#FF0000;">jsonp</span><span style="color:#FF0000;">' に続いて </span><span style="color:#FF0000;">url</span><span style="color:#FF0000;"> を入力し、</span><span style="color:#FF0000;">callback=?</span><span style="color:#FF0000;">## を渡します。 </span> ## ランダムなコールバック関数名が生成されます。または、自分で名前を付けることもできます。 <span style="color:#FF0000;"></span><span style="color:#FF0000;"></span>背景は </p>
<p>callback<span style="color:#FF0000;"></span> の値を取得し、それを <span style="color:#FF0000;"></span>() </p>
<p> に接続します。 <span style="color:#FF0000;"></span>() <span style="color:#FF0000;"></span> と入力してページに戻ります <span style="color:#FF0000;"></span><span style="color:#FF0000;"></span> は関数 <span style="color:#FF0000;"></span>function を呼び出すことと同じです<span style="color:#FF0000;"></span> 名前 <span style="color:#FF0000;"></span>(データ)</p>
<p>。 <span style="color:#FF0000;"></span><span style="color:#FF0000;"></span>2:<span style="color:#FF0000;"></span><span style="color:#FF0000;"></span> <span style="color:#FF0000;"></span>Use</p>
<p>js<span style="color:#FF0000;"></span>タグ読み込みメソッド</p>
<p><span style="color:#FF0000;"></span><span style="color:#FF0000;background:#F9F9F9;"></span><span style="color:#FF0000;background:#F9F9F9;">#script</span><span style="color:#FF0000;background:#F9F9F9;"> タグ</span></p> src<p><span style="color:#FF0000;background:#F9F9F9;"> を使用してリクエストを作成します</span><span style="color:#FF0000;background:#F9F9F9;">URL</span><span style="color:#FF0000;background:#F9F9F9;">、アドレスの後にパラメータを接続しますか? </span><span style="color:#FF0000;background:#F9F9F9;">callback= </span><span style="color:#FF0000;background:#F9F9F9;">関数名</span><span style="color:#FF0000;background:#F9F9F9;"></span><span style="color:#FF0000;background:#F9F9F9;"> </span><span style="color:#FF0000;background:#F9F9F9;">背景は </span><span style="color:#FF0000;background:#F9F9F9;">callback</span>## を取得します# 値、<span style="color:#FF0000;background:#F9F9F9;"></span>() </p>
<p>にデータを入れます <span style="color:#FF0000;background:#F9F9F9;"></span>() <span style="color:#FF0000;"></span>、ページに戻ります、<span style="color:#FF0000;"></span><span style="color:#FF0000;"></span>関数の呼び出しと同等<span style="color:#FF0000;"></span>function<span style="color:#FF0000;"></span>Name<span style="color:#FF0000;"></span>(data)<span style="color:#FF0000;"></span></p>
<p>Three:<span style="color:#FF0000;"></span></p>
<p><span style="color:#FF0000;">       </span><span style="color:#FF0000;">后台直接开启同源策略的访问限制，设置响应头信息。</span></p>
<p><span style="color:#FF0000;">response.setHeader("Access-Control-Allow-Origin","*");</span></p>
<p>22.如何控制网页在网络传输中的数据量？</p>
<p><span style="color:#FF0000;">分页加载，瀑布流，限制每次加载的数据量。</span><span style="color:#00B0F0;">(??????</span><span style="color:#00B0F0;">不确定</span><span style="color:#00B0F0;">)</span></p>
<p>23.前端常规开发优化策略？</p>
<ul style="list-style-type: disc;">
<li><p><span style="color:#FF0000;">请减少</span><span style="color:#FF0000;">HTTP</span><span style="color:#FF0000;">请求</span></p></li>
<li><p><span style="color:#FF0000;">请正确理解</span><span style="color:#FF0000;"> Repaint </span><span style="color:#FF0000;">和</span><span style="color:#FF0000;"> Reflow</span></p></li>
<li><p><span style="color:#FF0000;">请减少对</span><span style="color:#FF0000;">DOM</span><span style="color:#FF0000;">的操作</span></p></li>
<li><p><span style="color:#FF0000;">使用</span><span style="color:#FF0000;">JSON</span><span style="color:#FF0000;">格式来进行数据交换</span></p></li>
<li><p><span style="color:#FF0000;">高效使用</span><span style="color:#FF0000;">HTML</span><span style="color:#FF0000;">标签和</span><span style="color:#FF0000;">CSS</span><span style="color:#FF0000;">样式</span></p></li>
<li><p><span style="color:#FF0000;">使用</span><span style="color:#FF0000;">CDN</span><span style="color:#FF0000;">加速（内容分发网络）</span></p></li>
<li><p><span style="color:#FF0000;">将</span><span style="color:#FF0000;">CSS</span><span style="color:#FF0000;">和</span><span style="color:#FF0000;">JS</span><span style="color:#FF0000;">放到外部文件中引用，</span><span style="color:#FF0000;">CSS</span><span style="color:#FF0000;">放头，</span><span style="color:#FF0000;">JS</span><span style="color:#FF0000;">放尾</span></p></li>
<li><p><span style="color:#FF0000;">精简</span><span style="color:#FF0000;">CSS</span><span style="color:#FF0000;">和</span><span style="color:#FF0000;">JS</span><span style="color:#FF0000;">文件（压缩）</span></p></li>
<li><p><span style="color:#FF0000;">压缩图片和使用图片</span><span style="color:#FF0000;">Sprite</span><span style="color:#FF0000;">技术</span></p></li>
<li><p><span style="color:#FF0000;">注意控制</span><span style="color:#FF0000;">Cookie</span><span style="color:#FF0000;">大小和污染</span></p></li>
</ul>
<p>24.为什么异步加载JS文件？加载方式？</p>
<p><span style="color:#FF0000;">平时常用的引入</span><span style="color:#FF0000;">JS</span><span style="color:#FF0000;">方式，是同步模式，又称阻塞模式，</span><span style="color:#FF0000;background:#FFFFFF;">会阻止浏览器的后续处理，停止了后续的解析，也就是说，浏览器在下载或执行该</span><span style="color:#FF0000;background:#FFFFFF;">js</span><span style="color:#FF0000;background:#FFFFFF;">代码块时，后面的标签不会被解析。</span></p>
<p><span style="color:#FF0000;">异步加载（</span><span style="color:#FF0000;">async</span><span style="color:#FF0000;">）</span><span style="color:#FF0000;">JS</span><span style="color:#FF0000;">文件，</span><span style="color:#FF0000;background:#FFFFFF;">允许页面内容异步加载，</span><span style="color:#FF0000;background:#FFFFFF;">仅适用于外部脚本。</span></p>
<p><span style="color:#FF0000;background:#FFFFFF;">延迟加载（</span><span style="color:#FF0000;background:#FFFFFF;">defer</span><span style="color:#FF0000;background:#FFFFFF;">）</span><span style="color:#FF0000;background:#FFFFFF;">属性规定是否对脚本执行进行延迟，直到页面加载为止。</span></p>
<p>25.如果对一个js对象进行深度拷贝？</p><pre class="brush:js;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("超时");
}
}
});

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

number boolean string underfind null

object function array

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

触发事件调用函数
创建XMlHttpRequest 对象open连接，send发送后台服务器
后台接收前端数据，根据业务需求访问数据库进行增删改查
数据库返回后台程序所需要的数据
后台拿到数据库数据，进行合理的处理，比如JSON串，返回给前端
前端接收到后台的响应数据，进行解析，根据业务需求动态操作页面元素

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

1. 直接在html标签的属性上添加9bd932c2b6ec5985c154b9848f753cf2p94b3e26ee717c64999d7867364b1b4a3
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 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：19 の典型的な ajax 面接の質問次の記事：19 の典型的な ajax 面接の質問

続きを見る

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

11. (1) バブル ソート、60 秒のカウントダウン、(2) ページの読み込み時にバックグラウンドで返される JSON データの処理方法li

関連記事

11. (1) バブルソート、60 秒のカウントダウン、(2) ページの読み込み時にバックグラウンドで返される JSON データの処理方法li