1. 同步请求和异步请求
- 同步请求: 基于超级链接, 地址栏, form表单,location.href 发起的请求全部为同步请求
特点: 请发之后, 刷新整张页面 - 基于ajax发起的请求为异步请求
特点: 多个请求并发执行, 请求之间互不影响, 请求之后页面不动, 响应回来刷新页面的局部
2. 概念
Ajax (Asynchronous Javascript And XML) 异步Javascript和XML
Ajax 它不是一种新的编程语言, 而是一种通过异步实现网页局部刷新技术
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
3. 核心对象
XMLHttpRequest对象, 存在浏览器的差异. 简称 xhr对象
4. 编程思想
- 创建xhr对象
屏蔽浏览器的差异
/*
* 1. 创建xhr对象 屏蔽浏览器内核的差异(IE Webkit)
* IE: IE6及以下使用的内核
* Webkit: IE6以上以及常见浏览器的内核
* 通过 window.XMLHttpRequest 获得true:Webkit | false:IE
* */
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp")
}
- 发送请求(有参数携带参数)
/*
* 2. 发送请求(携带参数)
* a. 初始化请求
* b. 发送请求
* */
---get---
xhr.open("请求方式Get","Url?参数")
xhr.send();
---post---
xhr.open("请求方式Post","Url")
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send("参数");
- 处理响应
/*
* 3. 处理完整,正确的响应
* a. xhr.onreadystatechange 监听readyState的变化
* b. xhr.readyState 请求的当前状态
* 0: 未初始化请求(未调用xhr.open())
* 1: 已初始化请求(调用xhr.open(),未调用xhr.send())
* 2: 发送请求(xhr.send())
* 3: 准备响应(非完整的响应)
* 4: 完整响应(处理局部刷新)
* c. xhr.status 响应状态码
* 200: 正确响应
* 400: 参数类型不匹配
* 404: 资源丢失,访问路径不正确
* 500: 服务内部出错
* d. xhr.responseText 获取服务器响应的字符串
* */
xhr.onreadystatechange = function() {
if(xhr.readyState==4 &&xhr.status==200){
var msg =xhr.responseText;
}
}
5. 数据传递机制
发送ajax请求只能响应字符串
- 如果服务端响应的不再是字符串而是对象或者是集合类型时,无法直接将对象响应给客户端
- 将对象转为json格式的字符串(借助类库将一个Java转化为Json字符串,以下三个类库,说一下阿里的fastjson的使用)
a. jackson
b. gson
c. fastjson --------阿里出品
在Maven项目中使用FastJson库,需要提前在Maven的配置文件中添加FastJson包的依赖
添加下面的依赖:
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.58</version>
</dependency>
将java对象/集合转换json
public class AjaxAction {
public String query() throws IOException {
//根据id查询的
ArrayList<Admin> list = new ArrayList<>();
Admin admin = new Admin("1", "zhangsan", 20, new Date());
Admin admin1 = new Admin("2", "lisi", 20, new Date());
Admin admin2 = new Admin("3", "wangwu", 20, new Date());
list.add(admin);
list.add(admin1);
list.add(admin2);
HttpServletResponse response = ServletActionContext.getResponse();
//设置相应类型
response.setContentType("text/plain;charset=UTF-8");
//将对象转换为json
/* String s = JSONObject.toJSONString(admin);基础转换*/
/* String s = JSONObject.toJSONStringWithDateFormat(admin, "yyyy-MM-dd");带有日期的转换*/
String s = JSONObject.toJSONStringWithDateFormat(list, "yyyy-MM-dd");
//输出
response.getWriter().print(s);
return Action.NONE;
}
}
- 前端接收要将json字符串转换为js对象
第一种方式:eval("("+xhr.responseText+")")
第二种方式:JSON.parse(xhr.responseText);
6. jQuery对Ajax的封装
- jQuery提供了一个全局函数
$.ajax({
type:"POST|GET",
url:"",
data:"name=张三|{key:value}",
dataType:"JSON",
success:function(data){
console.log(data);
}
})
- 发送GET方式的异步请求
$.get(url,data,function(data){},"JSON");
- 发送POST方式的异步请求
$.post(url,data,function(data){},"JSON");