0
点赞
收藏
分享

微信扫一扫

Ajax _(‘前后端交互’重要工具)

梯梯笔记 2022-04-14 阅读 86
Ajax

目录

引言

1. Ajax的阐释

2. Ajax的实现方式

2.1 原生的JS实现方式(了解)

2.2 JQeury实现方式

1. $.ajax()

2. $.get():发送get请求

3. $.post():发送post请求

3. 案例:注册页面


引言

今天我们聊聊前后端交互中十分重要的工具——Ajax

“ 认真听,认真学,学不会....嗯?抬走,下一个!”

1. Ajax的阐释

2. Ajax的实现方式

2.1 原生的JS实现方式(了解)

				 //1.创建核心对象
	            var xmlhttp;
	            if (window.XMLHttpRequest)
	            {// code for IE7+, Firefox, Chrome, Opera, Safari
	                xmlhttp=new XMLHttpRequest();
	            }
	            else
	            {// code for IE6, IE5
	                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	            }
	
	            //2. 建立连接
	            /*
	                参数:
	                    1. 请求方式:GET、POST
	                        * get方式,请求参数在URL后边拼接。send方法为空参
	                        * post方式,请求参数在send方法中定义
	                    2. 请求的URL:
	                    3. 同步或异步请求:true(异步)或 false(同步)
	
	             */
	            xmlhttp.open("GET","ajaxServlet?username=tom",true);
	
	            //3.发送请求
	            xmlhttp.send();
	
	            //4.接受并处理来自服务器的响应结果
	            //获取方式 :xmlhttp.responseText
	            //什么时候获取?当服务器响应成功后再获取
	
	            //当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange。
	            xmlhttp.onreadystatechange=function()
	            {
	                //判断readyState就绪状态是否为4,判断status响应状态码是否为200
	                if (xmlhttp.readyState==4 && xmlhttp.status==200)
	                {
	                   //获取服务器的响应结果
	                    var responseText = xmlhttp.responseText;
	                    alert(responseText);
	                }
	            }

2.2 JQeury实现方式

Jquery的学习,请参考以下博客(是额滴博客儿)。

(1条消息) JavaScript框架_JQuery_D大调奏鸣曲_第七序章_的博客-CSDN博客

1. $.ajax()

语法:$.ajax({键值对});

 //使用$.ajax()发送异步请求

$.ajax({
	                url:"ajaxServlet1111" , // 请求路径
	                type:"POST" , //请求方式
	                //data: "username=jack&age=23",//请求参数
	                data:{"username":"jack","age":23},
	                success:function (data) {
	                    alert(data);
	                },//响应成功后的回调函数
	                error:function () {
	                    alert("出错啦...")
	                },//表示如果请求响应出现错误,会执行的回调函数
	
	                dataType:"text"//设置接受到的响应数据的格式
	            });

2. $.get():发送get请求

* 语法:$.get(url, [data], [callback], [type])

* 参数:
    * url:请求路径
    * data:请求参数
    * callback:回调函数
    * type:响应结果的类型

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script>

        //定义方法
        function fun() {

            //使用$.get()发送异步请求
            $.get("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");

        }



    </script>

</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();">
<input type="text">

</body>
</html>

3. $.post():发送post请求

* 语法:$.post(url, [data], [callback], [type])

* 参数:
    * url:请求路径
    * data:请求参数
    * callback:回调函数
    * type:响应结果的类型

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script>

        //定义方法
        function fun() {

            //使用$.get()发送异步请求
            $.post("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");

        }



    </script>

</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();">
<input type="text">

</body>
</html>

3. 案例:注册页面

要求:校验用户名是否存在

分析:

服务器响应的数据,在客户端使用时,要想当做json数据格式使用。有两种解决方案:
        1. $.get(type):将最后一个参数type指定为"json"
        2. 在服务器端设置MIME类型
            response.setContentType("application/json;charset=utf-8");

代码:

regist.html(注册页面前端代码)

(因为用到了Jquery框架,所以要jQuery的jar包,CSDN有资源,搜索)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>

    <script src="js/jquery-3.3.1.min.js"></script>

    <script>
        //在页面加载完成后
        $(function () {
            //给username绑定blur事件
            $("#username").blur(function () {

                //获取username文本输入框的值
                var username=$(this).val();

                //发送ajax请求
                //期望服务器响应回的数据格式:
                    //{"userExsit":true,"msg":"此用户太受欢迎,请更换一个"}
                    //{"userExsit":false,"msg":"用户名可用"}

                $.get("findUserServlet",{username:username},function (data) {

                    //判断userExsit键的值是否是true
                    var span = $("#s_username");
                    if (data.userExsit){
                        //用户名存在
                        span.css("color","red");
                        span.html(data.msg);
                    }else {
                        //用户名不存在
                        span.css("color","green");
                        span.html(data.msg);

                    }
                });

            });
        });
    </script>

</head>
<body>

<form action="">
    <input type="text" id="username" name="username" placeholder="请输入用户名">
    <span id="s_username"></span><br>
    <input type="password" name="password" placeholder="请输入密码"><br>
    <input type="submit" value="注册"><br>
</form>

</body>
</html>

findUserServlet类

package cn.itcast.web.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@WebServlet("/findUserServlet")
public class findUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取用户名
        String username = request.getParameter("username");

        //2.调用service层哦按段用户名是否存在
        //{"userExsit":true,"msg":"此用户太受欢迎,请更换一个"}
        //{"userExsit":false,"msg":"用户名可用"}

        //设置响应的数据格式为json
        response.setContentType("application/json;charset=utf-8");

        Map<String,Object> map=new HashMap<String, Object>();

        if ("tom".equals(username)){
            //存在
            map.put("userExsit",true);
            map.put("msg", "此用户太受欢迎,请更换一个");
        }else {
            //不存在
            map.put("userExsit",false);
            map.put("msg", "用户名可用");
        }

        //将map转为json,并且传递给客户端
        //将map转为json
        ObjectMapper mapper=new ObjectMapper();
        //并且传递给客户端
        mapper.writeValue(response.getWriter(), map);



    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

(username=tom,可以修改成数据库查找对比,进行优化)

以上......

举报

相关推荐

0 条评论