Ajax

• 1. 同步请求和异步请求
• 2. 概念
• 3. 核心对象
• 4. 编程思想
• 5. 数据传递机制
• 6. jQuery对Ajax的封装

1. 同步请求和异步请求

1. 同步请求: 基于超级链接, 地址栏, form表单,location.href 发起的请求全部为同步请求
   特点: 请发之后, 刷新整张页面
2. 基于ajax发起的请求为异步请求
   特点: 多个请求并发执行, 请求之间互不影响, 请求之后页面不动, 响应回来刷新页面的局部

2. 概念

Ajax (Asynchronous Javascript And XML) 异步Javascript和XML
Ajax 它不是一种新的编程语言, 而是一种通过异步实现网页局部刷新技术
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

3. 核心对象

XMLHttpRequest对象, 存在浏览器的差异. 简称 xhr对象

4. 编程思想

1. 创建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")
}

1. 发送请求(有参数携带参数)

/*
* 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("参数");

1. 处理响应

/*
* 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请求只能响应字符串

1. 如果服务端响应的不再是字符串而是对象或者是集合类型时,无法直接将对象响应给客户端
2. 将对象转为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;

}
}

1. 前端接收要将json字符串转换为js对象
   第一种方式：eval("("+xhr.responseText+")")
   第二种方式：JSON.parse(xhr.responseText);

1. jQuery提供了一个全局函数

$.ajax({
type:"POST|GET",
url:"",
data:"name=张三|{key:value}",
dataType:"JSON",
success:function(data){
console.log(data);
}
})

1. 发送GET方式的异步请求

$.get(url,data,function(data){},"JSON");

1. 发送POST方式的异步请求

$.post(url,data,function(data){},"JSON");