全球信息:AJAX使用记录

2023-01-15 22:54:19 来源：博客园

【资料图】

什么是AJAX
AJAX的工作流程
省市二级联动案例
AJAX的使用总结

什么是AJAX

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

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

AJAX的工作流程

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

省市二级联动案例

页面效果:

html code:

        Title    <script src="../js/jquery.min.js"></script>        <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[index].cityName+">")                      }                   },                   "json"            )        })    });    function loadProvince() {        $.post("/selectCity/selectProvince",            {id:0},            function (data) {                for (var index=0;index"+data[index].cityName+"")                }            },            "json"        )    }</script>

AJAX的使用总结

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

关键词：传输数据发送请求使用记录