Application and practice in front-end development: using Ajax functions

The application and practice of Ajax functions in front-end development

With the rapid development of Web applications, front-end development is becoming more and more important. As a front-end development technology, Ajax can realize data interaction without refreshing the page, and has become an indispensable tool in front-end development. This article will introduce the basic principles of Ajax functions, as well as their application and practice in front-end development, and provide specific code examples.

1. Basic principles of Ajax function
   Ajax stands for Asynchronous JavaScript and XML. It uses JavaScript to asynchronously send HTTP requests, thereby realizing data interaction with the server in the background without refreshing the entire page. Ajax uses the XMLHttpRequest object to communicate with the server and handles the server's response through callback functions.
2. Application of Ajax function
   2.1 Data loading
   Ajax function is commonly used to load dynamic data. For example, in an e-commerce website, when the user clicks on a certain category label, the page will not be refreshed. Instead, a request will be sent to the server through the Ajax function to obtain the product list of the corresponding category, and then the data will be dynamically inserted into the page through DOM operations.

2.2 Form submission
In a traditional web page, when the user fills out the form and clicks the submit button, the entire page will be refreshed and the data will be sent to the server. Using the Ajax function, the form can be submitted asynchronously without refreshing the page. By listening to the form's submission event and preventing the default submission behavior, the form data can be sent to the server asynchronously through the Ajax function, and the server's response results can be processed in the callback function.

2.3 Real-time search
When the user enters keywords in the search box, the real-time search function can be implemented through the Ajax function. By listening to the keyup event of the input box and getting the value of the input box, use the Ajax function to send a request to the server to obtain qualified search results, and dynamically display them on the page through DOM operations. This allows search results to be updated in real time and improves user experience.

3. Practice of Ajax functions
   In order to better understand and apply Ajax functions, two specific code examples are provided below.

3.1 Data loading example
The following is a code example to implement data loading based on the Ajax function:

// HTML
<button id="loadDataBtn">加载数据</button>
<ul id="dataList"></ul>

// JavaScript
const loadDataBtn = document.getElementById('loadDataBtn');
const dataList = document.getElementById('dataList');

loadDataBtn.addEventListener('click', () => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.json', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      data.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item.name;
        dataList.appendChild(li);
      });
    }
  };
  xhr.send();
});

In the above code, when the user clicks the button, the Ajax function will be used Send a GET request to the server's data.json file and process the returned data in the callback function. Create each data item as a li element and insert it into the ul element.

3.2 Form Submission Example
The following is a code example that implements asynchronous form submission based on the Ajax function:

<form id="myForm">
  <input type="text" name="username" placeholder="用户名" />
  <input type="password" name="password" placeholder="密码" />
  <button type="submit">提交</button>
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', event => {
    event.preventDefault();

    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'submit.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        const response = JSON.parse(xhr.responseText);
        console.log(response);
      }
    };
    const formData = new FormData(form);
    const encodedData = new URLSearchParams(formData).toString();
    xhr.send(encodedData);
  });
</script>

In the above code, when the user clicks the submit button, it will be sent through the Ajax function POST requests to the server's submit.php file, and processes the server's response results in the callback function. Obtain the form data through the FormData object, encode it into a string in URL format, and send it to the server.

Summary
As a front-end development technology, Ajax function can realize data interaction without refreshing the page, and is widely used in front-end development. Through the introduction and code examples of this article, I believe readers can better understand and apply Ajax functions and improve the efficiency and user experience of front-end development.

The above is the detailed content of Application and practice in front-end development: using Ajax functions. For more information, please follow other related articles on the PHP Chinese website!