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

AJAX简介:

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

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

AJAX异步通信

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

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

AJAX的工作原理:

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

  1. 要请求的资源,即 URL 地址。
  2. 请求的方式,常用的有 GET 和POST。head
  3. 需要发送给服务器的数据,以“名=值&名=值”的方式书写。
  4. 可以接收的数据类型,即告诉服务器可以回传的内容类型是什么,包括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请求的方法,或者说组件。

更多推荐