ajax

ajax的一些使用方法（异步请求）

一：简单的介绍

1.作用：在不提交表单的前提下，与服务器进行数据交互。

2.特点：使用ajax，在servlet中，不需要转发或重定向技术，会自动返回到原页面，且返回值自动进入回调函数。

二：用法

（案例：注册账号，判断账号是否存在数据库里面 。若存在，则提示，账号已存在；若不存在，则OK）

2.1 js版本的get的异步请求

创建a.jsp页面 在body中 <form> 账号：<input type="text" name="name"><span></span> <br> 密码：<input type="password"><br> <input type="submit" value="注册"><br> </form> 在js中 $(":text").blur(function () { //当失去焦点的时候，运行该函数 var name = $(this).val() //得到用户名 var re = new XMLHttpRequest(); //1.创建异步请求的对象 re.open("get","/FileUpload/login?name="+name,true)//2 连接异步请求的通道 re.send() //3.发送异步请求 re.onreadystatechange=function(){ //每当 readyState 属性改变时，就会调用该函数。 if (re.readyState==4 && re.status==200){ //4:请求已完成 200:响应已就绪 $("span").html(re.responseText) //responseText 属性返回字符串形式的servket响应 } } }) 创建loginServlet <servlet> <servlet-name>LoginServlet</servlet-name> <servlet-class>com.web.LoginServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>LoginServlet</servlet-name> <url-pattern>/login</url-pattern> </servlet-mapping> 在loginServlet的doGet方法中 String name = request.getParameter("name"); boolean b = dao.selectByName(name); //LoginDao dao=new LoginDao(); String msg = b?"用户名已存在":"OK"; //赋值结果 response.setContentType("text/html;charset=UTF-8"); //设置编码格式 response.getWriter().write(msg); //响应 在LoginDao类，运用jdbc技术查看数据库中是否含有该用户名 try { Class.forName("com.mysql.jdbc.Driver");//1 注册驱动 Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/day1", "root", "888666"); //2.连接数据库 PreparedStatement pst = con.prepareStatement("select * from login where name=?"); pst.setString(1,name); ResultSet re = pst.executeQuery(); return re.next(); } catch (Exception e) { throw new RuntimeException(e); }

这一步 ，使用c3p0技术更简单

2.2 js版本的post的异步请求

简单的修改一些即可

1.将get改为post2. 在loginServlet的post方法中

request.setCharacterEncoding("utf-8"); doGet(request,response);

2.3 jquery版本的get的异步请求(比js版本更简单)

在上的例题上进行修改，要添加 jquery-3.5.1.min.js 包

1.在js中

$(":text").blur(function () { var name = $(this).val() //$.get() 1：路径 2：json,参数 3:当请求成功时运行的函 4:json $.get("/FileUpload/login",{name:name},function (entry) { $("span").html(entry) },"json");

2.在LoginServlet的get方法中

String name = request.getParameter("name"); boolean b = dao.selectByName(name); String msg = b?"用户名已存在":"OK"; response.setContentType("text/html;charset=UTF-8"); String entry = JSONObject.toJSONString(msg); //添加fastjson-1.2.9.jar包 response.getWriter().write(entry);

2.4 jquery版本的post的异步请求

1.get—>post 2. 在LoginServlet的方法中，添加 request.setCharacterEncoding("utf-8"); doGet(request,response);

三.运行结果

1.mysql数据库中含有该用户名 2. 不含有

四.注意事项

1.在a.jsp的head标签,添加 <script src="../jquery-3.5.1.min.js"></script> 2. 使用jquery的表单过滤器，记得前面的冒号“:” 3. 路径问题，一律 “/工程名/…/servlet名”