In the "AJAX Chinese Reference Manual", AJAX is not a new programming language, but a new method of using existing standards. AJAX is the art of exchanging data with a server and updating parts of a web page without reloading the entire page.
AJAX stands for "Asynchronous JavaScript and XML" (asynchronous JavaScript and XML technology), which refers to a set of browser-side web development technologies that combine multiple technologies. The concept of Ajax was proposed by Jesse James Jarrett.
Traditional web applications allow the user to fill in a form, and when the form is submitted, a request is sent to the web server. The server receives and processes the incoming form, and then sends back a new web page, but this wastes a lot of bandwidth because most of the HTML code in the two pages is often the same. Since each application communication requires sending a request to the server, the application's response time depends on the server's response time. This results in a UI that is much slower to respond than native apps.
Different from this, AJAX applications can only send and retrieve necessary data to the server, and use JavaScript on the client to process the response from the server. Because less data is exchanged between the server and the browser, the server responds faster. At the same time, a lot of processing work can be completed on the client machine that makes the request, so the load on the Web server is also reduced.
Tip: Before you start learning AJAX, you should be familiar with HTML, CSS, javascript Knowledge has a basic understanding.
Similar to DHTML or LAMP, AJAX does not refer to a single technology, but organically utilizes a series of related technologies. Although its name contains XML, the data format can actually be replaced by JSON, further reducing the amount of data, forming what is called AJAJ. The client and server do not need to be asynchronous.
Initial use of AJAX
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tryrun 1</title> </head> <body> <div id="view"> <p>点击下面的按钮,将 Ajax 请求回来的数据更新在该文本内</p> </div> <button type="button" id="btn">发起 Ajax 请求</button> <script> document.getElementById("btn").onclick = ajaxRequest; function ajaxRequest () { var xhr = new XMLHttpRequest(); xhr.open("GET", "https://www.php.cn/statics/demosource/ajax_info.txt", true); xhr.send(); xhr.onreadystatechange = function(){ if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById("view").innerHTML = xhr.responseText; } } } </script> </body>
Run Example»
Click "Run Example" Button to view online examples
Tips: Our AJAX tutorial will help you learn how to master and apply AJAX step by step. If you have any questions, please go to the PHP Chinese website AJAX Community to ask your question If you have any questions, enthusiastic netizens will answer them for you.
AJAX Advantages and Disadvantages
The biggest advantage of using Ajax is that it can maintain data without updating the entire page. This allows web applications to respond more quickly to user actions and avoids sending unchanged information over the network.
Ajax does not require any browser plug-ins, but requires the user to allow JavaScript to execute on the browser. Just like DHTML applications, Ajax applications must be rigorously tested on many different browsers and platforms. As Ajax matures, some program libraries that simplify the use of Ajax have also come out. Likewise, another assistive programming technology has emerged to provide alternative functionality for users who do not support JavaScript.
The main criticism of using Ajax is that it can break the browser's back and bookmark functionality. In the case of dynamically updated pages, the user cannot go back to the previous page state because the browser can only remember static pages in the history. The possible differences between a page that has been completely read and a page that has been dynamically modified are very subtle; users often expect to click the back button to cancel their previous operation, but in an Ajax application, this is not the case. Unable to do so. However, developers have come up with various ways to solve this problem. Most of the methods before HTML5 were to create or use a hidden IFRAME to reproduce the changes on the page when the user clicks the back button to access the history. (For example, when the user clicks back in Google Maps, it searches in a hidden IFRAME and then reflects the search results onto an Ajax element to restore the application state to what it was at that time).
Regarding the problem of not being able to add status to favorites or bookmarks, one way before HTML5 was to use URL fragment identifiers (often called anchors, the part after # in the URL) ) to keep track and allow the user to return to a specified application state. (Many browsers allow JavaScript to dynamically update anchors, which allows Ajax applications to update anchors while updating the displayed content.) HTML5 will later be able to directly manipulate browsing history, store web page status as a string, and add web pages to web favorites. When clipping or bookmarking, the state is retained invisibly. The above two methods can also solve the problem of being unable to retreat at the same time.
When developing Ajax, network latency—that is, the interval between a user's request and the server's response—needs to be carefully considered. Not giving users a clear response, not properly pre-reading data, or improperly handling XMLHttpRequest will make users feel bored. A common solution is to use a visual component to tell the user that the system is performing background operations and reading data and content.
Application
Use XHTML CSS to express information;
Use JavaScript to operate DOM (Document Object Model) to run dynamic effects;
Use XML and XSLT to manipulate data;
Use XMLHttpRequest or the new Fetch API for asynchronous data exchange with the web server ;
Note: AJAX is different from RIA technologies such as Flash, Silverlight and Java Applet.
Content covered by this AJAX tutorial manual
This AJAX tutorial manual covers all basic usage methods of AJAX, including getting started with AJAX, introduction to AJAX, AJAX examples, XHR creation objects, XHR requests, Knowledge of XHR response, XHR readyState, AJAX ASP/PHP, AJAX database, AJAX XML, etc.
Tips: Each chapter of this tutorial contains many AJAX examples. You can directly click the "Run Example" button to view the results online. These examples will help you better understand and use AJAX.
Latest chapter
- AJAX 实例 2016-10-19
- AJAX XML 2016-10-19
- AJAX 数据库 2016-10-19
- AJAX ASP/PHP 2016-10-19
- XHR readystate 2016-10-19
- XHR 响应 2016-10-19
- XHR 请求 2016-10-19
- XHR 创建对象 2016-10-19
Related courses
- Quick introduction to web front-end development 2021-12-10
- The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original] 2022-09-30
- Gulp Getting Started Video Tutorial 2022-04-18
- Brothers in Arms Gao Luofeng CSS3 video tutorial 2022-04-20
- AngularJS development web application basic example video tutorial 2022-04-18
- Ajax full contact 2022-04-13
- MUI framework basic video tutorial 2022-04-13
- Online training class trial class 2019-01-10