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请求。