jQuery - AJAX の概要とメソッド

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

学び続ける

新しいファイル

<!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>

提出するリセットコード

自動運転