Ajax基礎教程のパッケージ（三）

前の記事ではAjax基礎詳細教程（一）を紹介しました。    Ajax基礎詳細教程（二）
今日は前回のブログの栗に続きます。今は需要を拡大します。前はボタンを押してニュースを取り出します。今は事件ごとにニュースを更新することを実現します。この時は必ずタイマーを入れて、イベントごとにAjaxをお願いします。いつもAjaxを使うなら、パッケージ関数が必要です。まず前の栗のjsコードを見てみて、パッケージを作ります。

window.onload = function() {
var oBtn = document.getElementById('btn'); 
oBtn.onclick = function() {
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} 
xhr.open('get','getNews.php',true);
xhr.send();
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) { //             
var data = JSON.parse( xhr.responseText ); //           json      json      ：title date
var oUl = document.getElementById('ul1'); //            
var html = '';
for (var i=0; i<data.length; i++) { //      json  ，           
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html; //        
} else {
alert('   ,Err：' + xhr.status);
}
}
}
}
}
</script> 

パッケージ関数のポイントは、重複して使用した部分を抽出し、同時に変化したものをパラメータとしてとることで、パラメータとしての判断処理ができません。
1の要求方式はget/post 2が要求した住所3のデータ4が成功したらやるべきことです。
ですから、この四つは関数としてのパラメータです。ajax（method、url、data、success）。
2要求方式が違っていますので、データを送る方式が違っています。これらについては条件判断が必要です。
3もう一つの問題はxhr.reponseTextについてです。変数xhrはパッケージ関数で宣言されていますので、これはajax関数に属しています。私たちはsuccess関数では使えませんが、successという関数ではこのデータを使う必要があります。したがって、パッケージ関数でsuccess関数を呼び出したときに、xhr.reponseTextをパラメータとして送る方法です。success(xhr.reponse Text)
実はこれは一種のコールバックです。コールバックは関数として別の関数のパラメータです。もう一つの関数で呼び出されました。この栗はsuccessです。ajax関数のパラメータとしてajaxの中で呼び出されます。個人的な感覚とは、関数がパラメータ、関数のパラメータを使っているということです。今はパラメータが関数ですので、呼び出します。
だからカプセル化した後にこのようにします。

function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if (method == 'get' && data) {
url += '?' + data;
}
xhr.open(method,url,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText); //             &&            ，      。
} else {
alert('   ,Err：' + xhr.status);
}
}
}
} 

呼び出しはこのようになります

ajax('get','getNews.php','',function(data) {
var data = JSON.parse( data ); 
var oUl = document.getElementById('ul1');
var html = '';
for (var i=0; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;
}); 

実は、このパッケージはまだそんなに良くないです。例えば、上のdataはデータがなくて、私達はやはり席を占めなければなりません。jqueryの中でjquery形式で渡参すれば、便利です。