AJAX基本学习笔记分享

黄泉旧部

已于 2022-10-19 16:58:33 修改

阅读量263

点赞数 1

文章标签： ajax 学习 javascript

于 2022-10-19 16:58:03 首次发布

本文链接：https://blog.csdn.net/qq_56243696/article/details/127411479

版权

方式二：jackson（SpringMVC

概念：

AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。

作用：

1，与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器（使用了AJAX和服务器进行通信，就可以通过HTML+AJAX来代替jsp页面，真正实现前后端彻底分离）。

2，异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。如:搜索联想，用户名是否可用校验等；

同步与异步

同步：浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。

异步：浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

快速入门

1，编写AjaxServlet，并使用response响应请求（输出一段字符串）

2，创建XMLHttpRequest对象：用于和服务器交换数据

3，向服务器发送请求

4，获取服务器响应数据

其中（1是后端部分，2,3,4都是前端部分）,

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<script>
<%--    2,创建核心对象--%>
    var xhttp;
    if(window.XMLHttpRequest){
        xhttp=new XMLHttpRequest();
    }else{
        xhttp=new ActiveXObject("Microsft.XMLHTTP");
    }
//    3，发送请求
    xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
    xhttp.send();
//    4,获取响应
    xhttp.onreadystatechange=function () {
        if(this.readyState==4&&this.status==200){
            alert(this.responseText);
        }
    }
</script>
</body>
</html>

Axios异步框架：

Axios 对原生的AJAX进行封装，简化书写。

快速入门：

1，引入axios的js文件

 <script src="js/axios-0.18.0.js"></script>

2，使用axios发送请求

get请求

<script>
    axios({
        method:"get",
        url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
    }).then(function (resp){
        alert(resp.data);
    })
</script>
post请求

<script>
    axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
        data:"username=zhangsan"
    }).then(function (resp){
        alert(resp.data);
    });
</script>

3，获取响应结果

解释：

axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数： method 属性：用来设置请求方式的。取值为 get 或者 post 。

url 属性：用来书写请求的资源路径。如果是get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2 。

data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

then() 需要传

递一个匿名函数。我们将 then() 中传递的匿名函数称为回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

Axios请求方式别名

为了方便，Axios为所有支持的请求方法提供别名

get 请求： axios.get(url[,config])
delete 请求： axios.delete(url[,config])
head 请求： axios.head(url[,config])
options 请求： axios.option(url[,config])
post 请求： axios.post(url[,data[,config])
put 请求： axios.put(url[,data[,config])
patch 请求： axios.patch(url[,data[,config])

JSON

概念：JavaScript Object Notation 。JavaScript 对象表示法.本质上还是一个字符串；

现在多用作数据载体，是网络数据传输的数据格式；

基础语法

格式：

var 变量名={
    "key1":value1,
    "key2":value2,
    ......
};
    //数据获取
    变量名.key

JSON数据和Java对象转换

请求数据：JSON字符串转为Java对象

响应数据：Java对象转为JSON字符串

方式一：fastjson(阿里巴巴)

Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的 JSON 库，是目前Java语言中最快的 JSON 库，可以实现 Java 对象和 JSON 字符串的相互转换。

方法：

//依赖坐标
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>

//Java对象转json
String jsonStr = JSON.toJSONString(obj);
//json转Java对象
User user = JSON.parseObject(jsonStr, User.class);

方式二：jackson（SpringMVC）

//依赖坐标
<dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.13.3</version>
</dependency>
//Java对象转json
User user=new User();
ObjectMapper mapper=new ObjectMapper();
String jsonStr=mapper.writeValueAsString(user);
//json转Java对象
String jsonStr;//表示获得的json字符串
ObjectMapper mapper=new ObjectMapper();
User user=mapper.readValue(jsonStr , Brand.class);