AJAXとは何ですか?
複雑な説明はパスして簡単に説明します。
AJAXはどのような入力フォームに入力して送信する
転送が完了してすべての処理が終わるまで何も操作せず待つ
部分が解消されて送信しながらも継続して作業をしたり、
空白のページを見ずに進行状況を直接演出するなどで退屈さをなぐさめることができる方法です...
簡単に例を挙げると
私たちが掲示板を接続してリストを見て
第二のページを見ようと[2]であることをクリックします。
この時、通常は空白のページが表示されるか、新しいページを読み込むために、リーフラッシュ(更新)がされている
現象を見ることができます。
しかし、AJAXを利用すると、すべての処理が完了して結果の内容が渡された場合すぐに現在表示している
状態で内容が変わってしまいます。
だから待つ必要がなくなるんです。
しかし、これも欠点があるので、サポートしていないブラウザやOSがあり、どのようなエラーが起こったときに
このエラーを正確に把握することがないことがあるのが難点です。
前置きはここまですることによ^ ^
それではどのように連動をしでしょうか。
入力フォームなどの出力ページを作成するときxmlHttpRequestを利用してハシルスいる
それを構成する方法が容易で多くありません...
して簡単なソースを見てみ...
function createHttpRequest()
{
if(window.ActiveXObject){
/ / Win e4、e5、e6用
try {
return new ActiveXObject( "Msxml2.XMLHTTP");
} catch(e){/ /上の部分が失敗した場合
try {/ /ここに超えます。
return new ActiveXObject( "Microsoft.XMLHTTP");
} catch(e2){/ /これも失敗すると、値が何も戻されません。
return null;
}
}
}
else if(window.XMLHttpRequest){/ /他にブラウザ
/ / Win Max Linux m1、f1、o8、Mac s1 Linux k3用
return new XMLHttpRequest();
}
else {
return null;
}
}
これ関数で囲まれています。
ヨゴトを<script>と</ script>の間の必要に応じ呼んで使用することができます。
ajax = createHttpRequest(); / /このように接続して使用することができます。
しかしヨロトゲばかりして使用すると、ハングルの場合は送信時文字化けしていくので、UTF-8に変更する
作業が必要になります。
その部分を関数にまとめてみました...
function sendRequest(callback、data、method、url、async、sload、user、password)
{
/ / callback引数は、転送後に転送された値がある場合、処理する場所を意味します。
/ / dataは送信時に必要なデータがあれば貼りくれるところであり、
/ / methodはPOSTまたはGET方式のいずれを選択します。。
/ / urlは送信先アドレスを指定するところであり、
/ / async非同期の場合はtrue、同期ならfalseを指定します。
/ / sloadはスーパーロードで強制的にロード(true)、または省略falseにすることができます。
/ / userとpasswordは認証ページの場合、配信してアクセスできるようにする因子です。
/ / XMLHttpRequestオブジェクト生成
var oj = createHttpRequest();
if(oj == null)return null;
/ /強制ロードの設定
var sload =(!sendRequest.arguments [5])。 sload:false;
if(sload | | method.toUpperCase()== 'GET')url + = "?"; / /メソッドがGETの場合、アドレスに?をつけてくれdata値を転送するようにしています。
if(sload)url = url + "t =" +(new Date())。getTime();
oj.onreadystatechange = function()
{/ /渡された値が存在する場合、コールバック関数に渡します。
if(oj.readyState == 4){/ /この部分は、状態が送信完了である場合に適用されます。
callback(oj);
}
}
/ / URLエンコード
data = uriEncode(data); / /渡すdata値にハングルがありえますので、utf-8形式でフォーマットしています。
if(method.toUpperCase()== 'GET'){
url + = data;
}
oj.open(method、url、async、user、password); / /送信されます。
/ /ヘッダapplication / x-www-form-urlencodedの設定
setEncHeader(oj); / /ヘッダを設定する部分でキャラクタ·セットも設定されます。
/ / sendメソッド
oj.send(data); / /転送data値があれば転送します。
/ / URIエンコードヘッダを設定
function setEncHeader(oj){
var contentTypeUrlenc = "application / x-www-form-urlencoded; charset = UTF-8";
if(!window.opera){
oj.setRequestHeader( 'Content-Type'、contentTypeUrlenc);
} else {
if((typeof oj.setRequestHeader)== 'function')
oj.setRequestHeader( 'Content-Type'、contentTypeUrlenc);
}
return oj;
}
/ / URLエンコード
function uriEncode(data){
if(data! = ""){
/ /&と=に一度分解してencode
var encdata ='';
var datas = data.split( '&');
for(i = 1; i <datas.length; i + +){
var dataq = datas [i]。split( '=');
encdata + = '&' + encodeURIComponent(dataq [0])+ '=' + encodeURIComponent(dataq [1]);
}
} else {
encdata = "";
}
return encdata;
}
return oj;
}
本ソースは、AJAX入門という本で参考にした内容です。
実質的に使用する場合、onclickやリンクにsendRequest( "コールバック関数名"、 "渡すデータ名"、 "伝送方式"、 "送信先アドレス"、 "円シンク"、 "スーパーロード");形式がなります...
コールバック関数がonloadlなら
function on_loadedl(oj){
var res = decodeURIComponent(oj.responseText);
document.all.testview.innerHTML = res;
}
このように、渡された値を使用して出力してくれるでしょう...
testviewは、渡された内容を出力してくれるDiv(レイヤー)やテーブルのID値などで指定すれば良い
0 件のコメント:
コメントを投稿