关于Ajax异步请求
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编程,不再使用 xhr.send(“name=suns&pwd=123&sex=male”); JSON协议串 JSON协议串,本质上就是一个字符串 作用:异构(不同的编程语言)的编程体系中,进行数据的传输,交互. java中的对象或集合转换json协议串的格式: java对象转json java数组转json java集合[list,set]转json java的Map集合转json json协议串转换工具 FastJSON(alibaba) GSON(GOOGLE) JACKSON(SpringMVC) FastJSON的使用步骤 引入FastJSON的相关依赖 使用FastJSON进行转换 @JSONField注解 JSON协议串转换java对象或集合 JSON协议串转对象 JSON协议串转List集合 JSON协议串转set集合(Set类型) JSON协议串转Map GSON的使用步骤 引入GSON的相关依赖 java中的集合和对象转JSON JSON转对象或者集合User{
id=1;
username="张三";
password="123456";
}
json协议串
{"id":1,"username":"张三","password":"123456"}
java
String [] ids={"嘻嘻","哈哈","嘿嘿"};
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<String,String> maps = new HashMap<>();
maps.put("username","小黑");
maps.put("password","123456")
Map集合转json与对象形式保持一致
json
{"username":"小黑","password":"123456"}
Map <String,String> maps = new HashMap<>();
maps.put("username","张三");
maps.put("password","123456");
String jsontoString = JSONtoString()
User user = new User(1,"张三","123456");
Gson gson = new Gson;
String json = gson.toJson(user);
User user = new User(1,"张三","123456");
Gson gson = new Gson;
String json = gson.toJson(user);
User user1 = gson.fromJson(json,User.class);