ajax技术简介_AJAX简介-蒲公英云

ajax技术简介

One of the key skills of a frontend developer is to write asynchronous code for consuming API. AJAX stands for Asynchronous JavaScript and XML. It is an approach or concept to bind web apps and structure them. Back when web apps started coming out, the web page had to be refreshed for any data to be updated on the DOM. AJAX lets us create web apps that can update without refreshing. This is one of the main features of a single page application, where you can load data without refreshing the page and produce it in multiple views on the frontend using some frontend framework. In this article, we’ll look at what exactly AJAX is, how it works, why it was needed against the conventional web application model and how to write AJAX requests to consume an API.

前端开发人员的一项关键技能是编写用于使用API的异步代码。 AJAX代表异步JavaScript和XML 。绑定Web应用程序并构建它们是一种方法或概念。回到Web应用程序开始出现时，必须刷新网页才能在DOM上更新任何数据。 AJAX使我们可以创建无需更新即可更新的Web应用程序。这是单页应用程序的主要功能之一，您可以在不刷新页面的情况下加载数据，并使用某些前端框架在前端的多个视图中生成数据。在本文中，我们将研究AJAX到底是什么，它如何工作，为什么要针对常规Web应用程序模型使用AJAX，以及如何编写AJAX请求以使用API。

Let’s look at the working of a classic web application which worked on the synchronous model,

让我们看一下在同步模型上工作的经典Web应用程序的工作情况，

AJAX Introduction

At the start of the session, a web page is loaded on the client side. Whenever new data has to be fetched, the application would send an HTTP request to the server(typically a web server) which would process this request, query the data by connecting to a Database and perform the backend operations. Everytime the web page required some data, this process would be repeated again and again.

在会话开始时，在客户端上加载了一个网页。每当需要获取新数据时，应用程序都会向服务器(通常是Web服务器)发送HTTP请求，该服务器将处理该请求，通过连接到数据库查询数据并执行后端操作。每次网页需要一些数据时，都会一次又一次地重复此过程。

The AJAX web application model worked in the asynchronous mode,

AJAX Web应用程序模型在异步模式下工作，

AJAX Introduction

Instead of loading a web page at the start of the session, the browser loads an AJAX engine. This AJAX engine was itself written in JavaScript which renders the interface and communication with the server. The AJAX allows user’s interaction with the application to happen asynchronously independent of communication with the server. The website can send and request data. The data can be sent to and from the server in the background without disturbing the current page which is the core principle of single page applications.

浏览器将加载AJAX引擎，而不是在会话开始时加载网页。该AJAX引擎本身是用JavaScript编写的，可呈现与服务器的接口和通信。 AJAX允许用户与应用程序的交互独立于与服务器的通信而异步发生。该网站可以发送和请求数据。可以在后台将数据发送到服务器或从服务器发送数据，而不会打扰当前页面，这是单页面应用程序的核心原理。

XML is just a type of data that was popular at that time and was the JSON equivalent of that time. It is syntactically similar to HTML but does not describe presentation like HTML. It simply represents data and relations between them. XML and JSON both are just data formats. API’s don’t respond with HTML but with pure data and JSON consists of key-value pairs and looks almost exactly like JavaScript objects. It is popular today because of its similarity with JavaScript.

XML只是当时很流行的一种数据，与当时的JSON等价。它在语法上类似于HTML，但没有描述类似HTML的表示形式。它只是表示数据及其之间的关系。 XML和JSON都只是数据格式。 API不会以HTML进行响应，而是以纯数据和JSON进行响应，而JSON由键值对组成，看起来几乎与JavaScript对象完全一样。由于它与JavaScript相似，因此今天很流行。

Writing AJAX requests with XHR

用XHR编写AJAX请求

var XHR=new XMLHTTPRequest();
XHR.onreadyStatechange=function(){
    if(XHR.readyState==4){
        if(XHR.status==200)
            document.write(XHR.response);
        else
            document.write(XHR.response);
    }
}
XHR.open("GET",url);
XHR.send();

Let’s try to consume an API that sends a random quote everytime you make an AJAX call to it.

让我们尝试使用每次调用AJAX时都会发送随机报价的API。

var url="https://api.github.com/zen";

Problems with XHR:

XHR问题：

It has a bulky syntax and is 16 years old which means too old for web technologies. It wasn’t typically created for Single Page Applications and does not provide support for streaming data.

它具有庞大的语法，并且已有16年的历史，对于网络技术而言太老了。它通常不是为单页应用程序创建的，并且不提供对流数据的支持。

Modern methods for making AJAX requests are using the fetch() method or third party libraries like JQuery and Axios.

提出AJAX请求的现代方法是使用fetch()方法或第三方库(如JQuery和Axios)。