Ajax自学笔记

最新推荐文章于 2024-06-09 20:17:27 发布

Lanbda1

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量115

点赞数 1

文章标签： Ajax 前端前后端交互

本文链接：https://blog.csdn.net/weixin_42887972/article/details/103357826

版权

Ajax自学笔记

一、概念

Ascynchronous JavaScript And XML 异步的JavaScript和XML，Ajax是一种在无需重新加载整个页面的情况下，能够更新网页内容的技术。

二、实现方式

1. 原生的Js实现方式(了解即可)

发送异步请求：

创建核心对象

var xmlhttp;
if(window.XMLHttpRequest)
    {	//如果是IE7+,FireFox,Chrome,Opera,Safari浏览器，则采用这种方式创建对象
        xmlhttp=new XMLHttpRequest();
    }
else
    {
        //低版本浏览器创建核心对象
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

建立连接请求

xmlhttp.open("GET","ajaxServlet?username=tom",true)
/*
	参数说明：1.请求方式:GET或POST 
				GET方式请求参数在URL后拼接，send方法为空参
				POST方式请求参数在send方法中定义
			2. 请求的url
			3. 同步或异步请求:true 异步 false 同步
*/

发送请求
```
xmlhttp.send("username=tom");
```

响应

//当服务器响应成功后才能获取响应
//当xmlhttp对象的就绪状态改变时会触发事件onreadystatechange.
xmlhttp.onreadystatechange=function(){
    //判断就绪状态是否为4(请求已完成且响应已就绪)，判断响应状态码是否为200(响应成功)
    if(xmlhttp.readtState==4 && xmlhttp.status==200){
        //获取服务器的响应结果
        var result=xmlhttp.responseText;
        alert(result);
    }
}

2. JQeury实现方式(必须引入JQuery文件)

$.ajax()

语法：$.ajax({键值对});

$.ajax({
    url: "ajxServlet",//请求路径
    type: "POST",//请求方式，默认为GET
    //data: "username=jack&age=23",//设置请求的参数
    data:{"username":"jack","age":23},//json格式设置请求参数
    success:function(data){
        alert(data);
    },//设置响应成功后的回调函数
    error:function(){
        alert("ops!")
    },//表示如果请求响应出现错误，会执行的回调函数
    dataType:"text"//设置接收到的响应数据的格式,text为纯文本
})

$.get() 发送get请求

$.get(url,[data],[callback],[type])
//url:请求路径
//data：请求参数
//callback：回调函数
//type：响应结果的类型
function fun(){
    $.get("ajaxServlet",{username:"Tom"},function(data){
        alert(data)
    },"text")
}

$.post() 发送post请求

同上

JSON

一、概念

JavaScript Object Notation JavaScript对象表示法

//Java表示
Person p=new Person();
p.serName("张三");
p.setAge(23);
p.setGender("男");

//JSON表示
var p={"name":"张三","age":23,"gender":"男"};

json现在多用于存储和交换文本信息的语法，进行数据的传输。

二、语法

1. 基本规则

数据在名称/值中:

json数据是由键值对构成的，键用引号(单双都行)引起来，也可以不用引号
- 值的取值类型
  - 数字
  - 字符串
  - 逻辑值
  - 数组(在方括号中)
  - json对象(在花括号中):{“adress”:{“province”:“四川”…}}
  - null
数据由逗号分隔
花括号保存对象：使用{}定义json格式
方括号保存数据

2. 获取数据

json对象.键名
json对象[“键名”]
数组对象[索引]

var person={"name":"张三","age":16,"gender":"男"};//定义基本格式
var persons=[
    {"name":"张三","age":16,"gender":"男"},
    {"name":"李四","age":17,"gender":"女"},
    {"name":"王五","age":18,"gender":"女"},
    {"name":"赵六","age":19,"gender":"男"}
]//以数组方式定义多个json对象
//获取person中的数值
for(var key in person){
    alert(key+":"+person[key]);
}
//双重循环获取persons中的数值
for(var i=0;i<persons.length;i++){
    //外循环获取对象
    var p=persons[i];
    //内循环获取对象内的值
    for(var key in p){
        alert(key+":"+p[key]);
    }
}

三、JSON解析器

1.常见的解析器

Jsonlib,Gson,fastjson,jackson

2. JSON字符串数据转换为Java对象

(1) 使用步骤

导入jackson的相关jar包
创建jackson核心对象ObjectMapper

调用ObjectMapper的相关方法进行转换

readValue(json字符串数据,Class)

@Test
public void Test5()throws Exception{
    //1.初始化一个json字符串
    String json="{\"gender":\"男",\"name":\"张三",\"age":16}";
    //2.创建一个ObjectMapper对象
    ObjectMapper mapper=new ObjectMapper();
	//3.转换为Person对象
	Person person=mapper.readValue(json,Person.class);//返回一个Person对象
}

3.Java对象转换为JSON(结果为字符串)

(1) 使用步骤

导入jackson的相关jar包
创建jackson核心对象ObjectMapper

调用ObjectMapper的相关方法进行转换

//人的Model类
public class Person{
    private String name;
    private int age;
    private String gender;
    public String getName(){
        return this.name;
    }
    public int getAge(){
        return this.age;
    }
    pubic String getGender(){
        return this.gender;
    }
    public void setName(String name){
        this.name=name;
    }
    public void setAge(int age){
        this.age=age;
    }
    public void setGender(String gender){
        this.gender=gender;
    }
}

//java对象转json测试
import org.junit.Test
public class JacksonTest{
    @Test
    public void test1() thows Exception{
        //1.创建Person对象
        Person p=new Person();
        p.setName("张三");
        p.setAge(16);
        p.setGender("男");
        //2.创建Jackson的核心对象 ObjectMapper
        ObjectMapper mapper=new ObjectMapper();
        //3.调用方法转换
        /*
        	方法：
        	WriteValue(参数1，obj对象)
        		参数1：
        		  File:将obj对象转换为json字符串，并保存到指定到的文件中
        		  Writer:将obj对象转换为json字符串，并将json数据填充到字符输出流中
        		  OutputStream:将obj对象转换为json字符串，并将json数据填充到字节输出流中
        	writeValueAsString(obj):将对象转换为json字符串
        */
        String result=mapper.writeValaueAsString(p);
       	//输出的结果:{"name":"张三","age":23,"gender":"男"}
        mapper.writeValue(new File("d://a.txt"),p);//将结果保存在d盘a.txt文件中
    }
}

(2) 注解

@JsonIgnore:排除属性

@JsonFormat:属性值的格式化

public class Person{
    private String name;
    private int age;
    private String gender;
    //@JsonIgnore (忽略该属性，不把它转换为json)
    @JsonFormat(pattern="yyyy-MM-dd")//将日期转换为特定格式的日期
    private Date birthday;
    public Date getBirthday(){
        return this.birthday;
    }
    public String getName(){
        return this.name;
    }
    public int getAge(){
        return this.age;
    }
    pubic String getGender(){
        return this.gender;
    }
    public void setName(String name){
        this.name=name;
    }
    public void setAge(int age){
        this.age=age;
    }
    public void setGender(String gender){
        this.gender=gender;
    }
    public void setBirthday(Date birthday){
    	this.birthday=birthday;
    }
}

@Test
public void test2(){
    Person p=new Person();
    p.setName("张三");
    p.setAge(23);
    p.setGender("男");
    p.setBirthdat(new Date());
    ObjectMapper mapper=new ObjectMapper();
    String json=mapper.writeValueAsString(p);
}

(3) 复杂java对象转换

List对象

@Test
public void test3(){
    Person p=new Person();
    p.setName("张三");
    p.setAge(23);
    p.setGender("男");
    Person p1=new Person();
    p1.setName("李四");
    p1.setAge(16);
    p1.setGender("女");
  	Person p2=new Person();
    p2.setName("王五");
    p2.setAge(18);
    p2.setGender("男");
    List<Person> list=new List<Person>();
    list.add(p);
    list.add(p1);
    list.add(p2);
    ObjectMapper mapper=new ObjectMapper();
    //结果与JQuery中对象数组的表示一致
    String jason=mapper.writeValueAsString(list);
}

Map对象

@Test
public void Test3(){
    Map<String,Object> map=new HashMap<String,Object>();
    map.put("name","张三");
    map.put("age",16);
    map.put("gender","男");
    ObjectMapper mapper=new ObjectMapper();
    //结果与标准json格式一致
    String json=mapper.writeValueAsString(map);
}

String(list);
}

Map对象




@Test
public void Test3(){
    Map<String,Object> map=new HashMap<String,Object>();
    map.put("name","张三");
    map.put("age",16);
    map.put("gender","男");
    ObjectMapper mapper=new ObjectMapper();
    //结果与标准json格式一致
    String json=mapper.writeValueAsString(map);
}

Lanbda1

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax自学笔记

Ajax自学笔记一、概念 Ascynchronous JavaScript And XML 异步的JavaScript和XML，Ajax是一种在无需重新加载整个页面的情况下，能够更新网页内容的技术。异步和同步(基于客户端与服务器端)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WJoXMVH4-1575294258207)(C:\Users\Benhk...
复制链接

扫一扫