jQuery - AJAX の概要
AJAX とは何ですか?
AJAX = 非同期 JavaScript および XML。
簡単に言うと、AJAX は Web ページ全体を再読み込みせずに、バックグラウンドでデータを読み込み、Web ページに表示します。
jQueryとAJAXについて
jQueryはAJAXに関連するメソッドを複数提供しています。
jQuery AJAX メソッドを使用すると、HTTP Get および HTTP Post を使用してリモート サーバーからテキスト、HTML、XML、または JSON をリクエストできます。また、この外部データを Web ページの選択した要素に直接読み込むことができます。
jQuery がなければ、AJAX プログラミングはまだ少し難しいです。
ブラウザごとに AJAX の実装方法が異なるため、通常の AJAX コードを記述するのは簡単ではありません。これは、ブラウザをテストするために追加のコードを作成する必要があることを意味します。ただし、jQuery チームはこの問題を解決してくれました。AJAX 関数を実装するために必要なコードは 1 行だけです。
AJAXのload()メソッド
jqueryのload()メソッドは、jquery ajaxの非リフレッシュメソッドの1つで、指定されたIDにページのコンテンツを直接ロードでき、パラメータを使用してリフレッシュすることもできます。 . ページでは、load() の使用法とよくある問題について紹介します。
構文:
$(selector).load(URL,data,callback);
必須の URL パラメーターは、ロードする URL を指定します。
オプションの data パラメーターは、リクエストとともに送信されるクエリ文字列のキーと値のペアのセットを指定します。
オプションのコールバック パラメーターは、load() メソッドの完了後に実行される関数の名前です。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("");});
});
</script>
</head>
<body>
<div id="div1">
<h2>使用 jQuery AJAX 修改文本内容</h2>
</div>
<button>获取外部内容</button>
</body>
</html>jQuery セレクターを URL パラメーターに追加することもできます。
次の例では、「demo_test.txt」ファイル内の id="p1" を持つ要素のコンテンツを、指定された <div> 要素にロードします
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt #p1");
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本</h2></div>
<button>获取外部文本</button>
</body>
</html>オプションのコールバック パラメーターは、load() メソッドの後に何を行うかを指定します完了しました 許可されたコールバック関数。コールバック関数はさまざまなパラメーターを設定できます:
responseTxt - 呼び出しが成功したときの結果の内容が含まれます
statusTXT - 呼び出しのステータスが含まれます
jQuery get() メソッドと post() メソッドはサーバーからのデータをリクエストするために使用されますHTTP GET または POST リクエスト経由。
HTTP リクエスト: GET と POST クライアント側とサーバー側でのリクエストとレスポンスの 2 つの一般的な方法は、GET と POST です。 GET - 指定されたリソースからデータをリクエスト POST - 処理対象のデータを指定されたリソースに送信します
GET は基本的にサーバーからデータを取得（取得）するために使用されます。注: GET メソッドはキャッシュされたデータを返す場合があります。
POST はサーバーからデータを取得するためにも使用できます。ただし、POST メソッドはデータをキャッシュしないため、リクエストとともにデータを送信するためによく使用されます。
jQuery $.get() メソッド
$.get() メソッドは、HTTP GET リクエストを介してサーバーにデータを要求します。
構文:
$.get(URL,callback);
必須の URL パラメーターは、リクエストする URL を指定します。
オプションのコールバック パラメーターは、リクエストが成功した後に実行される関数の名前です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/try/ajax/demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP GET 请求并获取返回结果</button>
</body>
</html>$.get() の最初のパラメータは、リクエストする URL (「demo_test.php」) です。
2 番目のパラメータはコールバック関数です。最初のコールバック パラメータには要求されたページのコンテンツが保存され、2 番目のコールバック パラメータにはリクエストのステータスが保存されます。
ヒント: この PHP ファイル (「demo_test.php」) は次のようになります:
<?php
echo 'これは PHP ファイルから読み取られたデータです。 ';
?>
jQuery $.post() メソッド
$.post() メソッドは、HTTP POST リクエストを介してサーバーにデータを要求します。
構文:
$.post(URL,data,callback);
必須の URL パラメーターは、リクエストする URL を指定します。
オプションの data パラメーターは、リクエストとともに送信されるデータを指定します。
オプションのコールバック パラメーターは、リクエストが成功した後に実行される関数の名前です。
次の例では、$.post() を使用してリクエストとともにデータを送信します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",{
name:"php中文网",
url:"http://www.php.cn"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP POST 请求页面并获取返回内容</button>
</body>
</html>$.post() の最初のパラメーターは、リクエストする URL (「demo_test_post.php」) です。
その後、リクエスト (名前と都市) とともにデータを送信します。
「demo_test_post.php」の PHP スクリプトは、これらのパラメーターを読み取り、処理し、結果を返します。
3 番目のパラメーターはコールバック関数です。最初のコールバック パラメータには要求されたページのコンテンツが保存され、2 番目のパラメータにはリクエストのステータスが保存されます。
ヒント: この PHP ファイル (「demo_test_post.php」) は次のようになります:
<?php $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : ''; $city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : ''; echo '网站名: ' . $name; echo "\n"; echo 'URL 地址: ' .$city; ?>
