Ajax
1.1 ajax简介
Ajax全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML)，是一种创建交互式网页应用的网页开发技术。
Ajax是一种无需重新加载整个页面的情况下，能够更新部分网页的技术。
Ajax = 异步 JavaScript和XML。
同步：同步方法调用一旦开始，调用者必须等到方法调用返回后，才能继续后续的行为。
异步：异步方法调用更像一个消息传递，一旦开始，方法调用就会立即返回，调用者就可以继续后续的操作。
Ajax通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个页面的情况下，对网页的某部分进行更新。
传统的网页（不适用Ajax）如果需要更新内容，必须重载整个网页。
有很多使用Ajax的应用案例程序案例：新浪微博、Google地图、开心网等；
1.2 XMLHttpRequest
XMLHttpRequest对象
XMLHttpRequest是Ajax的基础，所有现在浏览器均支持XMLHttpRequest对象(IE5和IE6使用ActiveXObject)。
所有现代浏览器（IE7+、Firefox、Chrome、Safari以及Opera）均内建XMLHttpRequest对象。
XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个页面的情况下，对页面的某部分进行更新。
XMLHttpRequest使用流程
1、创建XMLHttpRequest对象
2、请求（同步或者异步请求）
3、响应
Request的Open方法
注意：默认方法是异步的，也就是开子线程，同步方法已经被废弃，不能再用
1.3 Ajax准备状态码
request.readyState
0:请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪
1.4 Http响应状态
request.status
200：‘OK’
404：未找到页面
405：用来访问本页面的HTTP方法不被允许，也就是post不能请求get
1.5 获取响应数据
request.responeText
1.6 登录的get案例
Step1:写一个get登录表单
Step2:写一个LoginServlet
Step3:ajax的get请求
1.7 登录的post案例
ajax的post请求流程
1.创建请求对象
2.连接
3.设置content-type请求头（如果不设置请求头，发送请求会失败）
4.发送请求，传递请求参数
5.接收响应
2 JSON字符串
1.JSON指的是JavaScript对象表示法（JavaScript Object Notation）
2. JSON 是轻量级的文本数据交换格式
3. JSON独立于语言
4. JSON具有自我描述性，更易理解。
2.1 Json字典
相当于java的map（键值对）{“firstName”：“Bill”，“lastName”：“Gates”}
2.2 Json数组
相当于数组里存了map,字典
[
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
]
2.3 Json字典
字典里面存数组
{
"employees": [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
]
}
2.4 js中的json对象和字符串相互转换
3.1 Jackson简介
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json字符串和xml文档，同样也可以将json、xml转换成Java对象。Jackson所依赖的jar包较少，简单易用并且性能也要相对高些，并且Jackson社区相对比较活跃，更新速度也比较快。
3.2 jackson特点
1、容易使用- jackson API提供了一个高层次外观，以简化常用的用例。
2、无需创建映射- API提供了默认的映射大部分对象序列化。
3、性能高-快速，低内存占用，适合大型对象图表或系统。
4、干净的JSON - jackson创建一个干净和紧凑的JSON结果，这是让人很容易阅读。
5、不依赖-库不需要任何其他的库，除了JDK。
6、开源代码- jackson是开源的，可以***。
3.3对象转json字符串案例
3.4 json字符串转对象
String str = "{\"id\":\"1001\",\"name\":\"Java入门\",\"price\":19.88,\"pnum\":100,\"category\":\"IT\",\"description\":\"Good Book\"}";
System.out.println(str);//创建 "对象映射" 对象
ObjectMapper mapper = new ObjectMapper();
Book book = mapper.readValue(str, Book.class);
System.out.println(book);
4 ajax处理json数据
5 get请求中文处理
1.请求的url后面的参数不能传中文
2.工作中对get请求对中文进行url编码
3.url编码是什么
URL编码遵循下列规则： 每对name/value由&；符分开；每对来自表单的name/value由=符分开。如果用 解码软件 解码软件 户没有输入值给这个name，那么这个name还是出现，只是无值。任何特殊的字符（就是那些不是简单的七位ASCII，如汉字）将以百分符%用十六进制编码，当然也包括象 =,&；，和 % 这些特殊的字符。其实url编码就是一个字符ascii码的十六进制。
js提供的url编码和解码
encodeURIComponent编码与decodeURIComponent 解码
encodeURI与decodeURIL
encodeURI()与encodeURIComponent()区别
两者的区别在于,encodeURI函数不会对以下的字符进行处理： “! @ # $ & * ( ) = : / ; ? + ' ”
推荐使用encodeURIComponent()
f]默认情况下ajax,浏览器会对url进行编码
案例：
<script type="text/javascript">
var urlStr = 'LoginServlet?username=张三丰&password=123';
//1.对字符串进行url编码,会对一些特殊字符串,比如中文,:,&,?号进行编码
var u1 = encodeURIComponent(urlStr);
var u2 = encodeURI(urlStr)
console.log(u1);
console.log(u2);
//2.对url进行解码,还原原始模样
console.log(decodeURIComponent(u1));
console.log(decodeURIComponent(u2));
</script>
对前面get请求进行url编码
6 ajax的兼容性问题
var request;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari浏览器执行代码
request=new XMLHttpRequest();
}
else
{
// IE6, IE5浏览器执行代码
request=new ActiveXObject("Microsoft.XMLHTTP");
}
7. 总结
工作中使用ajax是用于发送get/post的网络异步请求，工作中用的更多的是jquery封装好的get/post请求。
京公网安备 11010502036488号