Ajax&JSON笔记

最新推荐文章于 2022-10-08 15:05:00 发布

码农的世界，你不懂

最新推荐文章于 2022-10-08 15:05:00 发布

阅读量258

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/u010395024/article/details/106047188

版权

java 专栏收录该内容

562 篇文章 1 订阅

订阅专栏

Ajax

概念

Asynchronous JavaScript And XML 异步的JavaScript和XML

异步和同步

同步：客户端发出请求后，必须等待服务器的响应才能进行下一步操作

异步：客户端发出请求后，可以执行其它的操作，等到服务器返回响应消息时再对响应消息进行处理

Ajax的特点：

传统的网页如果需要更新某一部分的内容，则需要重新载入整个网页。

Ajax可以实现无需加载整个网页，就可以更新部分的网页

Ajax的实现方式

原生的JS实现方式（了解）

//1.创建核心对象

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome,Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=newActiveXObject("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);

}

Jquery的实现方式（三种方式）

$.ajax({key1:value1, key2:value2…})

传入键值对，来指定请求的url、请求参数、请求方式等参数

键名	意义
url	请求资源的url
data	请求参数通常写法： data{"k1":"v1","k2":"v2"}
type	请求方式：get、post
success	成功获得响应后执行的回调函数
error	响应失败时调用的回调函数
dataType	响应消息的数据类型默认情况下，浏览器会根据响应的mime类型来解析

$.ajax({
            //首先传入一些可选参数
            url:"ajaxServlet",//请求的url
            type:"POST",//请求方式
            //传递数据，方式1：
            //data:"name=lhp&age=22",

            //传递数据的方式2，json方式：
            data:{
               "name":"lhp",
               "age":"22"
            },

            //成功获得服务器响应后的回调函数,参数代表了服务器响应的数据
            success:function (data) {
               alert(data);
            },

            // 接收服务器响应出错时的回调函数
            error:function () {
               alert("出错啦！");
            },
            //指定接收的响应数据类型
            //默认情况下，浏览器会根据响应的mime类型来解析
            dataType:"text"
         });

$.get(url,[data],[callback],[dateType])

这种方式不用给键值对，直接传参数

参数名	意义
url	请求资源的url
data	传递的请求参数，使用json对象的方式来存储数据
callback	成功获得服务器响应后执行的回调函数
dataType	响应数据的类型

$.get("ajaxServlet",{name:"lhp",age:"22"},function(data) {
            alert(data);
         },"text");

$.post(url,[data],[callback],[dateType])
同上，区别在于$.get()使用get方式，$.post()使用post方式发送ajax请求

JSON
概念
JavaScript Object Notation
JavaScript对象表示法

多用于存储和交换文本信息
JSON比XML更小、更快、更容易解析

数据类型与定义方式
定义方式：
用大括号表示这是一个json对象，大括号内用键值对形式定义对象属性
用中括号表示一个数组
var person = {
   //json的数据类型
   "name":"lhp",//字符串类型
   "age":22,//数字类型，可以是整型和浮点型
   "gender":true,//布尔类型
   "hobby":["lol","animation","comic"],//数组类型
   "aaa":null,//null类型
   "city":{"name":"chengdu","province":"sichuan","country":"china"}//json对象类型
      //数组和对象可以嵌套
}

JSON对象的遍历：获取JSON对象的所有键对应的所有值
for in 循环
for (var key in Obj){
Obj[key]
}

Obj代表要遍历的JSON对象，key代表遍历中的属性名，使用Obj[key]来得到属性值

代码

JSON数据和Java对象的相互转换
JSON解析器
常见的解析器：Jsonlib，Gson，fastjson，jackson

JSON转为Java对象
使用步骤

导入jar包
创建ObjectMapper对象
调用转换的方法

方法名	说明
T readValue(String jsonStr, Class<T> calss)	jsonStr:待转换的json字符串 clss：目标Java对象的class对象

Java对象转为JSON
使用步骤

导入jar包
创建ObjectMapper对象
调用转换的方法

转换方法

方法名	说明
writeValue(参数1，Object o)	参数1 1.传入File对象：将转换的json对象写入文件中 2.传入Writer:将转换的json对象写入字符输出流中 3.传入OutputStream；将转换的json对象写入字节输出流中 Object：待转换的Java对象
String writeValueAsString(Object o)	传入待转换的Java对象，返回该对象的JSON数据字符串

jackson注解
一下两个注解是注解在Java对象的属性上的
@JsonIgnore：转换成json对象时，忽略此属性
@JsonFormat(pattern ="yyyy年MM月dd日"):该属性（通常为date类型）在转换为json键值对时，会被格式化。相当于使用了SimpleDateFormat
代码
JavaBean
public class Person {
private String name;
private int age;
private boolean gender;

// @JsonIgnore//转换成json对象时，忽略此属性
@JsonFormat(pattern = "yyyy年MM月dd日") //JsonFormat注解的pattern属性，相当于使用simpleDateFormat来格式化日期
private Date birthDay;

…省略构造方法和getter/setter

测试类

案例：检查用户名是否存在
需求：
用户名在输入框中输入了用户名后，当输入框失去焦点，就检查该用户名是否存在，并给出提示信息
步骤：
1.给输入框绑定失去焦点事件，失去焦点时发送ajax请求，请求参数为输入的用户名
2.在服务器端获取username，检查是否存在
3.返回结果
代码
前端代码
服务器端代码