ajax

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

一：简单的介绍

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

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

二：用法

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

2.1 js版本的get的异步请求

1. 创建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响应
            }
        }
    })

2. 创建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>

3. 在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); //响应

4. 在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名”