第15章:AJAX(异步请求)

    科技2022-08-03  113

    文章目录

    简介蓝奏云链接(里面是需要用的包,记得改名字)适用场景 工作原理传统AJAX使用(不推荐,不兼容且麻烦)jQueryAJAX参数: 代码简单实现


    简介

    AJAX = Asynchronous JavaScript and XML(异步的JavaScript 和XML)。 一种创建交互式网页应用的网页开发技术 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术

    蓝奏云链接(里面是需要用的包,记得改名字)

    https://yxmiaoyu.lanzous.com/b01brjiob 密码:g9fh

    适用场景

    表单驱动的交互 文本输入场景(需要保证数据的唯一性) 深层次的树的导航 用户间的交流响应(最新的热点新闻,天气预报以及聊天室内容等) 类似投票等场景 过滤场景(按照时间和名称排序等等)

    工作原理

    传统AJAX使用(不推荐,不兼容且麻烦)

    创建XMLHttpRequest 对象发送请求到服务器监听响应处理响应

    jQueryAJAX

    jQuery 库拥有完整的AJAX 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

    load() 方法从服务器加载数据,并把返回的数据放入被选元素中。语法: $(selector).load(URL,data,callback);

    jQuery get() 和post() 方法用于通过HTTP GET 或POST 请求从服务器请求数据。 $.get(URL,callback); $.post(URL,data,callback);

    success表示成功后自动执行的函数。

    参数:

    url:请求地址 async:是否异步,默认为true type:请求方式,默认为"GET"。 data:发送到服务器的数据 dataType:预期服务器返回的数据类型。 username/password:用于响应HTTP 访问认证请求的用户名 beforeSend:在发送请求之前调用。 error:在请求出错时调用 success:当请求成功之后调用 complete:当请求完成之后调用这个函数,无论成功或失败。

    代码简单实现

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- 必须有下面这个包 --> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#username").blur(function() {//失去焦点时候触发 $.get("checkname", {name : $("#username").val()}, function(data) { //向名字为“checkname”的servlet传递括号里的参数,返回值是括号里的data if(data=="exist"){ $("#nameinfo").html("该名字已被使用,请换一个"); }else{ $("#nameinfo").html("该名字可用"); } }); }); }) </script> </head> <body> <form action="regist:乱写的,根本指向不到目标" method="post"> 账号:<input id="username" type="text" name="username" /><span id="nameinfo"></span> <br> 密码:<input type="password" name="pwd" /><br> <input type="submit" value="regist" /> </form> </body> </html> package jstlprj; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/checkname") public class CheckNameServlet extends HttpServlet { private static final long serialVersionUID = 1L; public CheckNameServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String name = request.getParameter("name"); //name的参数是从大括号里拿的,不是表单填写的元素 PrintWriter out = response.getWriter(); if("zs".equals(name)) { out.print("exist"); }else { out.print("notexist"); } out.flush(); out.close(); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
    Processed: 0.015, SQL: 8