web开发之Ajax

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

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

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

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

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

同步和异步的概念

简单来说可以这样理解（也可以自己去了解）：

• 同步：洗脸后 再去烧水
• 异步：洗脸的同时 喊一个人帮我去烧水

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

无刷新的好处 只更新部分页面，有效利用带宽，提高用户体验

后端代码：

@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");
        }
    }
}

前端jsp代码： 

<%@ page contentType="text/html;charset=UTF-8" language="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);
	}
}

前端jsp代码：

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


    
    




感 谢 阅 读 ^_^