検索

ホームページ >ウェブフロントエンド >jsチュートリアル >Ajax の基本的な開発についてご存知ですか? ajaxの基本的な開発手順を詳しく解説（サンプル付き）

Ajax の基本的な開発についてご存知ですか? ajaxの基本的な開発手順を詳しく解説（サンプル付き）

寻∝梦
寻∝梦オリジナル
2018-09-10 16:01:521203ブラウズ

この記事では主に ajax の基本的な開発手順について説明します。Ajax 開発をより深く理解したい場合は、開発手順を理解する必要があります。これは最も基本的なものですが、それを使用して開発する方法を知ることもできます。アヤックス。今すぐこの記事を読み始めてください

  1. ajax とは何ですか?用途は何ですか?
    Ajax の正式名称は「Asynchrous Javascript And XML」で、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。これは、ブラウザとサーバー間の対話の効率を向上させるために、動的な Web ページを迅速に作成するためのテクノロジーです。従来の Web インタラクション モードを置き換えることができます。

  2. この同期と非同期をどのように理解すればよいでしょうか?

    従来の同期インタラクション モデルとは何ですか?
    従来のモデルでは、同期対話モードが使用され、クライアントのブラウザーはサーバーにリクエストを送信し、サーバーがリクエストに応答するまで待機し、他の操作は実行できません。
    主流テクノロジーの非同期対話モデルとは何ですか?
    Ajax 非同期対話モードでは、クライアント ブラウザーとサーバーの間に追加の転送オブジェクト Ajax エンジンがあり、クライアント ブラウザーが Ajax エンジンにリクエストを送信すると、Ajax エンジンはリクエスト情報をサーバーに転送します。このようにすることで、クライアントのブラウザーはリクエストを送信した後も待機状態にならずに操作を続行できるようになります。サーバーは Ajax エンジン要求を処理した後、応答を Ajax エンジンに渡し、Ajax エンジンはクライアントのブラウザ ページを更新します。

  3. Ajax 開発ステップ
    ステップ 1: XMLHttpRequest オブジェクトを取得します。
    サンプルコードは、w3school の XML ドキュメントにあります。 

var xmlhttp = null;if(window.XMLHttpRequest){    //这个是针对浏览器IE7及其7以上的版。
    xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){    //这个是针对浏览器5到7的版本。
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

ステップ 2: コールバック関数を登録します。 

 xmlhttp.onreadystatechange = function(){ 
};

onreadystatechange は、各状態の変化によってトリガーされるイベントのイベント ハンドラーです。

ステップ 3: open("method","URL",async,"uname","pswd")
リクエストメソッド、URL パス、同期するかどうかを設定するためにのみ使用され、リクエストは送信されません。

パラメータ 関数
メソッド リクエストを送信する方法、オプションのパラメータはGET、POST、PUTで​​す。
URL 送信するURLパスは、絶対パスと相対パスを使用できます。
async リクエストを非同期で処理するかどうか。デフォルト値は true です。空白のままにすることもできます。
tru​​e、send()送信後もスクリプト処理は継続します、つまり非同期処理です。
false の場合、スクリプトは特定の応答を待ってからスクリプト処理、つまり同期処理を続行します。
uname 私はまだ使ったことがなく、ドキュメントにも説明がありません。ただ書かないでください。
pswd 私はまだ使ったことがなく、ドキュメントにも説明がありません。ただ書かないでください。


URL にパラメーターが必要な場合はどうすればよいですか?
get リクエストの場合は、URL の直後にパラメーターを連結します。
例: xmlhttp.open("get","http://www.baidu.com?name=xiaosan");

投稿リクエストの場合、複数の設定操作が必要です:
例: xmlhttp. open ("post","http://www.baidu.com");
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlhttp.send("name) = xiaosan");
このうち、setRequestHeader("label","value") の機能は、送信される http ヘッダーにラベルと値のペアを追加することです。

ステップ 4: 送信(コンテンツ)
リクエストを送信します。パラメータがない場合はsend(null)と書きます。

ステップ 5: コールバック関数で特定のデータ操作を実行します。
その前に、XMLHttpRequest のいくつかのプロパティを理解する必要があります。

プロパティ 説明
onreadystatechange 状態が変化すると、いくつかのことがトリガーされることがあります。
readyState 詳細については、以下の表を参照してください
status 「OK」は200、「Not Found」は404など、数値はステータスを返します。
statusText 文字列が返されます「 OK」、「見つかりません」などのステータス
responseText 応答を文字列として返します。
responseXML XML で応答を返します。返されるのは XML オブジェクトであり、DOM を使用して解析できます

次の表は、readyState のステータス値とステータス値の意味を示しています。

0 で表されます。初期化されていない状態は、XMLHttpRequest オブジェクトが作成される前の読み込み状態を表します 1open 操作。 2ロードステータス、送信操作。 3 インタラクティブ状態では、レスポンスデータは受信していますが、レスポンスヘッダーとボディのみを受信して​​いません。 4Completeステータス、全てのhttpレスポンス受信が完了しました。

  1. ajax とは何ですか?用途は何ですか?
    Ajax の正式名称は「Asynchrous Javascript And XML」で、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。これは、ブラウザとサーバー間の対話の効率を向上させるために、動的な Web ページを迅速に作成するためのテクノロジーです。従来の Web インタラクション モードを置き換えることができます。

  2. この同期と非同期をどのように理解すればよいでしょうか?

    従来の同期インタラクション モデルとは何ですか?
    従来のモデルでは、同期対話モードが使用され、クライアントのブラウザーはサーバーにリクエストを送信し、サーバーがリクエストに応答するまで待機し、他の操作は実行できません。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAJAX 開発マニュアル コラムにアクセスして学習してください)
    主流テクノロジーの非同期対話モデルとは何ですか?
    Ajax 非同期対話モードでは、クライアント ブラウザーとサーバーの間に追加の転送オブジェクト Ajax エンジンがあり、クライアント ブラウザーが Ajax エンジンにリクエストを送信すると、Ajax エンジンはリクエスト情報をサーバーに転送します。このようにすることで、クライアントのブラウザーはリクエストを送信した後も待機状態にならずに操作を続行できるようになります。サーバーは Ajax エンジン要求を処理した後、応答を Ajax エンジンに渡し、Ajax エンジンはクライアントのブラウザ ページを更新します。

  3. Ajax 開発ステップ
    ステップ 1: XMLHttpRequest オブジェクトを取得します。
    サンプルコードは、w3school の XML ドキュメントにあります。 

var xmlhttp = null;if(window.XMLHttpRequest){    //这个是针对浏览器IE7及其7以上的版。
    xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){    //这个是针对浏览器5到7的版本。
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

ステップ 2: コールバック関数を登録します。
xmlhttp.onreadystatechange = function(){
};
onreadystatechange は、各状態の変化によってトリガーされるイベントのイベント ハンドラーです。

ステップ 3: open("method","URL",async,"uname","pswd")
リクエストメソッド、URL パス、同期するかどうかを設定するためにのみ使用され、リクエストは送信されません。

パラメータ 関数
メソッド リクエストを送信する方法、オプションのパラメータはGET、POST、PUTで​​す。
URL 送信するURLパスは、絶対パスと相対パスを使用できます。
async リクエストを非同期で処理するかどうか。デフォルト値は true です。空白のままにすることもできます。
tru​​e、send()送信後もスクリプト処理は継続します、つまり非同期処理です。
false の場合、スクリプトは特定の応答を待ってからスクリプト処理、つまり同期処理を続行します。
uname 私はまだ使ったことがなく、ドキュメントにも説明がありません。ただ書かないでください。
pswd 私はまだ使用していませんし、ドキュメントにも説明がありません。ただ書かないでください。


URL にパラメーターが必要な場合はどうすればよいですか?
get リクエストの場合は、URL の直後にパラメータを連結します。
例: xmlhttp.open("get","http://www.baidu.com?name=xiaosan");

投稿リクエストの場合、複数の設定操作が必要です:
例: xmlhttp. open ("post","http://www.baidu.com");
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlhttp.send("name) = xiaosan");
このうち、setRequestHeader("label","value") の機能は、送信される http ヘッダーにラベルと値のペアを追加することです。

ステップ 4: 送信(コンテンツ)
リクエストを送信します。パラメータがない場合はsend(null)と書きます。

ステップ 5: コールバック関数で特定のデータ操作を実行します。
その前に、XMLHttpRequest のいくつかのプロパティを理解する必要があります。

プロパティ 説明
onreadystatechange 状態が変化すると、いくつかのことがトリガーされることがあります。
readyState 詳細については、以下の表を参照してください
status 「OK」は200、「Not Found」は404など、数値はステータスを返します
statusText 文字列を返します「 OK」、「見つかりません」などのステータス
responseText 応答を文字列として返します。
responseXML XML で応答を返します。返されるのは XML オブジェクトであり、DOM を使用して解析できます

次の表は、readyState のステータス値とステータス値の意味を示しています。

0 で表されます。初期化されていない状態は、XMLHttpRequest オブジェクトが作成される前の読み込み状態を表します 1open 操作。 2ロードステータス、送信操作。 3 インタラクティブ状態では、レスポンスデータは受信していますが、レスポンスヘッダーとボディのみを受信して​​いません。 4Completeステータス、全てのhttpレスポンス受信が完了しました。 AJAX ユーザーマニュアル
この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト の列にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がAjax の基本的な開発についてご存知ですか? ajaxの基本的な開発手順を詳しく解説（サンプル付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：$.ajax() メソッドのパラメータについてどれくらい知っていますか? $.ajax()メソッドの各パラメータの詳しい説明次の記事：$.ajax() メソッドのパラメータについてどれくらい知っていますか? $.ajax()メソッドの各パラメータの詳しい説明

関連記事

続きを見る