异步请求特点:某一个时刻,浏览器可以委托多个异步请求对象发送请求,无需等待请求处理完成
1、全局刷新和局部刷新:
1)全局刷新:整个浏览器被新的数据覆盖,在网络中传输大量的数据(浏览器需要加载,渲染页面)。
2)局部刷新:在浏览器的内部,发起请求,获取数据,改变页面中的部分内容,其余的页面无需加载和渲染(网络中数据传输量少, 给用户的感受好)。
ajax 是用来做局部刷新的,局部刷新使用的核心对象是【异步对象(XMLHttpRequest)】,这个异步对象存在浏览器内存中 ,使用 javascript 语法创建和使用。
2、Asynchronous JavaScript and XML:
ajax ---> Asynchronous JavaScript and XML(异步的 JavaScript 和 XML):
- xml 是网络中的一种传输的数据格式(json 替换了 xml)
1)ajax 是一种做局部刷新的新方法,不是一种语言,ajax包含的技术主要有 javascript , dom , css , xml 等等(核心是 javascript 和 xml)。
2)javascript 负责创建异步对象, 发送请求, 更新页面的 dom 对象,ajax 请求需要服务器端的数据。
3、ajax 中使用 XMLHttpRequest 对象(四步):
1)创建异步对象(第一步):
var xmlHttp = new XMLHttpRequest();
2)给异步对象绑定事件(第二步):
xmlHttp.onreadystatechange //当异步对象发起请求,获取了数据都会触发这个事件,这个事件需要指定一个函数,在函数中处理状态的变化
如何获取服务器端返回的数据?
- 使用异步对象的属性 responseText // xmlHttp . responseText
当请求的状态变化时,异步对象会自动调用 onreadystatechange 事件对应的函数(回调:当请求的状态变化时,异步对象会自动调用 onreadystatechange 事件对应的函数)
栗子:
xmlHttp.onreadystatechange= function(){
//处理请求的状态变化
if(xmlHttp.readyState == 4 && xmlHttp.status== 200 ){
//可以处理服务器端的数据,更新当前页面
var data = xmlHttp.responseText;
document.getElementById("name").value= data;
}
}
readyState(异步对象的属性) --- 异步对象请求的状态变化:
- 0:创建异步对象时 //new XMLHttpRequest ( ) ;
- 1:初始异步请求对象 //xmlHttp.open ( ) ;
- 2:发送请求 //xmlHttp.send ( ) ;
- 3:从服务器端获取了数据,注意3是异步对象内部使用, 获取了原始的数据
- 4:异步对象把接收的数据处理完成后,此时开发人员在4的时候处理数据(更新当前页面)
异步对象的 status 属性,表示网络请求的状况(200, 404, 500),当 status == 200 时,表示网络请求成功。
3)初始异步请求对象(第三步):
异步的方法:
- open ( ) . xmlHttp . open ( get / post , "服务器端的访问地址" , true / false ) // true 为异步请求,false 为同步请求 ,默认为 true
- 异步请求特点:
1)某一个时刻,浏览器可以委托多个异步请求对象发送请求,无需等待请求处理完成;
2)浏览器委托异步请求对象工作期间,浏览器处于活跃状态。可以继续向下执行其他命令;
3) 当响应就绪后再对响应结果进行处理 。
- 同步请求特点:
1)某一个时刻,浏览器只能委托一个异步请求对象发送请求,必须等待请求处理完成;
2)浏览器委托异步请求对象工作期间,浏览器处于等待状态。不能执行其他命令;
3)不推荐使用。
栗子:
xmlHttp.open("get", "loginServlet?name=zs&pwd=123",true);
4)使用异步对象发送请求(第四步):
xmlHttp.send();
4、json使用:
ajax(发起请求)---> servlet ---> 返回一个 json 格式的字符串(可以将 json 对象格式看作成一个 "key:value"格式) // { name:"河北", jiancheng:"冀","shenghui":"石家庄"}
json分类:
- json对象 ,JSONObject
- json数组, JSONArray // [ { name:"河北", jiancheng:"冀","shenghui":"石家庄"} , { name:"山西", jiancheng:"晋","shenghui":"太原" } ]
为什么要使用 json?
- json 格式好理解
- json 格式数据在多种语言中,比较容易处理。 使用 java, javascript 读写 json 格式的数据比较容易
- json 格式数据它占用的空间小,在网络中传输快, 用户的体验好
处理 json 的工具库: gson(google); fastjson(阿里),jackson, json-lib
- 在 js 中,可以把 json 格式的字符串,转为 json 对象, json 中的 key,就是 json 对象的属性名。