AJAX

JavaWeb之AJAX

什么是Ajax

AsynchronousJavaScriptAndXML
它不是新的编程语言，是一种使用现有标准的新方法
它就是一个页面局部刷新的技术(在页面不进行刷新的情况下页面的部分地方与后台交互)

把先用成熟的技术组合在一起，形成一种新的操作方式
HTML
JavaScript
css
dom
xml
XMLHttpRequest
ajax的实现是基于JavaScript的

Ajax的请求与传统请求的区别

异步请求与同步请求的区别

同步请求

客户端发送请求
服务端响应请求
调用者必须等待服务器返回结果，才能做其他事情
界面交互十分不友好

异步请求

调用者发送一个请求，不需要等待服务器返回响应
当服务端响应结果后，会通知调用者，返回结果
核心技术点：Ajax引擎对象

Ajax的实现方式

核心对象

Ajax的引擎对象XMLHttpRequest

步骤

创建ajax引擎对象
使用open方法设置异步的请求链接处理(打开链接)

xmlHttpRequestr.open("提交方式","提交参数",是否为异步);

设置回调函数 xmlHttpRequestr.onreadstatechange=callback

onreadstatechange：存储函数，每当readState属性改变时，就会调用该函数
on：事件、readstate：读取状态、change：更改
readstate状态码

0：请求初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪

status状态

服务器状态码
200：OK
404：找不到页面
....等等

实现回调函数function callback(){}
发送请求 xmlHttpRequestr.send(null)

GET请求

由于get请求的参数是在地址栏中，所以，在send发送时，是不需要传递数据的，所以send发送时，为null

POST请求

由于post请求的参数是在请求体中的，所以在send发送时，需要将参数发送到请求体中，所以，send发送时，参数为请求参数
在使用send方法发送post请求参数时，需要设置请求头，没有请求头无法传递参数数据
xmlHttpRequestr.setRequestHeader("Content type","application/x-www-form-urlencoded")

服务端响应的数据会被存储到 XMLHttpRequest下的responseTest属性中

Ajax的JQuery实现

JQuery是对JavaScript的封装库
ajax是基于JavaScript
常用的操作

$.ajax()

常用参数

type -- 请求类型
url -- 使用ajax提交请求的地址
data -- 使用ajax提交请求的参数
success -- ajax提交请求成功后执行的回调函数

$.get()

常用参数

url -- 使用ajax的get方式提交请求的地址
data -- 使用ajax的get方法提交请求的参数
callback -- 使用ajax的get方式提交请求后执行的回调函数
type

使用ajax的get方法提交请求成功后，在执行回调函数时设置返回数据的格式
格式

XML
HTML
script
json
text

$.post()

常用参数：和get一样

$.JSON()

常用参数

和get的常用方法类似
区别：没有type属性
getJSON是以get方式提交，以JSON格式返回数据，所以不需要type属性来指定返回类型

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JavaScript实现ajax实例</title>
    <script src="js/jquery-3.5.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#username").blur(function () {

                var value=$(this).val();


//                $.ajax({
//                    type:"post",
//                    url:"validata.do",
//                    data:"username="+value,
//                    success:function (data) {
//                        alert("data参数中是服务端响应的数据:"+data);
//                    }
//                });

//                $.get("validata.do",{"username":value},function (data) {
//                    alert("get发送的ajax返回的响应数据:"+data.info+","+data.password);
//                },"json");


//                $.post("validata.do",{"username":value},function (data) {
//                    alert("get发送的ajax返回的响应数据:"+data.info+","+data.password);
//                },"json");

                $.getJSON("validata.do",{"username":value},function (data) {
                    alert("get发送的ajax返回的响应数据:"+data.info+","+data.password);
                });
            });
        });
    </script>
</head>
<body>
<div align="left">

    <form action="login.do" method="get">
        帐户:<input type="text" name="username" id="username"/><span id="span_name"></span><br/>
        密码:<input type="password" name="password"/><br/>
        <input type="submit" value="提交"/>
    </form>
</div>
</body>
</html>

ajax接收服务端Java对象数据

拼接json
使用Json工具

使用Jackson可以实现Java后端与前端数据交互
操作步骤

导包
创建工具类对象
将指定Java对象传入前端

posted on 2020-09-25 16:47 珍珠奶茶不加糖阅读(191) 评论(0) 收藏举报

刷新页面返回顶部