JavaWeb day08 ajax介绍JQuery框架JSONajax跨域访问

Posted halulu.me

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaWeb day08 ajax介绍JQuery框架JSONajax跨域访问相关的知识,希望对你有一定的参考价值。

ajax介绍

Asynchronous javascript And XML
含义:异步的js和xml实现请求与处理,也叫异步请求处理(网页局部刷新)

在这里插入图片描述

特点

1.并行操作:浏览器与服务器是并行操作的,浏览器在工作的时候,服务器也可以工作。

2.后台发送:浏览器的请求是后台发送给服务器的,用户在前端操作的时候感觉不到请求已经被发送了。服务器处理完结果以后也是后台将处理结果发送给浏览器。

3.局部刷新:浏览器接收到结果以后进行页面局部刷新。

原生api方法,原生异步核心js对象XMLHttpRequest

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
后端代码

@WebServlet("/CheckUserNameServlet")
public class CheckUserNameServlet extends HttpServlet {
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


        //目标:处理校验用户名异步请求

        //解决输出乱码(text/plain 代表输出的内容为纯文本字符串)
        response.setContentType("text/plain;charset=utf-8");
        //得到输出的字符流
        PrintWriter out = response.getWriter();

        //1.获取请求数据用户名
        String username = request.getParameter("username");

        //2.校验用户名是否存在(只要是admin就代表存在)
        if("admin".equals(username)) {
            //3.存在,返回“已被注册”
            out.print("已被注册");
        }else {
            //3.不存在,返回“可以使用”
            out.print("可以使用");
        }
    }
}

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    用户名:<input type="text" id="username" name="username"><span id="info"></span>
</p>

<script>
    //目标:使用js原生技术异步发送请求校验用户名
    //1.给文本框注册失去焦点事件
    document.getElementById("username").onblur = function (){
        //2.获取文本框输入的值
        let name = this.value;

        //3.判断输入的值不为空或空字符串
        if(name){

            //4.校验通过,发送异步请求
            //4.1 创建ajax引擎对象XMLHttpRequest
            let xmlHttp = new XMLHttpRequest();

            //4.2 设置异步的请求信息,open方法
            //语法:xmlHttp.open(method,url,isAsync)
            //      method参数:设置提交数据的请求方法,get/post/put/delete
            //      url参数:设置提交服务器资源地址
            //      isAsync参数:设置是否是异步提交,值为true代表异步提交请求,
            //          否则false为同步,默认值为true
            xmlHttp.open("get","CheckUserNameServlet?username="+name);

            //4.3 发送异步请求
            xmlHttp.send();

            //4.4 设置ajax引擎对象的回调函数,用于接收服务器响应的数据
            xmlHttp.onreadystatechange = function (){
                //服务器返回数据要求2种通信状态如下,才可以正确的接收到服务器响应的数据
                //第一个状态:ajax通信状态,状态值必须为4, 代表接收到了服务器响应完成的数据
                //第二个状态:http协议通信状态,状态值必须为200,代表通信正常
                if(xmlHttp.readyState==4 && xmlHttp.status==200){
                    //可以正确获取服务器响应的数据(校验用户名结果)
                    let result = xmlHttp.responseText;
                    //更新到页面上局部位置span标签
                    document.getElementById("info").innerText = result;
                }
            };
        }
    }

</script>
</body>
</html>

在这里插入图片描述

JQuery框架

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

环境准备

在这里插入图片描述
在这里插入图片描述

get方法发送请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    用户名:<input type="text" id="username" name="username"><span id="info"></span>
</p>
<!--导入jquery框架的js文件-->
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //目标:使用jq框架的get方法实现异步发送请求校验用户名
    //1.给文本框注册失去焦点事件
    document.getElementById("username").onblur = function (){
        //2.获取文本框输入的值
        let name = this.value;

        //3.判断输入的值不为空或空字符串
        if(name){

            //4.校验通过,发送异步请求
            /*
             * jq的get方法异步请求语法:$.get(url,[data],[callback],[type])
             * 参数1:url, 设置服务器处理请求资源地址
             * 参数2:data, 设置传递的请求数据,支持2种格式
             *        格式1:键值对字符串形式,eg:"key1=value1&key2=value2..."
             *        格式2:json对象格式,eg:{key1:value1,key2:value2,...}
             * 参数3:callback, 回调函数,用于接收服务器返回的数据
             *        格式: function(result){...}  result就是服务器返回的数据
             * 参数4:type,设置服务器返回的数据类型
             *        类型1:type=text,代表返回文本字符串
             *        类型2:type=html,代表返回html文本字符串
             *        类型3:type=script,代表返回javascript文本字符串
             *        类型4:type=xml,代表返回xml文本字符串
             *        类型5:type=json,代表返回json文本字符串
             *        如果不设置默认值:type为服务器响应的正文类型
             *  注意:只有url参数是必须,其他都可有可无
              * */
            $.get(
                "CheckUserNameServlet",  //url,服务器资源地址
                "username="+name,        //data,传递的请求参数数据
                function (result){       //callback,回调函数,服务器正确响应完成后调用,result是服务器响应的数据
                    //将结果更新到span标签上
                    $("#info").text(result);
                }
            )
        }
    }

</script>
</body>
</html>

post发送请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    用户名:<input type="text" id="username" name="username"><span id="info"></span>
</p>
<!--导入jquery框架的js文件-->
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //目标:使用jq框架的post方法实现异步发送请求校验用户名
    //1.给文本框注册失去焦点事件
    document.getElementById("username").onblur = function (){
        //2.获取文本框输入的值
        let name = this.value;

        //3.判断输入的值不为空或空字符串
        if(name){

            //4.校验通过,发送异步请求
            /*
             * jq的post方法异步请求语法:$.post(url,[data],[callback],[type])
             * 参数1:url, 设置服务器处理请求资源地址
             * 参数2:data, 设置传递的请求数据,支持2种格式
             *        格式1:键值对字符串形式,eg:"key1=value1&key2=value2..."
             *        格式2:json对象格式,eg:{key1:value1,key2:value2,...}
             * 参数3:callback, 回调函数,用于接收服务器返回的数据
             *        格式: function(result){...}  result就是服务器返回的数据
             * 参数4:type,设置服务器返回的数据类型
             *        类型1:type=text,代表返回文本字符串
             *        类型2:type=html,代表返回html文本字符串
             *        类型3:type=script,代表返回javascript文本字符串
             *        类型4:type=xml,代表返回xml文本字符串
             *        类型5:type=json,代表返回json文本字符串
             *        如果不设置默认值:type为服务器响应的正文类型
             *  注意:只有url参数是必须,其他都可有可无
              * */
            $.post(
                "CheckUserNameServlet",  //url,服务器资源地址
                {username:name},        //data,传递的请求参数数据
                function (result){       //callback,回调函数,服务器正确响应完成后调用,result是服务器响应的数据
                    //将结果更新到span标签上
                    $("#info").text(result);
                }
            )
        }
    }

</script>
</body>
</html>

ajax方法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<h2>用户登录</h2>
<form action="login" method="post" id="loginForm">
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username" id="username" placeholder="请输入用户名"/></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="password" id="password" placeholder="请输入密码"/></td>
        </tr>
        <tr>
            <td colspan="2">
                <!--注意:要实现异步提交登录,所以这个登录按钮必须为普通按钮,不可以为提交按钮
                          如果是提交按钮会进行表单同步提交请求,就不能实现异步提交了
                -->
                <input type="button" value="登录" id="btnLogin"/></td>
        </tr>
    </table>
</form>
<script type="text/javascript">
    //目标:实现登录功能,发送异步登录请求【jq的ajax方法实现】
    //1.给登录按钮注册点击事件
    $("#btnLogin").click(function (){
        //2.获取用户名与密码的值
        let name = $("#username").val();
        let pwd = $("#password").val();

        //3.校验用户名与密码不能为空
        if(name && pwd){

                //4.校验通过,发送异步登录请求(要求使用jq的ajax方法实现)
                /*
                  语法:$.ajax(json对象)  --api文档写法$.ajax(url,[settings])
                  json对象格式:{key1:value1,key2:value2,...}
                  json对象中常用key属性如下:
                      url	    服务器访问地址
                      async	设置后台发送类型,是异步或同步发送。通常省略
                              默认值:true,异步发送请求
                      data	发送给服务器的数据的格式
                              格式1:"键=值"
                              格式2:{键:值} 里面可以有多个键值对
                      method	发送请求的方式:GET/POST/PUT/DELETE,早期的版本这个属性叫:type
                                默认的请求方式,GET方式
                                ajax可以发送的请求类型常用get和post,还有PUT/DELETE等请求,以后讲解
                                浏览器只能发送get/post请求,不可以发送put/delete
                      dataType	服务器返回的数据类型
                                  取值可以是 xml, html, script, json, text, _default等
                      success	服务器响应成功以后调用的回调函数
                              回调函数的参数是服务器返回的数据
                      error	如果服务器出现异常调用这个函数


                  总结: ajax全局发送异步请求方法功能最强,如下
                         1.增加了是否异步请求发送的设置
                         2.可以设置更多的请求方式,/GET/POST/PUT/DELETE
                         3.增加了失败的回调的回调函数,可以给用户友好的提示消息

                  注意:上面所有属性名区分大小写
              * */
            $.ajax({
                url:"LoginServlet",
                data:{username:name,password:pwd},
                method:"post",
                success:function (result){
                    //result 是服务器返回的数据:“true” 或 “false” 字符串
                    if(result=="true"){
                        //登录成功了
                        alert(name+"登录成功了");
                    }else{
                        //登录失败了
                        alert("登录失败");
                    }
                },
                error:function (errorObj){
                    console.log(errorObj);
                    alert("服务器忙。。。");
                }
            });
        }
    });


</script>
</body>
</html>

JSON

JavaScript Object Notation js对象标记

是一种轻量级的数据交换格式(非常知名的传输数据格式)

在这里插入图片描述

注意:

Json中读取数据
1、 在jsp文件里面使用es6标准拼接(飘号)字符串,如果使用$占位符需要进行“\\”进行转义,否则会被当成el方式处理。
2、在html文件中没有el表达式,所以不需要进行转义。

search.html不需要转义

            $.ajax({
                url:"SelectUserServlet",
                method:"post",
                data:{name:word},
                success:function(userList){
                    //userList就是服务器返回的json对象数据格式:[{id:xx,name:xx,password:xx},...]
                    //4.获取返回的数据,更新到页面上显示
                    //定义拼接变量
                    let html = '';
                    //4.1 循环遍历userList,拼接每一个用户名的html代码
                    for (let user of userList) {
                        html+=`<div onclick="showName(this)">${user.name}</div>`;
                    }
                    //4.2 将拼接好的列表html代码设置到div(id=show)标签体内
                    $("#show").html(html);
                    //4.3 让div(id=show)显示出来
                    //js原生代码:document.getElementById("show").style.display="block";
                    //jq代码显示元素标签
                    $("#show").show();
                },
                error:function(obj){
                        console.log(obj);
                        alert("服务器忙。。。");
                    }
            });

index.jsp需要转义

    $.ajax({
        url:"${pageContext.request.contextPath}/AreaServlet",
        method:"post",
        data:{pid:0},
        success:function(provinceList){
            //2.获取返回省份列表数据更新到页面上
            //provinceList返回的省份列表格式:[{id:xx,name:xx,pid:xx},...]
            //2.1 定义拼接html代码的变量
            let html = '<option>==请选择省份==</option>';
            //2.2 遍历provinceList省份列表,将每个省份拼接html代码
            for (let province of provinceList) {
                html+=`<option value="\\${province.id}">\\${province.name}</option>`;
                //注意:在jsp里面使用es6标准拼接字符串里面使用占位符需要加“\\”进行转义,否则会被当成el表达式处理
            },
        error:function(obj){
            console.log(obj);
            alert("服务器忙。。。");
        }
    });

在这里插入图片描述

前端JS中 JSON对象与字符串的转换(自动转换)
在这里插入图片描述

注意:

设置response.setContentType(“application/json;charset=utf-8”);的时候,前端jquery框架的异步请求代码获取的这个类型的字符串数据会自动将json字符串转换为json对象

后端java对象与JSON字符串的转换

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

		//将用户列表数据转换为json字符串返回
        String jsonStr = new ObjectMapper(JavaWeb网上图书商城完整项目--day02-6.ajax校验功能之页面实现

JavaWeb网上图书商城完整项目--day02-5.ajax校验功能之服务器端三层实现

Ajax原生请求和java对象转成json

Day08 JavaWeb学习之Xml 01

JavaWeb网上图书商城完整项目--day03-1.图书模块功能介绍及相关类创建

JavaWeb学习总结(十七)AJAX