前端 javascript 后端 web开发之Ajax

今天结合几个案例给大家分享一下Ajax技术的用处

先了解一下什么是Ajax

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

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

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

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

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

同步和异步的概念

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

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

案例1：使用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" %>

去注册

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

后端代码：

@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" %>



感 谢 阅 读 ^_^

相关文章

 您阅读本篇文章共花了：