検索

ホームページ  >  記事  >  ウェブフロントエンド  >  Ajax httpリクエストを使用するにはどうすればよいですか? ajax はどのようにサーバーにリクエストを行うのでしょうか? (分析例を添付)

Ajax httpリクエストを使用するにはどうすればよいですか? ajax はどのようにサーバーにリクエストを行うのでしょうか? (分析例を添付)

寻∝梦
寻∝梦オリジナル
2018-09-10 11:21:322563ブラウズ

この記事では、ajaxの基礎知識、ajaxの歴史、ajaxの基本的な使い方を中心に解説していきます

AJAXの基本
AJAXとは、非同期JavaScriptとXMLのことです。 (非同期 JavaScript および XML)。
AJAX は、2005 年に Google によって普及されたプログラミング モデルです。
AJAX は新しいプログラミング言語ではなく、既存の標準を使用する新しい方法です。
AJAX を使用すると、より優れた、より高速で、よりユーザーフレンドリーな WEB アプリケーションを作成できます。
AJAX は JavaScript と HTTP リクエスト (HTTP リクエスト) に基づいています。
AJAX の概要
AJAX は、非同期 JavaScript および XML を指します。
知っておくべき基本的な知識
続行する前に、以下の基本を理解しておく必要があります:
* HTML /
AJAX = 非同期 JavaScript および XML
AJAX は新しいプログラミング言語ではなく、より優れた、より高速で、よりインタラクティブな Web アプリケーションを作成するためのテクノロジーです。
AJAX を使用すると、JavaScript の XMLHttpRequest オブジェクトを使用して、JavaScript がサーバーと直接通信できます。この
オブジェクトを通じて、JavaScript Web サーバーはデータを交換します。 AJAX は、ページをリロードせずにブラウザと Web サーバーの間で非同期データ転送 (HTTP リクエスト) を使用できるため、Web ページはページ全体ではなく少量の情報をサーバーに要求できます。
AJAX は、インターネット アプリケーションをより小さく、より速く、より使いやすくします。
AJAX は、Web サーバー ソフトウェアから独立したブラウザー テクノロジーです。 WAJAX は Web 標準
ajax に基づいています。 次の Web 標準に基づいています:
* javascript
* xml
* HTML
* CSS
AJAX で使用される Web 標準は明確に定義されており、すべての主流ブラウザーでサポートされています。 AJAX アプリケーションはブラウザーやプラットフォームに依存しません。
AJAX はより優れたアプリケーションです
Web アプリケーションにはデスクトップ アプリケーションに比べて多くの利点があります。Web アプリケーションは幅広いユーザーに利用可能であり、インストールと保守が簡単で、開発も簡単です。
ただし、インターネット アプリケーションは、従来のデスクトップ アプリケーションほど完全ではなく、使いやすいものでもありません。
AJAX を使用すると、インターネット アプリケーションがより完全になり、より使いやすくなります。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイト
AJAX 開発マニュアル
のコラムにアクセスして学習してください)


AJAX Http リクエストA JAX は Http リクエストを使用します

従来の JavaScript プログラミングでは、サーバー上のファイルまたはデータベース サーバーから情報を取得する場合、またはサーバーに情報を送信する場合は、HTML フォームを使用してサーバーにデータを GET または POST する必要があります。ユーザーは「送信」ボタンをクリックして情報を送信/取得し、サーバーの応答を待つ必要があります。その後、新しいページに結果が読み込まれます。

ユーザーが入力を送信するたびにサーバーが新しいページを返すため、従来の Web アプリケーションは遅くなり、ますます使いにくくなります。 AJAX を利用することで、JavaScript は JavaScript の XMLHttpRequest オブジェクトを通じてサーバーと直接通信します。 HTTP リクエストを使用すると、Web ページはページをロードせずにサーバーにリクエストを送信し、サーバーから応答を取得できます。ユーザーは同じページに留まることができ、スクリプトがバックグラウンドでページを要求していることやサーバーにデータを送信していることに気づきません。
XMLHttpRequest オブジェクト
XMLHttpRequest オブジェクトを使用すると、Web 開発者はページが読み込まれた後にサーバーからページを更新できます。
AJAX は 2005 年に Google によって普及されました (Google サジェスト)。
Google は、XMLHttpRequest オブジェクトを使用して非常に動的な Web インターフェイスを作成することを推奨しています。Google の検索ボックスにクエリを入力し始めると、JavaScript がこれらの単語をサーバーに送信し、サーバーは一連の検索候補を返します。
XMLHttpRequest オブジェクトは次のブラウザでサポートされています: Internet Explorer 5.0 以降、Safari 1.2、Mozilla 1.0 / Firefox、Opera 8 以降、および Netscape 7。


初めての AJAX アプリケーション
AJAX の仕組みを理解するために、小さな AJAX アプリケーションを作成します。
まず、ユーザー名と時刻という 2 つのテキスト ボックスを含む HTML フォームが必要です。ユーザー名のテキスト ボックスはユーザーによって入力され、時間のテキスト ボックスは
AJAX を使用して入力されます。
この HTML ファイルは「testAjax.htm」と呼ばれます (この HTML フォームには送信ボタンがないことに注意してください): 

<html>
<body>
<form name="myForm">
用户: <input type="text" name="username" />
时间: <input type="text" name="time" />
</form>
</body>
</html>

AJAX ブラウザ サポート
AJAX - ブラウザ サポート
AJAX の主要なポイントは、XMLHttpRequest オブジェクトです。
ブラウザが異なると、XMLHttpRequest オブジェクトを異なる方法で作成します。
IE ブラウザは ActiveXObject を使用しますが、他のブラウザは XMLHttpRequest と呼ばれる JavaScript 組み込みオブジェクトを使用します。
さまざまなブラウザー用にこのオブジェクトを作成するには、「try and catch」ステートメントを使用する必要があります。 try および catch ステートメントの詳細については、JavaScript チュートリアルで読むことができます
。
XMLHttpRequest オブジェクトを作成する次の JavaScript で「testAjax.htm」ファイルを更新しましょう: 

<html>
<body>
<script type="text/javascript">
function ajaxFunction()
 {
        var xmlHttp;
        try{           
                    // Firefox, Opera 8.0+, Safari
                    xmlHttp=new XMLHttpRequest();
             }            
       catch (e){                 
                   // Internet Explorer                                
                   try{
                 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                        }
                   catch (e){
                                    try{
                            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                                         }
                                   catch (e){
               return false;
                                                  }    
                                  }
                      }
}
</script>
<form name="myForm">
用户: <input type="text" name="username" />
时间: <input type="text" name="time" />
</form></body>
</html>

例の説明:
まず、XMLHttpRequest オブジェクトを保持する xmlHttp 変数を宣言します。
次に、XMLHttp=new XMLHttpRequest() を使用してこのオブジェクトを作成します。このステートメントは、Firefox、Opera、Safari ブラウザーを対象としています。
失敗した場合は、xmlHttp=new ActiveXObject("Msxml2.
これら 3 つの方法のいずれも機能しない場合、ユーザーは古いブラウザを使用しており、このブラウザが
AJAX をサポートしていないことを示すプロンプトが表示されます。
注: 上記のブラウザをカスタマイズするコードは非常に長く複雑です。ただし、このコードは XMLHttpRequest オブジェクトを作成するときに便利なので、必要なときにいつでもこのコードをコピーして貼り付けることができます。上記のコードは、すべての主要なブラウザーと互換性があります:
Internet Explorer、Opera、Firefox、Safari。

AJAX - XMLHttpRequest オブジェクト
AJAX - XMLHttpRequest オブジェクトに関するさらなる知識 サーバーにデータを送信する前に、XMLHttpRequest オブジェクトの 3 つの重要なプロパティについて説明する必要があります。
onreadystatechange 属性
onreadystatechange 属性には、サーバーの応答を処理する関数が格納されます。次のコードは、
onreadystatechange 属性を同時に設定できる空の関数を定義しています:
xmlHttp.onreadystatechange=function()
{
// ここにコードを記述する必要があります
}
readyState 属性
readyState 属性はサーバーを保存します応答ステータス情報。 readyState が変化するたびに、onreadystatechange 関数が実行されます。
readyState 属性の可能な値は次のとおりです:
状態の説明
0
リクエストは初期化されていません (open() を呼び出す前)
1
リクエストは行われました (send() を呼び出す前)
2
リクエストが送信されました (これは通常、次から取得できます。レスポンスはコンテンツ ヘッダーを取得します)
3
リクエストは処理中です (通常、一部のデータはレスポンスで利用可能ですが、サーバーはレスポンスを完了していません)
4
リクエストが完了しました (サーバーの応答にアクセスして使用できます)

これに進みます onreadystatechange 関数は、応答が完了したかどうか (データが利用可能であることを意味します) をテストするための If ステートメントを追加します
:
xmlHttp.onreadystatechange=function()
{
if（xmlhttp.ReadyState == 4）
{
レスポンスはデータを取得します
}}
responsetext属性
レスポンテキスト属性を使用して、サーバーによって返されるデータを取得できます。
コードでは、時間テキストボックスの値をresponseTextと等しく設定します:
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value = xmlHttp.responseText;
}
}

AJAX - サーバーにリクエスト

AJAX - リクエストをサーバーに送信します リクエストをサーバーに送信するには、open() メソッドと send() メソッドを使用する必要があります。 open() メソッドには 3 つのパラメータが必要です。最初のパラメータは、リクエストの送信に使用されるメソッド (GET または POST) を定義します。 2 番目のパラメータは、サーバー側スクリプトの URL を指定します。 3 番目のパラメータは、リクエストを非同期で処理することを指定します。
send() メソッドはリクエストをサーバーに送信します。 HTML ファイルと ASP ファイルが同じディレクトリにあると仮定すると、コードは次のようになります。
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);

ここで、AJAX 関数をいつ実行するかを決定する必要があります。ユーザーがユーザー名のテキスト ボックスに何かを入力すると、関数が「舞台裏」で実行されます

。 

<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
    var xmlHttp;
    try
    {
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
        // Internet Explorer
        try
        {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
        try
        {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e)
        {
            alert("您的浏览器不支持AJAX!");
            return false;
        }
    }
}
xmlHttp.onreadystatechange=function()
{
    if(xmlHttp.readyState==4)
    {
        document.myForm.time.value=xmlHttp.responseText;
    }
}
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
}
</script>
<form name="myForm">
用户: <input type="text" name="username" onkeyup="ajaxFunction();"/>
时间: <input type="text" name="time" />
</form>
</body>
</html>


AJAX - サーバーサイドスクリプト

次に、現在のサーバー時間を表示するスクリプトを作成します。

responseText プロパティには、サーバーから返されたデータが保存されます。ここでは現在時刻を返したいと思います。これは「time.asp」のコードです: 

<%response.expires=-1
response.write(time)%>

注释：Expires 属性可设置在页面缓存失效前页面被缓存的时间（分钟）。Response.Expires=-1 指示页面不会被
缓存。
运行您的 AJAX 应用程序
请在下面的文本框中键入一些文本，然后单击时间文本框：
用户 : 时间 :
时间文本框可在不加载页面的情况下从 "time.asp" 获得服务器的时间！

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

以上がAjax httpリクエストを使用するにはどうすればよいですか? ajax はどのようにサーバーにリクエストを行うのでしょうか? (分析例を添付)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：アヤックスはどのように機能するのでしょうか? ajax の動作原理の紹介とその長所と短所の分析次の記事：アヤックスはどのように機能するのでしょうか? ajax の動作原理の紹介とその長所と短所の分析

関連記事

続きを見る