ajax開始使用ajax


備註

AJAX( 同步 ĴavaScript 一個第二X ML)可以請求外部數據而不阻塞的代碼的執行。在許多情況下,這是在從服務器請求頁面或信息(通過XMLhttpRequests)然後使用javascript處理和顯示它時實現的。

AJAX的非阻塞特性使其成為如此普遍的軟件模式。由於javascript在瀏覽器中被阻止,因此同步外部呼叫會使瀏覽器在呼叫持續時間內無響應,直到它返回數據或超時。實際上,使您的應用程序完全依賴於外部架構以及它的執行情況。

AJAX調用通常被抽像出來以提供額外的功能或可讀性,但實現(通常)構建在XMLHttpRequest 規範之上。

安裝或設置

什麼是AJAX?


AJAX代表異步JavaScript和XML。簡而言之,它是使用XMLHttpRequest對象與服務器端腳本進行通信。它可以以各種格式發送和接收信息,包括JSON,XML,HTML甚至文本文件。 -Mozilla開發者網絡2016

實現AJAX的最簡單方法,特別是如果您計劃與服務器通信,則使用jQuery。

什麼是jQuery?


jQuery是一個快速,小巧,功能豐富的JavaScript庫。它通過易於使用的API在大量瀏覽器中運行,使得HTML文檔遍歷和操作,事件處理,動畫和Ajax更加簡單。 -jquery.com

對於那些沒有使用過多jQuery的人來說,把它想像成我們可以用來讓我們的生活更輕鬆的功能。這非常適合與AJAX一起使用,因為它減少了我們必須編寫的代碼量來完成同樣的事情!

如何將jQuery添加到您的網站

如果需要使用Ajax,則需要將jQuery添加到項目中。 http://jquery.com/download/在此鏈接中,您可以看到許多添加jquery的方法。您可以使用下載的jQuery版本,也可以使用CDN。 http://jquery.com/download/#jquery-39-s-cdn-provided-by-maxcdn 。但是,如果您使用CDN,則存在一些安全風險。因為項目要求使用jquery,所以黑客可以操縱這個電話。如果你可以使用下載版本那麼更好。讓我們看看如何將jquery添加到html項目。這很簡單。第一個例子是使用Downloaded源。使用此鏈接http://jquery.com/download/#jquery下載。如果你只是想使用jquery,我建議你下載下載壓縮,生產jQuery 3.1.1當你下載它時,將jquery-version.min.js添加到適當的地方(比如項目的javascript文件夾)然後只需添加標籤與src = jquery /位置如下。

<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工作警報,那就意味著你正確地添加了它。

使用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 文件。但是,只需用php 替換cshtml ,並使用您選擇的語言編寫自己的服務器端邏輯。

使用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() 請求

.open() 創建我們的請求 - 這需要一個請求方法 (' GET ',' POST '等),您正在查詢的頁面的URL,以及可選的請求是否應該是異步的

.send() 發送我們的請求 - 這可選擇接受數據發送到服務器,如.send(data)

最後, getData() 是我們每次請求狀態 更改時應該調用的函數。如果readyState等於DONE,則它會提醒responseText ,它只是從服務器收到的數據。

有關詳細信息,請參閱MDN 入門指南

與服務器通信的簡單jQuery示例

取自jQuery.ajax API網站:

$.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;
});
 

使用帶有簡單回調的vanilla javascript中的ajax

這是我們創建一個用vanilla javascript編寫的簡單ajax調用的函數(不是es2015):

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方法,它返回一個promise:

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

有關es2015承諾的更多信息,請點擊下面的鏈接: Promises