Mysticbinary

AJAX使用记录

什么是AJAX

AJAX = Asynchronous JavaScript And XML.
我感觉 AJAX 是一个有点误导性的名称。让人觉得 AJAX 应用程序只能使用 XML 来传输数据，但以纯文本或 JSON 文本形式传输数据也很常见。

AJAX是一种网页前端技术，它允许通过在后台与 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分内容，而无需重新加载整个页面。
正常的前端和后端的交互流程是，前端请求一次后端，后端返回数据，前端刷新整个页面，展示数据。
而使用AJAX的效果，前端请求一次后端，后端返回数据，前端只局部刷新，展示数据。

AJAX的工作流程

  1. 网页中发生事件（页面加载，按钮点击）
  2. XMLHttpRequest对象由JavaScript创建
  3. XMLHttpRequest 对象向 Web 服务器发送请求
  4. 服务器处理请求
  5. 服务器向网页发回响应
  6. 响应由JavaScript读取
  7. 适当的动作（如页面更新）由 JavaScript 执行

省市二级联动案例

页面效果:

html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery.min.js"></script>
</head>
<body>
    <select id="selectProvince" >
        <option selected = selected>--请选择--</option>
    </select>
    <select id="selectCity">
        <option selected = selected>--请选择--</option>
    </select>
</body>

<script type="text/javascript">
    $(function () {
        loadProvince();
        // 加载省份 省_下拉框 绑定 改变事件；
        $("#selectProvince").change(function () {
           var ciryId =  $("#selectProvince").val();
            $.post("/selectCity/selectProvince",
                   {id:ciryId},
                   function (data) {
                      // 需要将第一行(默认数据)option清空
                      $("#selectCity :gt(0)").remove();
                      for (var index=0;index<data.length;index++){
                          // add select option
                          $("#selectCity").append("<option>"+data[index].cityName+"</option>>")
                      }
                   },
                   "json"
            )
        })
    });

    function loadProvince() {
        $.post("/selectCity/selectProvince",
            {id:0},
            function (data) {
                for (var index=0;index<data.length;index++){
                    $("#selectProvince").append('<option value="'+data[index].cityId+'">'+data[index].cityName+'</option>')
                }
            },
            "json"
        )
    }
</script>
</html>

AJAX的使用总结

  • AJAX的作用和运行流程很易理解，操作的时候只需要想清楚在哪里触发请求，拿到数据之后在哪里展示；
  • 原生JS、Jquery、...的代码语法稍微有点不同，但是工作流程始终都是一样的，无非框架帮忙把一些细节封装了。

posted on 2023-01-15 23:02  Mysticbinary  阅读(22)  评论(0)  编辑  收藏  举报

导航