文章介绍了AJAX的核心概念，解释了为何需要使用AJAX来提升网页应用性能和用户体验。详细阐述了同步与异步的区别，并提供了基于jQuery的AJAX语法示例，包括登录、修改数量和加入购物车的案例，展示了如何利用AJAX实现页面局部刷新和无刷新操作。
目录
4.1 语法1-$.ajax(url,[settings]).
4.1 语法2-$.get/post(url, [data], [callback], [type]).
一. 什么是ajax
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)，使用Ajax技术网页应用能够快速地将更新呈现在用户界面上，而不需要重载（刷新）整个页面【只刷新局部】，这使得程序能够更快地回应用户的操作。
二.为什么需要AJAX?
-
在我们之前的开发，每当用户向服务器发送请求，哪怕只是需要更新一点点的局部内容，服务器都会将整个页面进行刷新，这么做的问题有两点：
-
性能会有所降低(一点内容就需要刷新整个庞大的页面)；
-
用户的操作页面会中断(整个页面被刷新了)。
-
-
而基于ajax可以使用Javascript技术向服务器发送异步请求，因为异步请求，这可以使我们在不刷新页面的前提下拿到后端数据，完成页面的局部刷新，给用户的感受是在不知不觉中完成请求和响应过程。
三. 同步和异步的区别.
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
四.基于jQuery实现AJAX语法
4.1 语法1-$.ajax(url,[settings]).
url：一个用来包含发送请求的URL字符串;
type：请求方式 (“POST” 或 “GET“[默认])
data：发送到服务器的数据,例如：key1=value1key2=value2 或 {key1: 'value1', key2: 'value2'} ；
dataType：期望服务器返回的数据类型(json、text、xml、html、script......)；
success(data)：请求成功的回调函数 data：服务器返回的数据（响应）；
error：请求失败的回调函数。
4.1 语法2-$.get/post(url, [data], [callback], [type]).
url：发送请求地址。
data：待发送 Key/value 参数。例如： {key1: 'value1', key2: 'value2'}
type：预期服务器返回的数据类型，xml, html, script, json, text......
callback：发送成功时回调函数。
五 .案例
5.1 ajax实现登录
①html代码
<div>
<h2>用户登录</h2>
<p>用户名：<input type="text" id="sname"></p>
<p>密码 ：<input id="spwd" type="text"></p>
<p>
<input type="button" value="登录" id="btn">
</p>
</div>
②ajax请求
<script type="text/javascript">
$(function() {
//拿到按钮给其加点击事件
$("#btn").click(function() {
//拿文本框和密码框的值
var name=$("#sname").val();
var pwd=$("#spwd").val();
//发起ajax请求
/*//一.$.ajax()
$.ajax({
url:"login.do",//请求路径
type:"post",//请求方式 get默认
data:{uname:name,upwd:pwd},//"uname="+name+"&upwd="+pwd, 提交到服务器的数据
dataType:"text",//预期服务器可能返回的数据类型
success:function(data){//成功的回调函数
//data:后台的响应 yes/no
if(data=="yes"){//登录成功
alert("恭喜你，登录成功");
location.href="index.jsp";
}
else{
alert("用户名或者密码有误");
$("#sname").val("");
$("#spwd").val("");
}
},
error:function(){//失败的回调函数
alert("有误");
}
}); */
//二.$.get/post()
$.post("login.do",{uname:name,upwd:pwd},function(data){
if(data=="yes"){//登录成功
alert("恭喜你，登录成功");
location.href="index.jsp";
}
else{
alert("用户名或者密码有误");
$("#sname").val("");
$("#spwd").val("");
}
},"text");
});
});
</script>
③底层代码
@WebServlet("/login.do")
public class LoginServlet extends HttpServlet{@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置编码
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html; charset=UTF-8");
//拿session和out
HttpSession session = req.getSession();
PrintWriter out = resp.getWriter();
//获取用户名和密码
String uname = req.getParameter("uname");
String upwd = req.getParameter("upwd");
//servlet调biz层
IUserBiz iub = new UserBiz();
//调用登录方法
User u = iub.login(uname, upwd);
//判断是否成功
if(u!=null) {
//存session
session.setAttribute("user", u);
//把响应输送到前端 如果要跳转页面交给前端
out.print("yes");
}
else {
out.print("no");
}
}
}
5.2 使用ajax优化"修改数量"操作
①html代码
②ajax请求
③底层代码
5.3使用ajax优化"加入购物车"操作
小Tips：
①ajax请求
<script type="text/javascript">
function myf(gid,user) {
if(user){//有值 登录了
//alert("亲，已成功加入购物车");
//location.href="addCart.do?gid="+gid;
//发起ajax请求
$.post("addCart.do",{gid:gid},function(data){
alert(data);
});
}
else{//没有值 没有登录
alert("亲，你还没有登录，请先登录");
//location.href="login.jsp";
}
}
</script>
②底层代码
//把这个集合存到session
session.setAttribute("mycart", ls);//键 值
//跳转到购物车界面绑值
resp.sendRedirect("cart.jsp?index=5");
//把响应返回前端
out.write("【"+goods.getGname()+"】已成功加入购物车");
2794
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
