ajax チュートリアル
ajaxを使い始める

ASP.NET asp.net-mvc C# Language HTML JavaScript jQuery MySQL Node.js PHP Ruby on Rails
サーチ…


備考

AJAX（同期J avaScript ND X ML）は、コードの実行をブロックすることなく 、外部データを要求することを可能にします。多くの場合、これは、（XMLhttpRequestsを介して）サーバーからのページまたは情報の要求を要求し、次にjavascriptを使用してそれを処理および表示することで実装されます。

AJAXのノンブロッキング性は、それがそのような広範なソフトウェアパターンになる理由です。 javascriptはブラウザでブロックされているため、同期外部呼び出しは、データが返されるかタイムアウトになるまで、呼び出しの間応答しなくなります。実際には、アプリケーションを外部アーキテクチャに完全に依存させ、アプリケーションがどれだけうまく動作するかを判断します。

AJAX呼び出しは、通常、追加の機能や可読性を提供するために抽象化されていますが、実装は（通常） XMLHttpRequest 仕様に基づいています。

インストールまたはセットアップ

AJAXとは何ですか？

AJAXはAsynchronous JavaScript and XMLの略です。簡単に言えば、サーバーサイドスクリプトと通信するのはXMLHttpRequestオブジェクトの使用です。 JSON、XML、HTML、さらにはテキストファイルなど、さまざまな形式で情報を送受信することができます。 -Mozilla開発者ネットワーク2016

AJAXを実装する最も簡単な方法は、特にサーバーとの通信を計画している場合は、jQueryを使用することです。

jQueryとは何ですか？

jQueryは、高速で機能が充実したJavaScriptライブラリです。 HTMLドキュメントのトラバースや操作、イベント処理、アニメーション、Ajaxなどの機能を、多数のブラウザで動作する使いやすいAPIを使用すると、はるかに簡単にすることができます。 -jquery.com

多くのjQueryを使用していない人にとって、私たちの生活を楽にするために使用できる関数と考えることができます。これは、同じことを達成するために書かなければならないコードの量を削減するAJAXでの使用に最適です！

jQueryをWebサイトに追加する方法

Ajaxを使用する必要がある場合は、プロジェクトにjQueryを追加する必要があります。 http://jquery.com/download/このリンクには、jqueryを追加するさまざまな方法があります。 jQueryのダウンロード版を使用することも、CDNを使用することもできます。 http://jquery.com/download/#jquery-39-s-cdn-provided-by-maxcdn 。しかし、CDNを使用するとセキュリティ上のリスクがあります。プロジェクトがjqueryを使用するように呼び出すと、ハッカーがその呼び出しを操作できるようになります。あなたがダウンロードしたバージョンを使うことができればもっと良いです。 HTMLプロジェクトにjqueryを追加する方法を見てみましょう。それは簡単です。最初の例は、ダウンロードしたソースを使用することです。 http://jquery.com/download/#jqueryダウンロードへのリンクを使用してください。 jqueryを使いたいだけなら、ダウンロードすることをお勧めします。 圧縮されたproduction jQuery 3.1.1をダウンロードしてください。jquery-version.min.jsを適切な場所（プロジェクトのjavascriptフォルダなど）に追加してください。以下のようにsrc = jquery / locationを指定します。 

<head>

<script src="path/from/html/page/to/jquery.min.js"></script>

</head>

CDNの使い方を見てみましょう。このリンクhttp://jquery.com/download/#using-jquery-with-a-cdnあなたは様々なCDN（コンテンツ配信ネットワーク）を見ることができます。 

<head>

<script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>

</head>

ご覧のとおり、CDNプロバイダが提供するタグを追加するだけです。 htmlページにいくつかのスクリプトを追加して、動作していることを確認します。 

<script>
$(document).ready(function(){
    alert("jQuery Works")
});
</script>

jQueryがアラートを表示する場合は、正しく追加したことを意味します。

サーバーと通信するための単純なjQueryの例

jQuery.ajax APIの WebサイトからjQuery.ajax ： 

$.ajax({
    method: "POST",
    url: "some.php",
    data: {
        name: "John",
        location: "Boston"
    },
    success: function(msg) {
        alert("Data Saved: " + msg);
    },
    error: function(e) {
        alert("Error: " + e);
    }
});

このコードは、jQueryのために読みやすく、何が起こっているのかを理解するのが簡単です。

  • $.ajax - このビットはjQueryのajax機能を呼び出します。

  • method: "POST" - この行は、POSTメソッドを使用してサーバーと通信することを宣言しています。リクエストの種類についてお読みください！

  • url -要求をするために送信されようとしているところ、この変数を宣言します。あなたはどこかにリクエストを送っています。それがアイデアです。

  • data - かなり簡単です。これはあなたのリクエストで送信するデータです。

  • success -あなたが戻って取得データをどのように処理するかを決定するために書くここにこの機能msg ！この例のように、現在はmsgが返されるアラートを作成しています。

  • error - エラーメッセージを表示するための記述、またはajaxリクエストがエラーを起こしたときに動作するアクションを提供するための関数です。

  • .done代わりに

    success: function(result) {
    // do something
});

同期 - 非同期ajaxリクエスト

非同期のajax呼び出し

このタイプのajax呼び出しでは、コードは呼び出しが完了するまで待機しません。 

$('form.ajaxSubmit').on('submit',function(){
    // initilization...
    var form   = $(this);
    var formUrl    = form.attr('action');
    var formType   = form.attr('method');
    var formData   = form.serialize();
    
    $.ajax({
        url: formUrl,
        type: formType,
        data: formData,
        async: true,
        success: function(data) {
            // .....
        }
    });
    //// code flows through without waiting for the call to complete
    return false;
});

同期Ajax呼び出し

このタイプのajax呼び出しでは、コードは呼び出しが完了するのを待ちます。 

$('form.ajaxSubmit').on('submit',function(){
    // initilization...
    var form   = $(this);
    var formUrl    = form.attr('action');
    var formType   = form.attr('method');
    var formData   = form.serialize();
    var data = $.ajax({
            url: formUrl,
            type: formType,
            data: formData,
            async: false
        }).responseText;
    //// waits for call to complete
    return false;
});

XMLHttpRequestオブジェクトを使用して送信された単純なAjaxリクエスト

var httpRequest = new XMLHttpRequest();

httpRequest.onreadystatechange = getData;

httpRequest.open('GET', 'https://url/to/some.file', true);
httpRequest.send();

function getData(){
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
        alert(httpRequest.responseText);
    }
}

new XMLHttpRequest()は新しいXMLHttpRequestオブジェクトを作成します。これはリクエストを送信するものです

onreadystatechangeビットは、ステータスが変化するgetData()を呼び出すgetData()リクエストをgetData()ます

.open()はリクエストを作成します。リクエストメソッド （ ' GET '、 ' POST 'など）、クエリしているページのURL、オプションでリクエストが非同期であるかどうか

.send()リクエストを送信します。これはオプションで.send(data)ようなサーバーに送信するデータを受け入れます。

最後に、 getData()はリクエストのステータス が変化するたびに呼び出されるべき関数です。 readyStateがDONEに等しい場合は、サーバーから受信したデータだけであるresponseTextに警告します。

詳細は、MDNのGetting Started ガイドを参照してください 。

単純なコールバックで、バニラのjavascriptでajaxを使用する

ここでは、vanilla javascript（es2015ではなく）で書かれた簡単なajax呼び出しを作成する関数を示します。 

function ajax(url, callback) {
    var xhr;
     
    if(typeof XMLHttpRequest !== 'undefined') xhr = new XMLHttpRequest();
    else {
        var versions = ["MSXML2.XmlHttp.5.0", 
                        "MSXML2.XmlHttp.4.0",
                        "MSXML2.XmlHttp.3.0", 
                        "MSXML2.XmlHttp.2.0",
                        "Microsoft.XmlHttp"]

         for(var i = 0, len = versions.length; i < len; i++) {
            try {
                xhr = new ActiveXObject(versions[i]);
                break;
            }
            catch(e){}
         } // end for
    }
     
    xhr.onreadystatechange = ensureReadiness;
     
    function ensureReadiness() {
        if(xhr.readyState < 4) {
            return;
        }
         
        if(xhr.status !== 200) {
            return;
        }

        // all is well  
        if(xhr.readyState === 4) {
            callback(xhr);
        }           
    }
     
    xhr.open('GET', url, true);
    xhr.send('');
}

次のように使用できます。 

ajax('myFile.html', function(response) {
    document.getElementById('container').innerHTML = response.responseText;
});

Ecmascript 6（es2015とも呼ばれます）を使用する場合は、 fetchメソッドを使用して、約束を返します。 

fetch('myFile.json').then(function(res){
    return res.json();
 });

es2015についてのfurthnerの読書については、以下のリンクに従ってください： 約束

TypeScriptを使用した非同期AJAX呼び出しの実行

ショッピングカートに商品を追加する

次の例は、AJAXとTypeScriptを使用して、非同期にデータベーステーブルに製品（または何か）を追加する方法を示しています。 

declare var document;
declare var xhr: XMLHttpRequest;

window.onLoad = () =>
{
    Start();
};

function Start()
{
    // Setup XMLHttpRequest (xhr).
    if(XMLHttpRequest)
    {
        xhr = new XMLHttpRequest();
    }
    else
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    AttachEventListener(document.body, "click", HandleCheckBoxStateChange);
}

function AttachEventListener(element: any, e, f)
{
    // W3C Event Model.
    if(element.addEventListener)
    {
        element.addEventListener(e, f, false);
    }
    else if(element.attachEvent)
    {
        element.attachEvent("on" + e, (function(element, f)
        {
            return function()
            {
                f.call(element, window.event);
            };
        })
        (element, f));
    }

    element = null;
}

function HandleCheckBoxStateChange(e)
{
    var element = e.target || e.srcElement;

    if(element && element.type == "checkbox")
    {
        if(element.checked)
        {
            AddProductToCart(element);
        }
        else
        {
            // It is un-checked.
            // Remove item from cart.
        }
    }
    else
    {
        break;
    }
}

AddProductToCart(e)
{
    var element = <HTMLInputElement>document.getElementById(e.id);

    // Add the product to the Cart (Database table)
    xhr.onreadystatechange = function()
    {
        if(xhr.readyState == 4)
        {
            if(xhr.status == 200)
            {
                if(element != null)
                {
                    console.log("200: OK");
                }
                else
                {
                    console.log(":-(");
                }
            }
            else
            {
                // The server responded with a different response code; handle accordingly.
                // Probably not the most informative output.
                console.log(":-(");
            }
        }
    }

    var parameters = "ProductID=" + encodeURIComponent(e.id) + "&" + "Action=Add&Quantity=" + element.value;

    xhr.open("POST", "../Cart.cshtml");
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.setRequestHeader("Content-length", parameters.length.toString());
    xhr.setRequestHeader("Connection", "close");

    xhr.send(parameters);

    return e.id;
}

この例を完成させるには、実際にこのデータをデータベースに挿入するようにサーバー側のコードを更新してください。上記のコードでは、C＃を使用していて、 Cart.cshtmlファイルがあるとCart.cshtmlます。しかし、単にcshtmlをphpに置き換えて、あなたが選んだ言語を使用して独自のサーバー側ロジックを作成してください。



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow