jQuary中ajax的简单应用

ajax

简介：

Ajax = Asynchronous Javascript And XML （异步 JavaScript 和 XML）

Ajax 是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

工作原理：

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

和传统的jsp页面直接连接servlet进行整个页面的跳转和刷新相对比，ajax能够在不刷新整个页面的前提下直接连接后台的servlet。

使用ajax方式与servlet进行交互，可以减少jsp页面中小脚本的使用，减少前后端的耦合度。

传统方式：（浏览器的普通交互，即普通情况下jsp/html和servlet的交互）
在这里插入图片描述

Ajax方式：（浏览器的ajax交互，即jsp/html中使用ajax与servlet进行异步交互，实现页面的局部更新）

在这里插入图片描述

从上图可直观见到，采用ajax方式进行交互，多个请求异步进行，互不干扰。

ajax( )方法的实现方式：

$.ajax({ 
	url:请求地址,
	type:"get | post | put | delete " 默认是get, 
	data:请求参数 {"id":"123","pwd":"123456"}, 
	dataType:请求数据类型"html | text | json | xml | script | jsonp ",
    success:function(data,dataTextStatus,jqxhr){ },//请求成功时
    error:function(jqxhr,textStatus,error)//请求失败时 
})

//编写上述代码时，注意ajax中每一项参数需要采用逗号隔开
//url:请求的路径  
//type：发送请求的方式
//data:发送的数据  
//datatype 返回的数据类型
//success:成功时执行的方法  error：失败时执行的方法（要么成功，要么失败，两者必须执行其一）

请求方式type中，我们较为常用的是get和post，两者的区别：

与传统方式下 jsp页面中表单提交中的get和post方式相似，ajax方式采用get方式发送数据时，在控制台中可以看到我们传输给后台的数据，而使用post方式则看不到传输的数据
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）；

向服务器发送大量数据（POST 没有数据量限制）；

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

什么时候会进入error方法，主要有以下几种情况：

url出错：url路径不能出现中文，以及必须要是可以跳转到的地址
dataType错误：后台返回的数据类型和前台需要接收的不一致，或者后台返回的数据不符合规范都会跳入error，例如json格式返回时写的是{id:1,name:“张三”}（错），正确的格式应该为{“id”:1,“name”:“张三”}
data错误：前台向后台发出请求的数据不能不写，就算不发送数据也要传{}，不然就会返回xml格式，并提示parsererror.data:"{}"；前台和后台之间传递的参数必须遵循ajax支持的编码格式，参数中不能含有特殊字符
async请求同步异步错误：async默认为true，即支持异步请求，若想同步请求（一个ajax执行后再进行写一个ajax的执行），则要将async设置为false

get()或post() 方法通过远程 HTTP 请求载入信息(可简化书写方式):

//get()方法
$.get(url,data,function(result) { //省略将服务器返回的数据显示到页面的代码 });

//post()方法
$.post(url,data,function(result) { //省略将服务器返回的数据显示到页面的代码 });

//url:请求的路径  
//data:发送的数据  
//function(result){}: success时执行的方法

//上面两种方法默认接受的返回数据类型为text类型
//当我们要接受其他形式的数据时，可直接在function方法后加上要接受的数据类型，例：
$.post(url,data,function(result) { //省略将服务器返回的数据显示到页面的代码 }，datatype);

如果后台返回的数据为json格式，则在后台需要对象转换成json，否则会报错。在项目中大多的方法接收的还是String类型的数据，此时就涉及到使用GSON将对象转换成String类型的json对象，此处不详细展开。

最后，引进一个简单事例（jsp页面），实现的是模仿微博的点赞的后台功能：

</head>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function (){
            $("#zan").click(function (){
                const uid = ${requestScope.uid};
                const zan = $("#zan").val();
                $.ajax({
                    url:"/GreatAjax",
                    type:"post",
                    data:{"uid":uid,"zan":zan},
                    dataType:"JSON",
                    success:function (result){
                        $("#zan").val(result.zan);
                        $("#ag").html(result.allGreat);
                    },
                    error:function (result){
                    	console.log("出错了出错了");
                    }
                })
            })
        })
    </script>
</head>
<body>
    <form>
        用户编号：<span>${requestScope.uid}</span><br><br>
        用户姓名：<span>${requestScope.uname}</span><br><br>
        <input type="button" value="${requestScope.zan}" id="zan"><br><br>
        总点赞数：<span id="ag">${requestScope.allGreat}</span>
    </form>
</body>
${requestScope.zan}" id="zan"><br><br>
        总点赞数：<span id="ag">${requestScope.allGreat}</span>
    </form>
</body>