JavaWeb.24.Ajax

啥是Ajax？

---

目录：

        什么是Ajax？

        拓展？

        Ajax的案例？

---

什么是Ajax？

Ajax ：全称是 Asynchronouns JavaScript and XML（异步的 JavaScript 和 XML）

Ajax 不是新的编程语言，而是一种使用现有标准的新方法

Ajax 是一种在无需重新加载整个网页的情况下，能够以服务器交换数据并更新部分网页的技术

Ajax 最大的优点就是页面无刷新，用户的体验会更好。并且使用异步方式与服务器通信，具有更加迅速的响应能力

Ajax ：只刷新局部页面的技术

拓展：

JavaScript：更新局部的网页

XML：一般用于请求数据和响应数据的封装

XMLHttpRequest对象：发送请求到服务器并获得返回结果

CSS：美化页面样式

异步：发送请求后不等返回结果，由回调函数处理结果

这里me要强调一下异步相比同步的这个概念：

简单来说就是：

        * 同步：干饭干完后，再去烧水

        * 异步：干饭的时候，叫一个人帮忙去烧水

Ajax的案例？ 案例1.使用Ajax实现无刷新登录

无刷新：表示不刷新整个页面，只刷新局部

该方法的优势：只更新部分页面。有效利用带宽，提高用户体验

  后端代码（LoginServlet.java）

/**
 *    处理登录功能
 **/
@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 {
        //获取表单数据
        String account = req.getParameter("account");
        String password = req.getParameter("password");
        //调用biz去数据库做验证
        PrintWriter out = resp.getWriter();
        if("root".equals(account)&&"root123".equals(password)){
            out.println("yes");
        }else{
            out.println("no");
        }
    }
}

  前端代码（login.jsp）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    



    

    

    登录


    



去注册

  案例3：使用Ajax实现搜索自动提示

   后端代码（SearchServlet.java）

@WebServlet("/search.do")
public class SearchServlet extends HttpServlet {
 
	// 数据库中存在的商品名字
	List list = new ArrayList();
 
	{
		list.add("嘿嘿");
		list.add("嘿哈");
		list.add("苹果");
		list.add("平安");
		list.add("安乐");
		list.add("呵呵");
		list.add("哈哈");
	}
 
	@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 {
		// 去数据库查询 select * from goods where name like '%key%'
		String keyWord = req.getParameter("keyWord");
		// 新建一个集合
		List ns = new ArrayList<>();
		for (String n : list) {
			if (n.contains(keyWord)) {
				ns.add(n);
			}
		}
		// 设置响应的编码
		resp.setCharacterEncoding("utf-8");
		// 需要把结果告诉前台
		PrintWriter out = resp.getWriter();
		// 需要将集合变成json
		// 1.需要获取转换对象
		ObjectMapper mapper = new ObjectMapper();
		// 2.调用方法
		String str = mapper.writeValueAsString(ns);
		out.println(str);
	}
}

  前端代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    


🔍

 

  感谢收看~

  一键三连喔~