AJAX（看这一篇就够了，详细）

AJAX通过在后台服务器进行少量的数据交换，可以实现网页的异步更新。也就是说，AJAX可以在不重新加载整个网页的情况下，对网页的某部分内容进行更新。而对于传统的网页(在不使用AJAX的情况下)来说，如果需要更新内容，则即使只是要更新网页中的某一部分内容，也必须重新加载整个网页。

IT萌萌熊

1865人浏览 · 2022-11-19 18:31:41

IT萌萌熊 · 2022-11-19 18:31:41 发布

看这一篇就够了！-Ajax概念详解

AJAX简介：

AJAX即Asynchronous JavaScript and XML(异步JavaScript和XML技术)，是一种在无须重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX异步通信

AJAX可以实现异步通信，其最大的特点是可以实现网页的局部刷新，即它能在不更新整个页面的条件下维护部分数据。这使得Web 应用层能够更为迅速地回应用户动作，并避免了在网络上发送一些没有改变过的信息。

在此，我们不需要理解什么是异步通信，只需要记住JAX其实就是JavaScript中封装的一个方法，这个方法能够发送HTTP请求。

AJAX的工作原理：

既然AJAX 能够发送HTTP 请求，整个请求的过程就必须符合HTTP。AJAX在发送 HTTP请求时需要指定以下参数。

要请求的资源，即 URL 地址。
请求的方式，常用的有 GET 和POST。head
需要发送给服务器的数据，以“名=值&名=值”的方式书写。
可以接收的数据类型，即告诉服务器可以回传的内容类型是什么，包括HTML JavaScript 脚本、JSON、XML 等，常用的是文本 txt 和JSON。

以上参数包含了AJAX在发送HTTP请求时的请求头部中的信息，但在服务器响应后会回传结果，因此 AJAX 还必须有能够接收服务器回传结果的参数。
匿名函数success:function(re)目中的re变量可以用于接收服务器回传的结果。

根据上述规则，我们可以得出，AJAX的基本格式如下:

$.ajax({
url:'请求的资源'，
type:'请求方式getlpost', 
data:'发送数据名=值&名=值'，
dataType:'回传值的类型',
success:function(re){ re接收返回值
    
    }
})

需要注意的是，AJAX 不是一种新的编程语言，而是一种方法，这种方法优化了浏览名

和服务器之间的传输，减少了不必要的数据往返和带宽占用.

让我们用一个案例来看看：

首先编写一个HTML文档，击“发送请求”按钮时，获取若干条“typeid=1”的数据，并且以一定的格式刷新到页面中。代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
       <!--引入jquery-->
    <script type-"text/javascript" src-"https://code.iquery.com/jquery3.4.0.min.js"></script>
    <script type="text/javascript">
        function funl() {
        //使用AJAX技术
        $.ajax({
        url: 'getNews.php',
        //单击“发送请求”按钮后调用getNews.php文件
        type: 'get',
        data: 'typeid-1',
        datatype: 'json',
        success: function(re) {
        //将getNews.php生成的数据解析成列表项 
                for (var i in re){
                    $("#showContent ul").append("<li>" + re[i].title+"</1i>");
                }
        }
    })
}
    </script>
</head>
<body>
        <div style="border:5px solid red;min-height: 200px;" id="showContent">
            <ul></ul>
        </div>
        <input type="button" value="发送请求" onclick="funl();">
</body>
</html>

然后编写获取新闻的 PHP 文件，代码如下:

 <?php
$pdo = new PDO('mysql:host=localhost;dbnamephp','root','123456');
$typeid = $GET['typeid'];
//查询的时候增加limit限制，避免资源浪费
$sq1 = "select * from news where typeid {$typeid} limit 8";
$pdoS = $pdo->query($sql);
$arr = $pdoS->fetchall(PDO::FETCH ASSOC);
//使用json encode()方法，生成JSON字符串 
echo json encode($arr);
?>

综上所述，通过单击客户端“发送请求”按钮，利用 AJAX向服务器发出请求，并向服务器发送数据(typeid=1)、指定回传的数据类型等,最后对服务器的回传结果进行处理，这个过程符合HTTP，因此AJAX是一个可以发送HTTP请求的方法，或者说组件。