Revealing the power of Ajax

The function of Ajax is revealed, specific code examples are needed

Ajax (Asynchronous JavaScript and XML) is a technology used for asynchronous data interaction on web pages. It allows you to interact with the server, get data and update certain parts of the web page without refreshing the entire page. The emergence of Ajax plays a crucial role in improving user experience, increasing the dynamics and response speed of web pages. This article will reveal the functions of Ajax and provide specific code examples to help readers better understand and use it.

First, let us look at the basic use of Ajax. In HTML pages, asynchronous requests can be sent through JavaScript's XMLHttpRequest object. The following is a simple code example:

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

The above code first creates an XMLHttpRequest object, and then sets a callback function onreadystatechange, which will be called when the server returns a response. When readyState is 4 (indicating that the server response has been completed) and status is 200 (indicating success), the code will display the data returned by the server in the id demo element.

Next, we will see an important feature of Ajax - dynamic loading of content. Through Ajax, we can load the content of other pages from the server without refreshing the entire page. The following is an example of using Ajax to dynamically load content:

function loadContent() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("content").innerHTML = this.responseText;
    }
  };
  var pageUrl = "news.html";
  xhttp.open("GET", pageUrl, true);
  xhttp.send();
}

In the above code, a GET request is sent through the XMLHttpRequest object, in which the pageUrl variable is to be loaded The URL of the page. The page content returned by the server will be displayed in the element with the id content.

In addition, Ajax can also interact with the server for data, allowing the web page to update data in real time without refreshing. The following is an example of obtaining server data in real time through Ajax:

function updateData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var data = JSON.parse(this.responseText);
      document.getElementById("data").innerHTML = data.value;
    }
  };
  var url = "data.json";
  xhttp.open("GET", url, true);
  xhttp.send();
}

// 每隔一段时间调用updateData函数
setInterval(updateData, 5000); // 每5秒更新一次

Through the above code, the page will obtain data from the server every 5 seconds, and then display the data in the id data element. This achieves the effect of updating data in real time.

In addition to GET requests, Ajax also supports POST requests. POST requests are often used to submit form data to the server. The following is an example of using Ajax to send a POST request:

function postData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = this.responseText;
      document.getElementById("result").innerHTML = response;
    }
  };
  var data = new FormData();
  data.append('username', 'john');
  data.append('password', '123456');
  xhttp.open("POST", "login.php", true);
  xhttp.send(data);
}

In the above code, the FormData object is used to store the data that needs to be sent. When the third parameter in the open function is set to true, the request will become asynchronous, that is, an Ajax request.

Through the above code examples, I believe readers will have a deeper understanding of the functions of Ajax. It is worth mentioning that in order to ensure browser compatibility, JavaScript libraries such as jQuery can be used to simplify Ajax operations.

To summarize, Ajax is powerful and can help us dynamically load content, obtain server data in real time, and submit forms. By using Ajax, we can improve the interactivity and response speed of web pages and provide users with a better experience. I hope the specific code examples in this article can help readers better understand and use Ajax technology.

The above is the detailed content of Revealing the power of Ajax. For more information, please follow other related articles on the PHP Chinese website!