ネイティブ Ajax の書き方

ネイティブ Ajax の記述方法: 最初に XMLHttpRequest オブジェクトを作成し、次にコールバック関数 onreadystatechange を記述し、次にリクエスト情報を構成し、最後にリクエストを送信します。

Ajax (Asynchronous JavaScript and XML の略称) は、データを非同期に要求する Web 開発テクノロジであり、ユーザー エクスペリエンスとページのパフォーマンスの向上に非常に役立ちます。

簡単に言えば、Ajax は非同期リクエストを通じてバックグラウンド データを読み込み、ページをリロードせずに Web ページ上にレンダリングします。一般的なアプリケーション シナリオには、ログインしているかどうかのフォーム検証が含まれます。 入力の成功、Baidu 検索ドロップダウン ボックスのプロンプト、速達追跡番号のクエリなど。

Ajax を包括的に理解したい場合は、Js チュートリアル にアクセスして、包括的に理解することができます。

現在、Ajax はさまざまな最適化を経て非常に便利になり、たとえば Jquery を使用する場合、Ajax を使用するには 1 行だけで済みます。

#それでは、ネイティブ Ajax はどのようなものでしょうか?

見てみましょう。

 <script>
	function ajax(url){
		//创建XMLHttpRequest对象,新版本的浏览器可以直接创建XMLHttpRequest对象,IE5或IE6没有
		//XMLHttpRequest对象，而是用的ActiveXObject对象
	       var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
	       xhr.open("get",url,true);
	       xhr.send();//发送请求
	       xhr.onreadysattechange = () =>{
	           if(xhr.readystate == 4){//返回存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
	               if(xhr.status == 200){//返回状态码
	                   var data = xhr.responseTEXT;
	                   return data;
	               }
	           }
	       }    
	   }
</script>

readystate:

XMLHttpRequestの状態が格納されます。 0から4まで変化します。

0: リクエストは初期化されていません

1: サーバー接続が確立されました

2: リクエストが受信されました

3: リクエスト処理中です

4: リクエストが完了し、応答の準備ができました

#ステータス:

200: "OK"

404: ページが見つかりません

405: リクエストのメソッドが正しくありません

##500: サーバーの内部エラー

##403: リクエストは禁止されています

##Ajax には 2 つのリクエスト メソッドがあります:

get リクエスト メソッド

<script>
	function ajax() {
		//创建核心对象
		xhr = null;
		if (window.XMLHttpRequest) {// 新版本的浏览器可以直接创建XMLHttpRequest对象
			xhr = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// IE5或IE6没有XMLHttpRequest对象
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//编写回调函数
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				alert(xhr.responseText)
			}
		}
		//open设置请求方式和请求路径
		xhr.open("get", "/Ajax/ajax?userId=10");//一个url还传递了数据，后面还可以写是否同步
		//send 发送
		xhr.send();
	}
</script>

post リクエスト メソッド

<script>
	function ajax() {
		//创建核心对象
		xhr = null;
		if (window.XMLHttpRequest) {// 新版本的浏览器可以直接创建XMLHttpRequest对象.
			xhr = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// IE5或IE6没有XMLHttpRequest对象
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//编写回调函数
		xhr.onreadystatechange = function() {	
			if (xhr.readyState == 4 && xhr.status == 200) {
				alert(xhr.responseText)//警告框，显示返回的Text
			}
		}
		//open设置请求方式和请求路径
		xhr.open("post", "/Ajax/ajax2");//一个servlet，后面还可以写是否同步
		//设置请求头
		xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
		//send 发送
		xhr.send("userId=10");
	}
</script>

以上がネイティブ Ajax の書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。