JQueryを使って非同期通信を行う。

Jqueryを使うとびっくりするほど簡単に非同期通信ができます。
なにせ、load命令一行ですから。

昔は結構大変だったのが懐かしくなります。

自分のノスタルジーのために昔の非同期通信のソースなど

function sendRequest( url, callback, method, data )
{
var req = createXMLHTTP();
if( !req ){ return; }

// 【２】レスポンスデータ受信時に呼び出すイベントハンドラ
req.onreadystatechange = function(){
getResponse( req, callback );
}

// GET時のデータ処理
if(method.toUpperCase() == 'GET' && data.length > 0)
{
url += '?'+ data;
data = '';
}
// 【３】指定したURLに接続
req.open( method, url, true );

// POSTデータ用ヘッダ
req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded; charset=euc-jp");

// 【４】HTTPリクエストを送信
req.send( data );
}

// XMLHttpRequestオブジェクト生成
function createXMLHTTP()
{
if( window.XMLHttpRequest ){ // IE以外
return new XMLHttpRequest();
}
else if( window.ActiveXObject ){ // IE用(バージョンにより異なる)
try {
return new ActiveXObject("MSXML2.XMLHTTP");
}
catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e2) {
return null;
}
}
}
return null
}

なんて感じでやってましたが、JQueryだと、

$(function(){
$("#btn").click(function(){
$("#makeText").load("./sample.txt");
});
});

id=btnのボタンをクリックすると、sample.txtが呼ばれて、その結果がid=makeTextのところに書かれるという。非常に簡単に記述することができます。

また、入力した値を渡すのも、

$(function(){
$("#btn").click(function(){
var value = $("#txt").val();
$("#makeText").load("./sample.php?val=" + value);
});
});

て感じで一発です。