Ajax Explained: Examples & Best Practices

1 year ago
Olivia Parker
2 minutes

Ajax is a technology used for asynchronous communication on web pages. It allows for dynamic updating of page content by interacting with the server without needing to refresh the entire page.

The advantages of Ajax include:

  1. Enhance user experience: By using asynchronous communication, it is possible to request data from the server and update the page in the background, eliminating the need for users to wait for the entire page to load.
  2. Reduce bandwidth usage: only transmit necessary data to decrease network bandwidth utilization.
  3. Improve page performance by refreshing only the necessary parts, reducing unnecessary data transfer and page rendering.
  4. Not related to backend technology: Ajax can communicate with any backend technology, such as PHP, Java, Python, etc.

Here is a simple example using Ajax.

HTML section:

<!DOCTYPE html>
<html>
<head>
    <title>Ajax Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                $.ajax({
                    url: "example.php", // 后端处理数据的接口
                    type: "POST", // 请求方式
                    data: {name: $("#name").val()}, // 发送给后端的数据
                    success: function(result){ // 请求成功后的回调函数
                        $("#result").html(result); // 将返回的数据显示在页面上
                    }
                });
            });
        });
    </script>
</head>
<body>
    <label for="name">Name:</label>
    <input type="text" id="name">
    <button id="btn">Submit</button>
    <div id="result"></div>
</body>
</html>

PHP section (example.php):

<?php
$name = $_POST["name"];
echo "Hello, " . $name . "!"; // 返回数据给前端页面
?>

In the above example, when the user clicks the Submit button, an asynchronous request is sent to the backend through Ajax, with the data being the value of the name in the input box. Upon receiving the request, the backend processes the received name value and returns the result “Hello, ” + name + “!”. Once the frontend page receives the returned result, it displays the result on the page.

In summary, Ajax is a technology used for asynchronous communication on web pages, allowing dynamic content updates by exchanging data with the server. It can reduce page refreshes and network bandwidth usage, improving user experience and page performance.

bannerAds