一、AJAX
1. 什么是同步,什么是异步
- 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端处于等待状态。
- 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以做其他的事情。无非一直等待整个页面刷新完毕。
2.全局刷新和局部刷新
- 全局刷新:整个浏览器被新的数据覆盖。在网络中传输大量的数据。浏览器需要加载,渲染页面。
- 局部刷新:在浏览器的内部,发起请求,获取数据,改变页面中的部分内容。
其余的页面无需加载和渲染。网络中数据传输量少,给用户的体验感好。
3. Ajax的运行原理
页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到服务器端,在这段时间里,客户端可以任意进行任意操作,直到服务器端将数据返回 给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面功能。
ajax是用来做局部刷新的,局部刷新使用的核心对象是异步对象(XMLHttpRequest
)
这个异步对象是存在浏览器内存中,使用JavaScript
语法创建和使用XMLHttpRequest
t对象。
4.原生Ajax的运行步骤
1)创建异步对象
var xmlHttp = new XMLHttpRequest();
2)给异步对象绑定事件 onreadystatechange
当异步对象发起请求,获取了数据都会出发这个事件。onreadystatechange
,这个事件需要指定一个函数,在函数中处理状态的变化。
例如:我们定义一个按钮,那么我们绑定点击事件之后,事件之内也应该书写一个函数来处理数据变化。
btn.onclick fun1(){
function fun1(){
alert("按钮点击事件");
}
}
一般地,我们会配合异步对象,也就是第一步中写的var xmlHttp = new XMLHttpRequest()
中的xmlHttp对象
的状态变化,来响应事件
xmlHttp.onreadystatechange = function(){
//处理请求的状态变化
if(xmlHttp.readyStata ==4 && xmlHttp.status == 200){
//可以处理服务器端的数据,更新当前页面
var data =xmlHttp.responseText;
document.getElementById("name").value="data";
}
}
异步对象的属性 readyStata 表示异步对象请求的状态变化
- 0:创建对象时,new XMLHttpRequest();
- 1: 初始异步请求对象,xmlHttp.open();
- 2: 发送请求,xmlHttp.send();
- 3: 从服务器端获取了数据,此时3。注意3是异步对象内部使用,表示获取了原始的数据(开发不用)
- 4:异步对象把接受的数据处理完成后,此时开发人员在4的时候处理数据
在4的时候,开发人员做什么?更新当前页面,在页面中展示数据。
异步对象的status属性,表示网络请求的状况的:
- 200:需要时当status==200时,表示网络请求是成功的。
- 404:请求失败。
3)初始异步请求对象
异步的方法open().
xmlHttp.open(请求方式get|post,"服务器端的访问地址",同步|异步请求(默认为true表异步))
例如:
xmlHttp.open("get","loginServlet?name =zhangsan&password=123",true);
4)使用异步对象发送请求
xmlHttp.send()
获取服务器端返回的数据,使用异步对象的属性 responseText
使用例子:xmlHttp.responseText
二、Json数据格式(重要)
1. json作用及好处:
- 使用ajax进行前后台数据交换
- 移动端与服务端的数据交换
2. Json的格式和解析
Json有两种格式:
- 对象格式:
{"key1":obj,"key2":obj,"key3":obj...}
- 数组/集合格式:
[obj,obj,obj...]
例如:user对象用json数据格式表示
{"username":"zhangsan","age":28,"password":"123","addr":"北京"}
例如:List 用json数据格式表示
[{"pid":"10","pname":"小米4C"},{},{}]
注意:对象格式和数组格式可以互相嵌套
注意:json的key是字符串 json的value是Object
json的解析:json是js的原生内容,也就意味着js可以直接取出json对象中的数据
案例:
在js中,可以把json格式的字符串,转换为json对象,json中的key,就是json对象的属性名
//eval是执行括号中的代码,把json字符串转换为json对象
var jsonObj =eval("("+data=")");
doucument.getElementById("name").value=jsonObj.name;
doucument.getElementById("age").value=jsonObj.age;
三、JSON练习
练习一:对象创建方式
<script language="JavaScript">
/**
* {key:value,key:value}
*
* class Person{
* String firstname = "张";
* String lastname = "三";
* Integer age = 100;
* }
*/
//对象创建方式
var Person={
"firstname":"张",
"lastname":"三丰",
"age":100
}
//取firstname
alert(Person.firstname);
//取lastname
alert(Person.lastname);
//取age
alert(Person.age);
</script>
练习二:数组创建方式
<script language="JavaScript">
//数组创建方式
var Persons=[
{ "firstname":"张", "lastname":"三", "age":100},
{"firstname":"李", "lastname":"四", "age":25},
];
//取出firstname=李
alert(Persons[1].firstname);
//取出100
alert(Person[0].age)
</script>
练习三:对象+数组创建方式
<script language="JavaScript">
//对象+数组方式
var json={
"student":[
{"name":"zhangsan","age":18,addr="安徽"},
{"name":"lisi","age":20,addr="北京"},
{"name":"wangwu","age"21,addr="上海"}
]
};
//取出lisi的名字
alert(json.student[1].name);
//取出王五的年龄
alert(json.student[2].age);
</script>
练习四:对象+多个数组创建方式
<script language="JavaScript">
//对象+多个数组实现方式
var json={
"student":[
{"name":"zhangsan","age":18,addr="安徽"},
{"name":"lisi","age":20,addr="北京"},
{"name":"wangwu","age"21,addr="上海"}
]
},"teacher":[
{"name":"sjf","age":28,addr="安徽"},
{"name":"yjw","age":30,addr="北京"},
{"name":"jj","age"26,addr="上海"}
]
};
alert(json.teacher[0].name);
alert(json.teacher[1].age);
</script>
练习五:对象+数组混搭模式
<script language="JavaScript">
/**
* "param1":"value1",
* "param2":{},
*"param3":[{key:value,key:value},{key:value,key:value}]
* }
*/
var json={
"key1":"value1",
"key2":{"firstname":"张","lastname":"三","age":100"},
"key3":[
{"name":"sjf","age":28,addr="安徽"},
{"name":"yjw","age":30,addr="北京"},
{"name":"jj","age"26,addr="上海"}
]
};
alert(json.key2.lastname);
alert(json.key3.);
</script>
五、JSON插件
=插件的作用:
将java的对象或集合转成json形式字符串
json的转换插件是通过java的一些工具,直接将java对象或集合转换成json字符串。
常用的json转换工具有如下几种(也就是jar包):
- gson(google出品)
- fastjson(阿里巴巴出品)速度快,不是最符合json处理规范
- jackson性能好,规范好
- json-lib
在js中的,可以把json格式的字符串,转为json对象, json中的key,就是json对象的属性名
以jackson为例
例如:
Person p = new Person();
ObjectMapper om = new ObjectMapper()
//writeValueAsString:把参数的java对象转为json格式的字符串
String json = om.writeValueAsString("对象名");
System.out.print("转换的json=="+json)