AJAX

AJAX引言

a)概念: ansychronous(异步) javascript(js) and xml(全称,异步javaScript and XML)

b)传统请求

i.发起传统的请求?

1.地址栏

2.超级链接

3.JavaScript:location.href

4.表单

ii.传统请求的问题

1.同步请求响应的是新的页面,所以用户就必须等待响应结果,才可以进行后续操作.

2.用户体验差

iii.异步请求的特点

1.响应的内容不是新的页面,是一个页面的局部信息,所以用户再使用异步请求的时候,不需要等待响应 .

iv.传统请求与异步请求的区别

1.响应内容

传统响应的内容:新的页面,刷新页面

异步响应的内容:页面的局部,字符串信息

2.对于用户的操作

传统的请求:等待响应

异步的请求:不需要等待响应,用户可以直接进行后续操作

v.建议在合适的场景下,都使用异步请求,提高用户的体验

异步请求的开发

a)什么是异步请求

javascript:XmlHttpRequest对象简称xhr

Chrome|FF|sofia中 XmlHttpRequest

var xhr = new XmlHttpRequest();

IE中 ActiveXObject

var xhr = new ActiveXObject(“Microsoft.XMLHHTP”);

b)xhr对象的使用

1.创建xhr对象

2.发送请求

a)如何发送请求

xhr.open("get | | post,url);

b)如何传递数据

xhr.send(null);

3.监听响应

xhr.readstate属性的值

0 xhr对象被创建,并没有调用send()方法时

1 xhr对象调用了send()方法,没有响应

2 xhr对象调用了send()方法,响应已经返回client

3 响应解析

4 响应解析完成,并可以使用

xhr.status 响应是否正确

响应码错误的响应码404,405,400,500 ,正确的响应码是200

xhr.onreadstatechange = function(){

//判断响应是否完成,响应是否正确

if(xhr.readstate4 && xhr.status200){

获得响应的文本 xhr.responseText

JavaScript 的DOM编程加入页面中

}

注意:使用ajax 服务器端不在进行页面的跳转,而是通过返回字符串信息,完成交互,request作用域,不使用.底层是用Response.getWriter()获取输出流,进行交互.

发送请求(post)

xhr.open(“POST”,url);

设置xhr.setRequestHeader(“content-type”,“application/x-www-form-urlencoded”);

为什么设置:模拟表单

基于web开发,只能使用表单提交数据,使用表单提交数据时默认指定enctype=“application/x-www-form-urlencoded”,但是现在使用ajax编程,不再使用<form标签了也就没有方式提供enctype属性对应的值了,那么这时候需要通过请求中手工设置application/x-www-urlencode来模拟表单.

xhr.send(“name=suns&pwd=123&sex=male”);

JSON协议串

JSON协议串,本质上就是一个字符串

作用:异构(不同的编程语言)的编程体系中,进行数据的传输,交互.

java中的对象或集合转换json协议串的格式:

java对象转json

User{           
    id=1;
    username="张三";
    password="123456";
}

json协议串
{"id":1,"username":"张三","password":"123456"}

java数组转json

java
String [] ids={"嘻嘻","哈哈","嘿嘿"};

json
["嘻嘻","哈哈","嘿嘿"]

java集合[list,set]转json

java

List<User>

User{
id=1;
username="小黑";
password="123456";
}

User{
id=2;
username="小白";
password="123456";
}

json

[{"id":1,"username":"小黑","password":"123456"},{"id":2,"username":"小白","password":"123456"}]

java的Map集合转json

java

Map<String,String>   maps = new HashMap<>();

maps.put("username","小黑");
maps.put("password","123456")
   
Map集合转json与对象形式保持一致

json

{"username":"小黑","password":"123456"}

json协议串转换工具

FastJSON(alibaba) GSON(GOOGLE) JACKSON(SpringMVC)

FastJSON的使用步骤

引入FastJSON的相关依赖
使用FastJSON进行转换
@JSONField注解
1. @JSONField(serialize=false) 作用:在进行JSON协议串转换时,排除该属性.
2. @JSONField(name=“name”) 作用:指定转换后json协议串的属性名
3. @JSONField(format=“yyyy-MM-dd”) 作用:指定日期转换格式
JSON协议串转换java对象或集合
1. JSON协议串转对象
  1. 类名引用名 = JSON.parseObject(jsonString,类名.class);
2. JSON协议串转List集合
  1. List users = JSON.parseArray(jsonString,User.class);
3. JSON协议串转set集合(Set类型)
  1. Set set = JSON.parseObject(jsonString,Set.class);
4. JSON协议串转Map
  1. ```
  Map <String,String> maps = new HashMap<>();
  maps.put("username","张三");
  maps.put("password","123456");
  String jsontoString = JSONtoString()
```

GSON的使用步骤

引入GSON的相关依赖

java中的集合和对象转JSON

User user = new User(1,"张三","123456");
Gson gson = new Gson;
String  json = gson.toJson(user);

JSON转对象或者集合

User user = new User(1,"张三","123456");
Gson gson = new Gson;
String  json = gson.toJson(user);
User  user1 = gson.fromJson(json,User.class);

Ajax_day1

AJAX

猜你喜欢