博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AJAX
阅读量:5221 次
发布时间:2019-06-14

本文共 2247 字,大约阅读时间需要 7 分钟。

1.什么是AJAX?

  Ajax 即“A
synchronous J
avascript And X
ML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
  Ajax = 异步 JavaScript和 XML 或者是 HTML(标准通用标记语言的子集)。
  Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
  通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。(页面无刷新,异步请求)
2.为什么要使用AJAX?
  传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。这样难免浪费资源,可能多次请求同一个页面资源。
  然而AJAX只需要最开始请求下页面,之后所有的数据交互都无需重新加载当前页面。
3.AJAX的应用场景?

  注册---》用户名的唯一性校验

  注册---》 注册提交
  注册---》注册验证码
  登陆---》 登录提交等等

  注意:什么场景中适合使用ajax模式?什么场景中适用传统模式?

  发送请求需要绝对跳转的时候使用传统模式!!!

4.AJAX的使用?

例:注册用户名的唯一性校验

用户:输入用户名 然后输入完毕 立刻提交用户名是否可用

  1 给 id为username的输入框添加失去焦点的事件
    username.onblur = function () {
      alert(111);
    }
  2 获取用户输入的数据value
    this.value
  3 通过ajax将用户输入的用户名发送给服务器(servlet)
    3.1 将 jQuery文件导入到 views/js
    3.2 在当前文件中通过script标签引入jq文件
    3.3 发送ajax请求
      $.get();
      $.post();
      $.post("url",参数,function(){});
  4 接收服务器返回的响应(该用户名是否可用)
  5 将回传的响应展示到页面中
    后台(servlet):1 接收请求参数
            2 通过dao 校验用户名是否可用
            3 将校验结果 响应给浏览器

register.jsp:

  AJAX发送json格式的数据:

CheckusernameServlet.java

  后台响应json格式的数据

/*校验用户名唯一性*/@WebServlet("/checkUsername")public class CheckusernameServlet extends HttpServlet {    @Override    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        /*获取请求参数*/        String username = req.getParameter("username");        //System.out.println(username);        /*调用dao,校验用户唯一性*/        ILoginDAO dao =new LoginDAOImpl();        boolean exist = dao.isExist(username);        /*校验结果返回浏览器 ,响应ajax请求*/        // json格式 在 类似于java 中的 map相似  所以 先创建一个hashmap 将数据放到map中 然后 再通过 fastjson 将map转成 json        resp.setContentType("text/json;charset=UTF-8");        PrintWriter out = resp.getWriter();        Map
map = new HashMap<>(); if (exist){ map.put("code","100404"); map.put("message","用户名已被占用"); }else { map.put("code","100200"); map.put("message","用户名可用"); } String s = JSON.toJSONString(map); out.write(s); out.close(); }}

注:AJAX发送请求到后台是json格式的数据,后台响应AJAX的也是json格式的数据。

  响应AJAX需要导入阿里巴巴的fastjson..jar包,到工程WEN-INF/lib目录下。

转载于:https://www.cnblogs.com/duguangming/p/10763224.html

你可能感兴趣的文章