このサンプル プログラムでは、$.ajax() メソッドを使用します。$.get() メソッドを使用することもできますが、コードが複雑すぎず、理解しやすいと思います。
//ユーザー名の検証方法を定義します
function verify(){
//最初にページ上のボタンの押下をテストします。このメソッドを呼び出すことができます
//JavaScript のalert メソッドを使用して、ポップアップ プロンプト ボックスを表示します
/ /alert("ボタンがクリックされました! ! ");
//1. テキスト ボックスの内容を取得します
//document.getElementById("userName"); //Jquery のノードの検索方法ノードは、パラメータの id 属性値に # を追加することで見つけることができます。
//jquery メソッドは jquery オブジェクトを返し、それらに対して他の jquery メソッドを引き続き実行できます
var jqueryObj = $("#userName");
// ノードの値を取得します
var userName = jqueryObj.val();
//alert(userName);
//2. テキスト ボックス内のデータをサーバー セグメントのサーベルトに送信します
//JavaScript では、単純なオブジェクト定義メソッド
var obj = {name: "123",age:20};
//jquery の XMLHTTPrequest オブジェクトを使用 get リクエストのカプセル化
$.ajax({
type: " POST", //http リクエスト メソッド
url: "AJAXXMLServer", //サーバー セグメント URL アドレス
data: "name=" userName, //サーバー セグメントに送信されるデータ
dataType: "xml" , //返すデータ形式を JQuery に指示します
Success: callback //インタラクションが完了し、サーバーがデータを正しく返すときに呼び出されるコールバック関数を定義します
});
}
コールバック関数:
//コールバック関数
function callback (data) {
//alert("サーバー セグメントからのデータが戻ってきました!!");
//3. サーバーから返されたデータを受信します
//データdom オブジェクトのデータは解析する必要があります
//まず dom オブジェクトを JQuery オブジェクトに変換する必要があります
var jqueryObj = $(data);
//メッセージ ノードを取得します
var message = jqueryObj.children();
//テキスト コンテンツを取得します
var text = message.text();
//4. サーバー セグメントから返されたデータをページに動的に表示します
//結果情報を保存するノードを検索します
var resultObj = $("#result");
// ページ上の div ノードのコンテンツを動的に変更します
resultObj.html(text );
アラート("");
}