記事ディレクトリ
1. AJAX とは何ですか?
AJAX (Asynchronous JavaScript and XML) は、HTTP リクエストをサーバーに非同期に送信し、応答を受信するためのテクノロジーです。従来の Web アプリケーションでは、サーバーと対話するユーザーは、新しいコンテンツを表示するためにページ全体を更新する必要があります。 AJAX テクノロジーを使用すると、ユーザーはバックグラウンドで非同期 HTTP リクエストを送信し、応答を受信することで、ページ全体を更新せずに更新されたデータを取得できます。したがって、AJAX テクノロジは、ネットワーク帯域幅の使用量を削減し、ユーザー対話の効率と流暢性を向上させ、Web アプリケーションをより柔軟で信頼性の高いものにすることができます。
2.動作原理
1. リクエストを送信する
クライアントは、JavaScript を通じて AJAX リクエストを送信します。リクエストには、GET または POST、あるいは JSON またはその他の形式のデータを送信できます。
例:
$.ajax({
url: "/api/getUserInfo",
type: "GET",
data: {
userId: 123 },
dataType: "json",
success: function(result) {
console.log(result);
},
error: function(xhr, status, error) {
console.log(error);
}
});
2. リクエストを処理する
HTTP リクエストはサーバーに送信され、バックエンド コードによって処理されます。バックエンド コードは、Java、PHP、Python などのさまざまなプログラミング言語を使用して実装でき、返されるデータは通常、JSON またはその他の形式の文字列です。
例:
$userId = $_GET["userId"];
$userInfo = getUserInfo($userId);
echo json_encode($userInfo);
3. 応答を処理する
フロントエンド JavaScript コードは、バックエンドから返されたデータを受信し、データ型に従って解析して処理します。 JSON 形式のデータの場合、通常、文字列をオブジェクトに変換するために JSON.parse() メソッドが使用されます。
例:
success: function(result) {
var userInfo = JSON.parse(result);
// ...
}
4.ページ更新
最終的に、フロントエンド JavaScript コードは DOM 操作を使用してページ コンテンツを更新するため、ページを更新せずにデータを更新します。
例:
success: function(result) {
var userInfo = JSON.parse(result);
$("#name").text(userInfo.name);
$("#age").text(userInfo.age);
$("#sex").text(userInfo.sex);
// ...
}
3. アプリケーション
AJAX テクノロジは、動的 Web ページの作成、フォームの自動入力、更新なしのファイルのアップロード、リアルタイム検索、インタラクティブなクイック応答、その他の機能など、さまざまな動的 Web アプリケーションで広く使用されています。同時に、AJAX テクノロジは、JSON や XML などのさまざまな形式でデータを処理および表示することもできます。 jQuery、AngularJS、React などの多くの一般的な JavaScript フレームワークは、開発者が使用できる豊富な AJAX 関数を提供します。例えば;
1. データロード
AJAX は、バックエンド サーバーへの非同期リクエストを通じてデータを取得し、それを Web ページに表示できるため、ページがより動的でユーザー フレンドリーになります。たとえば、次のコードは、AJAX を使用して JSON 形式でデータをリクエストし、それを Web ページにレンダリングする方法を示しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Demo</title>
</head>
<body>
<h1>User Info</h1>
<ul id="user-info-list"></ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$.ajax({
url: "/api/getUserInfo",
type: "GET",
data: {
userId: 123 },
dataType: "json",
success: function(result) {
var userInfoList = $("#user-info-list");
$.each(result, function(i, user) {
var item = $("<li>").text(user.name + ": " + user.age);
userInfoList.append(item);
});
},
error: function(xhr, status, error) {
console.log(error);
}
});
</script>
</body>
</html>
コードの説明: 上記のコードでは、jQuery が提供する $.ajax メソッドを使用して GET リクエストを送信します。リクエストのアドレスは /api/getUserInfo です。サーバーから返されるデータは JSON 配列であり、各要素はユーザー オブジェクトを表します。 $.each メソッドを使用してこの配列を反復処理し、Web ページに各ユーザーの名前と年齢を表示します。
2. フォームの送信
AJAX をフォームの送信に使用すると、ページの更新による不必要なページのちらつきを回避しながら、ユーザー対話の効率を向上させることができます。たとえば、次のコードは、AJAX 経由でフォームを送信し、サーバーから返されたデータに基づいて登録が成功したか失敗したかをユーザーに確認する方法を示しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Demo</title>
</head>
<body>
<h1>Register</h1>
<form id="register-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="Register">
</form>
<div id="message"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#register-form").submit(function(event) {
event.preventDefault();
var form = $(this);
var username = form.find("input[name='username']").val();
var password = form.find("input[name='password']").val();
$.ajax({
url: "/api/register",
type: "POST",
data: {
username: username, password: password },
dataType: "json",
success: function(result) {
$("#message").text("Registration succeeded.");
},
error: function(xhr, status, error) {
$("#message").text("Registration failed: " + xhr.responseText);
}
});
});
</script>
</body>
</html>
コードの説明: 上記のコードでは、jQuery が提供する submit メソッドを使用してフォーム送信イベントをリッスンし、preventDefault メソッドを通じてデフォルトのフォーム送信動作をキャンセルします。次に、$.ajax メソッドを使用して POST リクエストを /api/register に送信し、フォームのユーザー名とパスワードのデータをリクエスト パラメーターとして渡します。サーバーはこれらのデータに基づいて登録が成功したかどうかを判断し、結果を JSON 形式で返します。返された結果に基づいて、登録が成功したかどうかを Web ページ上でユーザーに確認することができます。
3. データの視覚化
AJAX を使用すると、大量のデータを視覚的に表示できるため、ユーザーの読書体験が向上します。たとえば、次のコードは、AJAX を介して GitHub 上のユーザーのリポジトリ リストを取得し、そのリストをヒストグラムに描画する方法を示しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Demo</title>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<h1>My Repositories</h1>
<div id="chart"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$.ajax({
url: "https://api.github.com/users/binjie09/repos",
type: "GET",
dataType: "json",
success: function(result) {
var labels = [];
var data = [];
$.each(result, function(i, repo) {
labels.push(repo.name);
data.push(repo.stargazers_count);
});
renderChart(labels, data);
},
error: function(xhr, status, error) {
console.log(error);
}
});
function renderChart(labels, data) {
var options = {
chart: {
type: 'bar'
},
series: [{
name: "Stars",
data: data
}],
xaxis: {
categories: labels
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
}
</script>
</body>
</html>
コードの説明: 上記のコードでは、ApexCharts JavaScript ライブラリを使用してデータをヒストグラムにプロットします。まず、$.ajax メソッドを使用して GitHub 上のユーザーのウェアハウス リストを取得し、ウェアハウス名とスターの数をそれぞれラベルとデータ配列に保存します。次に、renderChart 関数を呼び出してこれらのデータをヒストグラムに描画し、Web ページに表示します。
4. セキュリティ
AJAX テクノロジを使用する場合は、いくつかのセキュリティ上の問題に注意する必要があります。 AJAX リクエストは非同期であるため、通常の Web リクエストのようなブラウザの「同一生成元ポリシー」制限の影響を受けません。これは、AJAX リクエストの URL に機密のユーザー情報が含まれている場合、または AJAX レスポンスに悪意のあるスクリプトが含まれている場合、セキュリティ上の問題が発生する可能性があることを意味します。これを防ぐには、AJAX リクエストを検証し、信頼できるサーバーにのみ送信する必要があります。同時に、AJAX 応答をフィルタリングして処理して、悪意のあるコードが含まれていないことを確認する必要もあります。
AJAX を使用する場合は、次のセキュリティ問題に注意する必要があります。
1. クロスドメインリクエスト
サイトのセキュリティを強化するために、ブラウザは異なるドメイン名のリソースへのアクセスをブロックします。したがって、Web ページとバックエンド API が同じドメイン名の下にない場合、クロスドメイン リクエストの制限が発生します。 CORS (Cross-Origin Resource Sharing) を設定することで、クロスオリジンリクエストを許可できます。
たとえば、フロントエンド ページが http://example.com の下にあり、バックエンド API が http://api.example.com の下にあると仮定すると、バックエンド API の応答ヘッダー。クロスオリジンリクエストを許可するには:
// 后端 API 的响应头中设置跨域访问
response.setHeader('Access-Control-Allow-Origin', 'http://example.com');
2.XSS攻撃
AJAX リクエストはユーザーが入力したデータをサーバーに送信できますが、悪意のある攻撃を受ける可能性もあります。特に、AJAX を使用してコンテンツを取得し、DOM に挿入する場合、コンテンツがフィルタリングまたはエスケープされないと、XSS (クロスサイト スクリプティング攻撃) の脆弱性が発生する可能性があります。
たとえば、次のコードでは、ユーザー入力が Web ページに直接挿入されます。
<input type="text" id="name">
<button id="submit">Submit</button>
<div id="result"></div>
<script>
$("#submit").click(function() {
var name = $("#name").val();
$.ajax({
url: "/api/hello",
type: "POST",
data: {
name: name },
dataType: "json",
success: function(result) {
$("#result").html("Hello, " + result.message);
},
error: function(xhr, status, error) {
console.log(error);
}
});
});
</script>
ユーザーが入力した名前に <script>alert('XSS attack!');</script> などの悪意のあるスクリプトが含まれている場合、Web ページに直接表示され、XSS 攻撃につながります。 XSS 攻撃を防ぐには、DOM に挿入されたコンテンツをフィルタリングするかエスケープする必要があります。コンテンツは、jQuery が提供するテキスト メソッドを使用してエスケープできます。
$("#result").text("Hello, " + result.message);
これにより、コンテンツ内のタグと特殊文字をエスケープして XSS 攻撃を防ぐことができます。
3.CSRF攻撃
AJAX リクエストは、CSRF (クロスサイト リクエスト フォージェリ) 攻撃に対して脆弱です。 CSRF 攻撃とは、攻撃者が他のサイト上の技術的に正当なユーザーの ID 情報を使用してリクエストを偽造し、そのユーザーになりすましてターゲット サイトにリクエストを送信することを意味します。攻撃者は JS インジェクションやその他の方法を使用して、ユーザーが知らないうちにリクエストを開始できるようにする可能性があります。
CSRF 攻撃を防ぐために、認証にトークンまたはリファラーを使用できます。 Tokenメソッドとは、フォーム送信時やAJAXリクエスト送信時に、ランダムに生成したToken値をレスポンスボディに書き込み、SessionやCookieに格納する方法です。リクエストが行われるたびに、送信されたデータにこのトークン値が含まれているかどうかを確認して、それが正当なリクエストであるかどうかを判断します。
次のコードは、トークンを使用して CSRF 攻撃を防ぐ方法を示しています。
<form id="user-form">
<input type="text" name="name" placeholder="Your name">
<button type="submit">Submit</button>
</form>
<script>
// 获取 cookie 中的 CSRF Token
function getCSRFToken() {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
// 判断是否为 CSRF Token 的 Cookie
if (cookie.substring(0, 'csrftoken'.length + 1) === ('csrftoken' + '=')) {
cookieValue = decodeURIComponent(cookie.substring('csrftoken'.length + 1));
break;
}
}
}
return cookieValue;
}
$("#user-form").submit(function(event) {
event.preventDefault();
var form = $(this);
var csrfToken = getCSRFToken();
var name = form.find("input[name='name']").val();
$.ajax({
url: "/api/addUser",
type: "POST",
data: {
name: name },
headers: {
"X-CSRFToken": csrfToken}, // 将 CSRF Token 放到请求的头信息中
dataType: "json",
success: function(result) {
console.log(result);
},
error: function(xhr, status, error) {
console.log(error);
}
});
});
</script>
上記のコードでは、getCSRFToken という関数を使用して Cookie 内の CSRF トークン値を取得し、それをリクエスト ヘッダー情報に入れます。 Django フレームワークでは、csrftoken cookie を通じて CSRF トークン値を取得できます。このトークン値は、フォームが送信されるたびに検証のためにサーバーに渡されます。トークン値が一致しない場合、リクエストは偽造される可能性があり、エラー メッセージを返す必要があります。
5. プロジェクトのコード例
フロントエンドは ajax を使用してサーバー バックエンド コード:
コード例:
const datas = {
a: axx,
b: bxx,
c: cxx,
};
const options = {
method: "POST",
headers: {
"Content-Type": "application/json" },
body: JSON.stringify(datas),
};
fetch("url", options)
.then((response) => response.json())
.then((data) => {
Datas = data;
});
//Datas={a1: a1xx,b1: b1xx,c1: c1xx,}
setTimeout(function () {
var a1 = Datas.a1;
var b1 = Datas.b1;
var c1 = Datas.c1;
//调用script中的函数，此时this是window
this.outFunction(a1,b1,c1);
}, "3000");
コードの説明: POST リクエストを例にします
(1) まず、サーバーに渡されるパラメータ データ オブジェクト、つまり受信および処理されるオブジェクトを設定する必要があります。バックエンドによって。
(2) 次に、メソッド (リクエスト メソッド)、ヘッダー (リクエスト ヘッダー)、ボディ (リクエスト ボディ) などを含むオプション オブジェクトを設定する必要があります。
(3) fetch() 関数を使用します。url はサーバー内のリクエスト アドレスです。サーバーから受信したデータは応答であり、データに割り当てられ、最後にデータに割り当てられます。これにより、受信したデータの処理が容易になります。データは処理されます。
(4) ajax リクエストは非同期であるため、受信したデータの処理に関連する操作は、受信後にデータを処理できるようにsetTimeout(function () {相关操作....}, time)；に配置する必要があります。その後、操作が実行され、コールバック関数を使用して応答結果を処理することもできます。 jQuery を使用して実装された AJAX のサンプル コードを次に示します。$.ajax({ url: "/api/getData", type: "GET", dataType: "json", success: function(result) { // 在请求成功后更新页面内容 console.log(result); }, error: function(xhr, status, error) { // 在请求失败时显示提示信息 console.log(error); } });成功およびエラーのコールバック関数は、応答結果を処理するように設定されています。
(5) 受信したデータ a1、b1、c1 を<script></script>のカスタム outFunction() 関数に渡したい場合は、これを呼び出す必要があります。 (a1,b1,c1)。以下に示すように、これはウィンドウ オブジェクトを指します。
要約する
以上が、今回お伝えしたいajaxに関する内容であり、筆者も勉強中ですので、説明に不明瞭な点や間違っている点がございましたら、修正していただけますよう、よろしくお願いいたします。