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