自学AJAX的回顾（1/1）

最新推荐文章于 2023-01-15 09:38:59 发布

zourenqiang

最新推荐文章于 2023-01-15 09:38:59 发布

阅读量101

点赞数

分类专栏：小白自学文章标签： ajax java

本文链接：https://blog.csdn.net/qq_39993973/article/details/107642226

版权

小白同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

自学

29 篇文章 0 订阅

订阅专栏

自学AJAX的回顾（1/1）

AJAX概述
异步对象的两个属性
使用异步对象的流程
json的使用

AJAX概述

是浏览器页面部分标签从服务器获取数据并刷新的过程，这个过程又被称为局部刷新。

异步对象的两个属性

局部刷新的重要对象就是异步对象，异步对象是存在浏览器内存中的，使用js语法创建和使用异步对象。

var xmlHttp=new XMLHttpRequest();//创建一个异步对象

异步对象有两个重要的属性：
（1）readyState：准备状态，这个属性有4个值，分别是0、1、2、3、4
0：是创建异步对象时new XMLHttpRequest
1：初始异步请求对象时
2：发送请求时，send
3：从服务端获取了数据（一般在异步对象内部使用）
4：异步对象把接收的数据处理完成后。
（2）Status：状态码，这个属性对应之前Servlet中状态码（404、200、500等）。

使用异步对象的流程

（1）创建一个异步对象
（2）写异步对象的触发事件
（3）初始化异步对象
（4）发送请求给服务器

var xmlHttp=new XMLHttpRequest();//创建一个异步对象
xmlHttp.onreadystatechange=function (){//写异步对象的触发事件
	if(xmlHttp.readyState==4&&xmlHttp.status==200){
		var data=xmlHttp.responseText;
		document.getElementById("").innerText=data;	
	}
}
xmlHttp.open(get,"url",true);//初始化异步对象
xmlHttp.send();//发送请求给服务器

注：初始化异步对象中的第三个参数代表是异步还是同步。true是代表异步，一个页面的操作之间不需要互相等待。false是代表同步，一个页面的操作之间需要互相等待。

json的使用

（1）首先要有jackson-databind工具包(依赖)

    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.9.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.0</version>
    </dependency>

（2）在页面中写ajax体

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type="text/javascript" src="js/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("button").click(function () {
                $.ajax({
                    url:"other.do",
                    data:{
                        name:$("#name").val(),
                        age:$("#age").val()
                    },
                    type:"post",
                    dataType:"json",
                    success:function (resp) {
                        alert(resp.name+resp.age);
                    }
                })
            })
        })
    </script>
    <title>1</title>
</head>
<body>
    <form>
        name:<input type="text" name="name" id="name"/><br>
        age:<input type="text" name="age" id="age"/><br>
    </form>
    <br>
    <button id="btn" >发起请求</button>
</body>
</html>

（3）在对应的响应体中写响应

	Student student=new Student(name,age);
    String s=null;
    if(student!=null){
    	ObjectMapper objectMapper = new ObjectMapper();
        s = objectMapper.writeValueAsString(student);
    }
    response.setContentType("application/json;charset=utf-8");
    PrintWriter writer = response.getWriter();
    writer.println(s);
    writer.flush();
    writer.close();

zourenqiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自学AJAX的回顾（1/1）

自学AJAX的回顾（1/1）AJAX概述异步对象的两个属性使用异步对象的流程json的使用AJAX概述是浏览器页面部分标签从服务器获取数据并刷新的过程，这个过程又被称为局部刷新。异步对象的两个属性局部刷新的重要对象就是异步对象，异步对象是存在浏览器内存中的，使用js语法创建和使用异步对象。var xmlHttp=new XMLHttpRequest();//创建一个异步对象异步对象有两个重要的属性：（1）readyState：准备状态，这个属性有4个值，分别是0、1、2、3、40：是创建异
复制链接

扫一扫