第七章 Ajax与JSON

艾瑞丨巴蒂

于 2024-09-11 09:06:38 发布

阅读量989

点赞数 19

分类专栏： JAVA Web 文章标签： ajax json

本文链接：https://blog.csdn.net/2301_77897834/article/details/142123451

版权

JAVA Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.Ajax

Ajax（Asynchronous JavaScript and XML）：异步刷新技术

常用方法

方法	说明
open( String method, String url, boolean async, String user, String password )	创建一个新的HTTP请求
send( String data )	发送请求到服务器端
abort( )	取消当前请求
setRequestHeader( String header, String value )	设置请求的某个HTTP头信息
getResponseHeader( String header )	获取响应的指定HTTP头信息
getAllResponseHeader( )	获取响应的所有HTTP头信息

事件

onreadystatechange：指定回调函数

常用属性

readyState：XMLHttpRequest的状态信息

就绪状态码	说明
0	XMLHttpRequest对象未完成初始化
1	XMLHttpRequest对象开始发送请求
2	XMLHttpRequest对象的请求发送完成
3	XMLHttpRequest对象开始读取响应
4	XMLHttpRequest对象读取响应结束

status：HTTP的状态码

状态码	说明
200	服务器正确返回响应
404	请求的资源不存在
500	服务器内部错误
403	没有访问权限

statusText：返回当前请求的响应状态

responseText：以文本形式获得响应的内容

responseXML：将XML格式的响应内容解析成DOM对象

// 1、我们首先要创建 XMLHttpRequest对象
var xmlhttprequest = new XMLHttpRequest();
// 2、调用 open 方法设置请求参数
xmlhttprequest.open("GET","http://localhost:8080/ajaxServlet?action=javaScriptAjax",true)
// 3、调用 send 方法发送请求
xmlhttprequest.send();
// 4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。
xmlhttprequest.onreadystatechange = function(){
    if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
    var jsonObj = JSON.parse(xmlhttprequest.responseText);
    // 把响应的数据显示在页面上
    document.getElementById("div01").innerHTML = "姓名：" +jsonObj.name;
}

2.为什么使用Ajax

无刷新：不刷新整个页面，只刷新局部

无刷新的好处

只更新部分页面，有效利用带宽

提供连续的用户体验

提供类似C/S的交互效果，

操作更方便

传统Web与Ajax的差异

差异	方式	说明
发送请求方式不同	传统Web	浏览器发送同步请求
Ajax技术	异步引擎对象发送请求
服务器响应不同	传统Web	响应内容是一个完整页面
Ajax技术	响应内容只是需要的数据
客户端处理方式不同	传统Web	需等待服务器响应完成并重新加载整个页面后用户才能进行操作
Ajax技术	可以动态更新页面中的部分内容不影响用户在页面进行其他操作

GET请求和POST请求的区别

步骤	请求方式	实现代码
初始化组件	GET	xmlHttpRequest.open( "GET", url, true );
POST	xmlHttpRequest.open( "POST", url, true ); xmlHttpRequest.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
发送请求	GET	xmlHttpRequest.send( null );
POST	xmlHttpRequest.send( "key=xxx&type=12&year=2016" );

3.使用jQuery实现Ajax

$.ajax()

$.ajax( [settings] );

<form id="formLogin">
        <input type="button" value="登录">
</form>

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

<script>
    $(function () {

        $("#formLogin input[type='button']").click(function () {

            var formValue = $("#formLogin").serialize();
            $.post("/loginServlet",formValue,function (res) {
                alert(res.message);
                if (res.code==0){
                    location.href="/api/indexServlet";
                }
            },"json")
        });
    });
</script>

<script src="/static/js/jquery-3.7.1.min.js"></script>
<script>
        //删除
        $(function() {
            $(".delete").click(function (){
                var id = $(this).data('id');
                // 显示弹窗提示
                if (confirm('确定要删除这条记录吗？')) {
                    // 发送 AJAX 请求
                    $.ajax({
                        url: '/api/deleteProviderServlet',
                        type: 'get', // 使用get方法
                        data: { id: id }, // 发送的数据
                        dataType: 'json', // 预期服务器返回的数据类型
                        success: function(response) {
                            // 请求成功时的处理
                            alert(response.message)
                            if (response.code === 0) {
                                //刷新表格
                                location.reload();
                            }
                        }
                    });
                }
            })
    });
</script>

常用属性参数

参数	类型	说明
url	String	发送请求的地址，默认为当前页地址
type	String	请求方式，默认为GET
data	PlainObject或 String或Array	发送到服务器的数据
dataType	String	预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text
timeout	Number	设置请求超时时间
global	Boolean	表示是否触发全局Ajax事件，默认为true

常用函数参数

参数	类型	说明
beforeSend	Function ( jqXHR jqxhr, PlainObject settings )	发送请求前调用的函数
success	Function( 任意类型 result, StringtextStatus, jqXHR jqxhr )	请求成功后调用的函数参数result：可选，由服务器返回的数据
error	Function ( jqXHR jqxhr, String textStatus, String errorThrown )	请求失败时调用的函数
complete	Function ( jqXHR jqxhr, String textStatus )	请求完成后（无论成功还是失败）调用的函数

4.认识JSON

JSON（JavaScript Object Notation）

一种轻量级的数据交换格式

采用独立于语言的文本格式

通常用于在客户端和服务器之间传递数据

JSON的优点

轻量级交互语言

结构简单

易于解析

定义JSON对象

var JSON对象 = { "name" : value,  "name" : value,  …… };

var person = { "name" : "张三",   "age" : 30,  "spouse" : null };

定义JSON数组

var JSON数组 = [ value,  value,  …… ];

var countryArray = [ "中国",  "美国",  "俄罗斯" ];
var personArray = [ { "name":"张三",  "age":30 },{ "name":"李四",  "age":40 } ];