(简略)后端需要掌握的Ajax知识

最新推荐文章于 2024-09-06 17:49:15 发布

立刻使用灰流丽

最新推荐文章于 2024-09-06 17:49:15 发布

阅读量980

点赞数

本文链接：https://blog.csdn.net/qq_35479788/article/details/125354954

版权

Ajax基础知识

一、Ajax概念
二、XMLHttpRequest实现异步通信
三、使用Ajax与springboot通信测试
四、JSON
- JSON数据和Java对象的相互转换

一、Ajax概念

AJAX = 异步 JavaScript 和 XML。
（ASynchronous JavaScript And XML）

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

二、XMLHttpRequest实现异步通信

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2.1 创建XMLHttpRequest对象

对于不同的浏览器，创建XMLHttpRequest对象的方式不尽相同。

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2.2 向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","URL",true);
xmlhttp.send();

===================================
open(method,url,async) - 规定请求的类型、URL 以及是否异步处理请求。
							method：请求的类型；GET 或 POST
							url：文件在服务器上的位置
							async：true（异步）或 false（同步）
							
send(string) - 将请求发送到服务器
				string：仅用于 POST 请求,GET 请求不需要填写

2.3 服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText - 获得字符串形式的响应数据
responseXML - 获得 XML 形式的响应数据

//例子：
//获得字符串形式的来自服务器的响应，并把它赋值给id为myDiv的div标签的内容。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

2.4 readyState 属性

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

在这里插入图片描述

实际中使用到的状态变化如下：

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

//onreadystatechange 事件监听状态值的变化
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
		//当响应已就绪后，更新myDiv的内容
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

2.5 一次完整的原生的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);
    }
}

三、使用Ajax与springboot通信测试

html页面如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>js & Ajax</title>
</head>
<body>
<div align="center">
    <div>通信测试</div>
    <input type="text" id="uname" value="用户名"/>
    <input type="text" id="upwd" value="密码"/>
    <input type="button" id="btn" value="提交" onclick="useAjax()"/>
    <br/>
    <br/>
    <div id="word" type = "text">接口得到的数据是:
    </div>
</div>
<script type="text/javascript">
    function useAjax(){
        //1.建立异步对象
        var xhr = new XMLHttpRequest();
        //2.绑定事件
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 || xhr.readyState == 200){
                //获取更新数据
                var temp = xhr.responseText;
                console.log(temp);
                //更新dom
                // document.getElementById("word").innerHTML = temp;

                //使用json格式接收数据，再把json字符串转为对象
                var obj = JSON.parse(temp);
                console.log(obj.uname + "===" + obj.upwd);
                document.getElementById("word").innerHTML = obj.uname + " " + obj.upwd;
            }
        }
        //3.初始请求参数
        var uname = document.getElementById("uname").value;
        var upwd = document.getElementById("upwd").value;
        var param = "/test?uname="+uname+"&upwd="+upwd;
        xhr.open("GET",param,true);
        //4.发起请求
        xhr.send();
    }
</script>
</body>
</html>

springboot中的controller页面如下:

package com.example.js_ajax_springboot.controller;

import com.alibaba.fastjson.JSONObject;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

/**
 * @program: js_ajax_springboot
 * @description:
 * @author: KingCrimson
 * @create: 2022-06-18 18:28
 **/

@RestController
public class TestController {

    @RequestMapping("test")
    public String test(@RequestParam("uname") String uname, @RequestParam("upwd") String upwd){
        System.out.println(uname+upwd);
        User user = new User();
        user.setUname("username::"+uname);
        user.setUpwd("userpassword::"+upwd);
        String json = JSONObject.toJSONString(user);
        return json;
    }

}

结果如下:
在这里插入图片描述

四、JSON

简单地说，JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在网络或者程序之间轻松地传递这个字符串，并在需要的时候将它还原为各编程语言所支持的数据格式，例如在 PHP 中，可以将 JSON 还原为数组或者一个基本对象。在用到AJAX时，如果需要用到数组传值，这时就需要用JSON将数组转化为字符串。

JSON字符串把对象当作键值对来储存，
Java:
Person p = new Person();
p.setName(“张三”);
p.setAge(23);
p.setGender(“男”);
JS:
var p = {“name”:“张三”,“age”:23,“gender”:“男”};