ajax语法结构

特点：

ajax(******)
   异步提交
       同步异步：描述的任务的提交方式
           同步:提交任务之后 原地等待任务的返回结果 期间不干任何事儿
           异步:提交任务之后 不愿地等待 直接执行下一行代码 任务的返回通过回调机制
                
            阻塞非阻塞：程序的运行状态
                程序运行的三状态图
                
                
   局部刷新
       一个页面 不是整体刷新 而是页面的某个地方局部刷新

Ajax是一门js的技术基于原生js开发的，但是用原生的js写代码过于繁琐
我们在学的时候只学如何用jQuery实现ajax

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

直接用一个栗子来讲明ajax的语法结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

</head>
<body>
<input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
<p>
    <button id="b1">计算</button>
</p>
<script>
    $('#b1').on('click',function () {
        $.ajax({
             // 1.到底朝后端哪个地址发数据
            url:'', // 专门用来控制朝后端提交数据的地址  不写默认就是朝当前地址提交
            // 2.到底发送什么请求
            type:'post', // 专门制定ajax发送的请求方式
            
            // 3.发送的数据到底是什么
            data:{'t1':$('#t1').val(),'t2':$('#t2').val()},
            
            // 4.异步提交的任务 需要通过回调函数来处理
            success:function (data) {// data形参指代的就是异步提交的返回结果
                    // 通过DOM操作将内容 渲染到标签内容上
                $('#t3').val(data)
                {#alert(data)#}
            }
        })
    })
</script>
</body>
</html>

ajax语法结构

ajax语法结构

猜你喜欢