ホームページ  >  記事  >  ウェブフロントエンド  >  自分で ajax を作成するにはどうすればよいですか? ajaxの作成手順を詳しく解説(解析例付き)

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

寻∝梦
寻∝梦オリジナル
2018-09-10 15:45:173069ブラウズ

この記事では主に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||&#39;get&#39;;
	options.timeout=options.timeout||0;	
	//整理data数据
	options.data.t=Math.random();//给data创建一个t 键
	var arr=[];
	for(var key in options.data){
		arr.push(key+&#39;=&#39;+encodeURIComponent(options.data[key]));	
	}
	var str=arr.join(&#39;&&#39;);	
	if(window.XMLHttpRequest){//1
		var oAjax=new XMLHttpRequest();	
	}else{
		var oAjax=new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);	
	}	
	if(options.type==&#39;get&#39;){
		oAjax.open(&#39;get&#39;,options.url+&#39;?&#39;+str,true);//2	
		oAjax.send();//3
	}else{//post
		oAjax.open(&#39;post&#39;,options.url,true);
			
		//设定ajax的头信息
		oAjax.setRequestHeader(&#39;Content-Type&#39;,&#39;application/x-www-form-urlencoded&#39;);		
		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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。