この記事の Ajax 面接の質問は主にオンライン記事やコースから得たものであり、出典が示されています。
この記事は主に個人用のメモです。
Ajax ナレッジポイントに関するメモ
1.Ajaxとは
1. Ajaxの概念
Ajax は非同期 JavaScript および XML です
Ajax は高速で動的な Web ページを作成するための技術です
2. Ajaxの役割とメリット・デメリット
役割: ajax はバックグラウンドとの対話に使用されます
利点:
- 最大の利点は、ページを更新する必要がなく、ページ内でサーバーと通信するため、ユーザー エクスペリエンスが非常に優れていることです。
- 操作を中断することなく、非同期でサーバーと通信します。
- これまでサーバーに負担がかかっていた作業をクライアントに転送できるため、サーバーと帯域幅が削減され、冗長なリクエストが最小限に抑えられます。
- 標準化され広くサポートされているテクノロジーに基づいているため、プラグインやアプレットをダウンロードする必要はありません。
短所:
- Ajax は、Back 関数と History 関数を強制終了しました。つまり、ブラウザのメカニズムを破壊しました。ブラウザを使用して前後に進むことはできません。
- セキュリティの問題: クロスサイト スクリプティング攻撃、SQL インジェクション攻撃など。
- 検索エンジンのサポートは比較的弱いです。AJAX を適切に使用しないと、ネットワーク データのフローが増加し、システム全体のパフォーマンスが低下します。
3. Ajax にはリクエスト メソッドがいくつありますか? それらの長所と短所は何ですか？
よく使用される投稿、取得、削除。コピー、ヘッド、リンクなどは一般的には使用されません。
a. コードの違い
(1) get は URL 経由でパラメータを渡します
(2) post はリクエストのデータ型を指定するためにリクエスト ヘッダーを設定します
b. 使用上の違い
(1) getよりpostの方が安全
（postのパラメータがリクエストボディにあるため。getのパラメータはURL上にあるため）
(2) getの通信速度はpostの通信速度より速いと判断されるパラメーターを渡すことによって。
(Postはリクエストボディでパラメータを渡し、バックグラウンドはデータストリームでパラメータを受け取ります。速度は少し遅くなります。また、URLでパラメータを渡すことで直接getを取得できます) (3) postの大理論には制限がありませ
ん転送ファイルのサイズは約 7-8k ie4k
( 4) アップロード後のデータの取得
(アップロードされたデータはさらに多く、アップロードされたデータは重要なデータです。したがって、セキュリティの観点から見ても、投稿が最良の選択です)またはデータレベル）
質問の回答のソース
4.json文字列変換セットjsonオブジェクト、jsonオブジェクト変換json文字列
//字符串转对象
JSON.parse(json)
eval('(' + jsonstr + ')')
// 对象转字符串
JSON.stringify(json)
5. Ajaxリクエストのキャンセル方法
(1) ネイティブxhrキャンセルリクエスト
var xhr = new XMLHttpRequest();
xhr.abort();
(2) Axios がリクエストをキャンセルします。
(i) CancelToken.source ファクトリ メソッドを使用してキャンセル トークンを作成します。
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/123', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});
axios.post('/user/123', {
name: '小明'
}, {
cancelToken: source.token
})
// 取消请求（message 参数是可选的）
source.cancel('canceled by the user.');
(ii) CancelToken のコンストラクターにエグゼキューター関数を渡してキャンセル トークンを作成します。
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// executor 函数接收一个 cancel 函数作为参数
cancel = c;
})
});
// cancel the request
cancel();
6. Ajaxリクエストをキャンセルする意味は何ですか
送信されたリクエストは依然としてバックエンドに到達する可能性があります
(1) 冗長なコールバック処理を避けるために後続のコールバック処理をキャンセルします。特殊なケースでは、(2) 最初にリクエストを送信してから返すため、コールバック内のデータが誤って上書きされます (3
)ロードのキャンセル効果、およびリクエストのその他のインタラクティブな効果、特に単一ページのアプリケーションでは、ページ A がページ B にジャンプした後、ページ A のリクエストをキャンセルする必要があります。そうしないと、コールバック内の一部の処理がページ B に影響を与える可能性があります (4) タイムアウト処理
やエラー処理などが省略され、リソースが節約されます。
2、クロスドメイン
1. クロスドメインの原因は何ですか?
同一生成元ポリシーはブラウザのセキュリティ ポリシーです。
同一オリジン: プロトコル、ドメイン名、およびポート番号がまったく同じである必要があります。
同一オリジン ポリシーの違反はクロスドメインです。
2. クロスドメイン ソリューションとは何ですか?
(1) JSONP
a. JSONP (JSON with Padding) とは、 get リクエストのみをサポートする
非公式のクロスドメイン ソリューションです。b. 原則スクリプトタグを動的に作成します。script タグの src 属性の使用は、同一生成元ポリシーによって制限されません。すべての src 属性と href 属性は同一生成元ポリシーによって制限されないためです。サードパーティのサーバー データ コンテンツが要求される場合があります。
c. ステップ
- スクリプトタグを作成するには
- スクリプトの src 属性はインターフェイス アドレスを設定します。
- インターフェイス パラメーターにはカスタム関数名が必要です。そうでない場合、バックグラウンドはデータを返すことができません。
- 関数名を定義してバックグラウンドから返されるデータを受け取る
//去创建一个script标签
var script = document.createElement("script");
//script的src属性设置接口地址 并带一个callback回调函数名称
script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.head.appendChild(script);
//通过定义函数名去接收后台返回数据
function jsonpCallback(data){
//注意 jsonp返回的数据是json对象可以直接使用
//ajax 取得数据是json字符串需要转换成json对象才可以使用。
}
(2) CORS
a.
CORS (Cross-Origin Resource Sharing) とは、クロスドメイン リソース共有であり、CORS は公式のクロスドメイン ソリューションです。
特徴:
クライアント側で特別な操作を行う必要はなく、サーバー内で完全に処理されます。get リクエストと post リクエストをサポートします。新しい HTTP ヘッダー フィールドのセットがクロスドメイン リソース共有標準に追加されました。を使用すると、サーバーは、ブラウザを通じてどのソース サイトが利用可能であるか、どのリソースにアクセス許可がアクセスできるかを宣言できます。
b. 原則
サーバーが Access-Control-Allow-Origin HTTP 応答ヘッダーを設定すると、ブラウザーはクロスドメイン要求を許可します。
c. ステップ
//需要后台设置
Access-Control-Allow-Origin: * //允许所有域名访问，或者
Access-Control-Allow-Origin: http://a.com //只允许所有域名访问
補足:
(3) document.domain を設定する
a. 原則
同じメインドメイン名と異なるサブドメイン名の下にあるページについては、document.domain を設定して同じドメインにすることができます
b.
同一ドメインドキュメントによって提供されるページ間の相互運用性を制限するこれは iframe ページにロードする必要があります
。 c. 手順
// URL http://a.com/foo
var ifr = document.createElement('iframe');
ifr.src = 'http://b.a.com/bar';
ifr.onload = function(){
var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
ifrdoc.getElementsById("foo").innerHTML);
};
ifr.style.display = 'none';
document.body.appendChild(ifr);
(4) Apacheを転送（リバースプロキシ）として使用し、クロスドメインを同一ドメインにする
3. 比較質問
1. Ajax、Fetch、Axios の違いは何ですか?
- ajax は js 非同期テクノロジーの用語であり、関連する API は xhr です。
- fetch は、es6 によって追加されたネットワーク リクエストの新しい標準 API です。
- axios は、ネットワーク リクエスト用のサードパーティ ライブラリです。
4. 手書きの質問
1. 手書きのAjaxオリジナルリクエスト
//1.创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
//2.规定请求的类型、URL 以及是否异步处理请求。
xhr.open('GET',url,true);
//3.发送信息至服务器时内容编码类型
//设置响应头
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//4.发送请求
xhr.send(null);
//5.接受服务器响应数据
xhr.onreadystatechange = function () {
if(xhr.readyState ===4){
//判断响应状态码 200 404 403 401 500
//2xx 成功
if(xhr.status >= 200 && xhr.status < 300){
}else{
}
}
}