Home > Web Front-end > JS Tutorial > body text

How to make asynchronous requests via AJAX

清浅
Release: 2018-11-21 14:14:14
Original
14431 people have browsed it


#What I will share today is how to make asynchronous requests through AJAX. It has certain reference value and I hope it will be helpful to everyone.

AJAX definition

AJAX is the abbreviation of Asynchronous JavaScript XML, which allows us to directly obtain the latest content on the server through JavaScript without having to reload

page. Make the Web more user-friendly. In fact, AJAX is a set of APIs provided by browsers, which can be called through JavaScript to control requests and responses through code.

HTTP is a request-response protocol, which means that the browser makes a request to the web server, the web server then creates a response that it sends back to the browser, and the browser visually renders that text to user. However, if you only need to update a small portion of the page, you'll need to use AJAX and then use the browser's DOM model to dynamically insert the response into the page.

Four steps of AJAX asynchronous requests

(1) Create an XMLHttpRequest object for the browser

var xhr = new XMLHttpRequest();
Copy after login

(2) Create and send the request to Server functions:

xhr.open('GET', './demo.php');
Copy after login

(3) A request occurs through the connection

xhr.send(string);
Copy after login

(4) Specify the four xhr state change event processing functions

xhr.onreadystatechange = function () {
  // 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
  if (this.readyState === 4) {
    // 通过 xhr 的 responseText 获取到响应的响应体
    console.log(this)
Copy after login

readyState Status

0: Indicates that xhr has been created but the open method has not been called.

1: The open() method has been called to establish the connection.

2: The send() method is called, and the status line and response header can be obtained.

3: While the response body is being loaded, the responseText attribute may already contain some data.

4: The response body is loaded and responseText can be used directly.

Example:

var xhr = new XMLHttpRequest()//0状态
xhr.open('GET', 'time.php')//1状态,open方法已经调用了,建立一个与服务端特定端口的连接
xhr.send()
xhr.addEventListener('readystatechange', function () {
})//里面包含了2,3,4三种状态,2分别为接受到了响应头但还没有接受到响应体;
正在下载响应报文;
报文下载下来处理响应体
xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
  }//处理函数
Copy after login

Summary: The above is the entire content of this article. I hope it will be helpful to everyone learning ajax.


The above is the detailed content of How to make asynchronous requests via AJAX. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template