自分で ajax を作成するにはどうすればよいですか? ajaxの作成手順を詳しく解説（解析例付き）

この記事では主にajaxcaseを自分で作成する方法について説明します

ここで、ajaxの構造と機能をまとめてみましょう。

ajaxの目的は、バックグラウンドでデータをリクエストすることです。その特徴は、ajaxが登場する前は、ユーザーにとって、多くの項目を含むフォームに入力するのは単純に面倒でした。手順のいずれかが間違って入力されると、最終送信時にエラーが表示され、何度もフォームに入力しなければならなくなるという悪夢です。それはアウトです。その後、ajax の登場により、この問題はうまく解決され、項目が入力されるたびに結果がサーバー経由で検証されて返されるため、効率がある程度向上し、ユーザーのエクスペリエンスが向上しました。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAJAX 開発マニュアル のコラムにアクセスして学習してください)

それでは、Ajax を使用する際のいくつかの問題について説明しましょう: まず、IE ではデータが時間内に更新されません (原因は次のとおりです)。キャッシュ）、URL は 1 回だけ読み取られるため、更新されるたびに URL を変更する必要がありますが、ドメイン名はどうなるのでしょうか？次のパラメータはページの取得には影響しませんが、異なる URL を持つブラウザはページをリロードするため、ページ キャッシュの問題は解決されます。 url+'?t='+new Date().getTime(); を渡すこともできますし、Math.random(); を使用することもできます。次に、統一されたエンコーディングが必要な、受信したデータ形式に問題があります。 any Thing は文字とともに返されます。この時点では、データを自分で解析する必要があります。次に、自分で ajax を作成します:

1. ajax オブジェクトを作成しますvar oAjax=new XMLHttpRequest() ~上位バージョンのブラウザーまたは新しい ActiveXObject('Microsoft.XMLHTTP')~IE

2.接続 oAjax.open (メソッド、アドレス、非同期)

3. ステータス変更の読み取り時に を受け入れる oAjax.send();ジャックス。 readyState ステータス コード

0。ajax オブジェクトが作成されました (新しい ajax オブジェクト)

1. サーバーに接続されました (open メソッドが実行されたばかりです)

2。 completed

3. 受信完了 (ファイルヘッダー)

4. 受信完了 (本文)、コンテンツリクエスト失敗も 4

ここで、http ステータスコード:

oAjax.status 200< =n<300 または n==304 は送信が成功したことを意味します

oAjax.responseText はデータを返します

encodeURIComponent(str)

文字列は URI コンポーネントとして使用されます

ajax:

//data 	后台要的数据
//options	=	url,data,type,timeout,success,error
function ajax(options){	
	options=options||{};
	options.data=options.data||{};
	options.type=options.type||'get';
	options.timeout=options.timeout||0;	
	//整理data数据
	options.data.t=Math.random();//给data创建一个t 键
	var arr=[];
	for(var key in options.data){
		arr.push(key+'='+encodeURIComponent(options.data[key]));	
	}
	var str=arr.join('&');	
	if(window.XMLHttpRequest){//1
		var oAjax=new XMLHttpRequest();	
	}else{
		var oAjax=new ActiveXObject('Microsoft.XMLHTTP');	
	}	
	if(options.type=='get'){
		oAjax.open('get',options.url+'?'+str,true);//2	
		oAjax.send();//3
	}else{//post
		oAjax.open('post',options.url,true);
			
		//设定ajax的头信息
		oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');		
		oAjax.send(str);		
	}
	
	oAjax.onreadystatechange=function(){//4
		if(oAjax.readyState==4){
			if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
				clearInterval(timer);
				options.success && options.success(oAjax.responseText)
			}else{
				options.error && options.error(oAjax.status);
			}
		}
	};
	if(options.timeout){
		var timer=setTimeout(function(){
			alert(&#39;超时了&#39;);	
			oAjax.abort();	//终止加载	
		},options.timeout);
	}	
}

1.ajax関数を作成します。ajaxではパラメータが不確定で配置位置も異なるため、データとしてjsonを使用し、パラメータ オプションが渡されます。オプションはオプションです。渡された場合は、渡されたデータが使用されます。そうでない場合は、送信メソッドのタイプ、タイムアウト設定、データを含むデフォルトのパラメータが使用されます。

2.

URL は最後にいくつかのランダム変数を追加する必要があるため、最初にキー options.data.t=Math.random(); をデータに追加し、次に URL をエンコードします。データを処理します。

3.

次に、ブラウザを決定します。chrome と ff はどちらも window.XMLHttpRequest をサポートしますが、IE ブラウザは ActiveXObject ('Microsoft. メソッドのみをサポートします。URL の後に設定した乱数を追加する必要があります)。 oAjax.send(); データを送信できますが、post メソッドの場合は、ajax ヘッダー情報 oAjax.setRequestHeader('Content-Type',' application/x-www-form-urlencoded'); も設定する必要があります。データを送信してください

4.对状态改变时进行判断oAjax.onreadystatechange当oAjax.readyState==4时表明接收完成此时再判断状态码oAjax.status>=200 && oAjax.status<300 || oAjax.status==304时表明成功了此时进行成功时的回调函数，否则就是失败了，此时返回状态码，告诉用户。

5.在这中间可以设置一个定时器，当在设定的时间内还没有获取成功则表明超时了，此时需要终止加载oAjax.abort()，并且告诉用户超时了，如果在设置的时间内加载成功了，则清除定时器。

此时ajax就封装完毕了，调用时就简单了

ajax({
		data:	{a:3,b:5},
		url:	'php/php_get.php',
		success:function(str){
			alert(str);	
		}
	});	

本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。

以上が自分で ajax を作成するにはどうすればよいですか? ajaxの作成手順を詳しく解説（解析例付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。