Ajax
-
针对于前端的语言,是JS,HTML,CSS等前端语言的整合
局部刷新和全局刷新
-
全局刷新
-
全局刷新是网站全部内容都会被替换,在网络中含有大量的数据,浏览器需要加载,渲染页面
-
-
局部刷新
-
局部刷新是在原有的网站基础不变的情况下对局部的内容进行更新,其余页面不需要加载或是渲染,网络中传输的量少,对用户比较友好,目前应用广泛
-
-
Ajax就是来做局部刷新的
AJAX组成
-
Asynnchronous:异步
-
JavaScript:javascript脚本,在浏览器中运行
-
and:和
-
xml:是一种数据格式
XMLHttpRequest(异步对象)
-
这个对象是存在浏览器内存中的,是由JS语法创建和使用XMLHttpRequest对象
-
创建XMLHttpRequest对象的语法(xhr)
-
var xmlhttp=new XMLHttpRequest
-
AJAX中的核心对象就是XMLHttpRequest
-
在Ajax中使用XMLHttpRequest对象
-
第一步:创建异步对象
-
var xmlhttp=new XMLHttpRequest
-
-
第二步:给异步对象绑定事件(onreadystatechange:当异步对象发起请求,获取了数据都会触发这个事件,这个事件需要指定一个函数,在函数中处理状态的变化)
-
格式:
-
xmlhttp.onreadystatechange=function(){ //处理请求的状态变化 if(xmlhttp.readyState==4&&xmlhttp.status==200){ //可以处理服务器端的数据,更新当前页面 var data=xmlHttp.responseText; document.getElementById("name").value=data; } }
-
-
-
XMLHttpRequest对象的三个重要属性:
-
onreadystatechange属性:一个js函数名或直接定义函数,每当readyState属性改变时,就会调用该函数
-
readyState属性:
-
存有XMLHttpRequest的状态,从0到4发生变化
-
0:请求未初始化,创建异步请求对象var xmlhttp=new XMLHttpRequest
-
1:初始化异步请求对象,xmlHttp.open(请求方式,请求地址,true)
-
2:异步对象发送请求,xmlHttp.send()
-
3:异步对象接受应答数据,从服务器端返回数据,XMLHttpRequest内部处理
-
4:异步请求对象已经将数据解析完毕,此时才可以读取数据(更新当前页面)
-
-
status属性:
-
200:"OK"
-
404:未找到界面
-
-
-
第三步:初始化异步请求对象
-
异步对象的方法open()
-
xmlHttp.open(请求方式(get/post),请求地址,true(异步(true)/同步(false))
-
-
-
第四步:使用异步对象发送请求
-
xmlHttp.send()
-
-
获取服务器端返回的数据,使用异步对象的属性responseText
-
使用格式:xmlHttp.response
-
-
Ajax会有回调机制:当请求的状态发生变化时,异步对象会自动调用onreadystatechange事件所对应的函数
json的使用
-
Ajax发起请求------servlet(返回一个json格式的字符串{name:"河北",jiancheng:"冀",shenghui:"石家庄"})
-
json的分类:
-
json对象,JSONObject,这种对象的格式,名称:值,也可以看作key:value的格式
-
json数组,JSONArray,基本格式[{name:"河北",jiancheng:"冀",shenghui:"石家庄"}]
-
-
json的优点
-
json格式容易理解
-
json格式数据在多种语言中,比较容易处理,使用Java,JavaScript读写json格式的数据比较容易
-
json格式数据占用的空间小,在网络中传输速度快,用户体验好
-
-
在JS中,可以把json格式的字符串,转为接送对象,json中的key就是json对象的属性名
同步和异步的区别
-
异步请求处理
-
使用异步对象发起请求后,不用等待数据处理完毕,就可以执行其他的操作
-
可以同时执行多条语句,效率较高
-
-
同步请求处理
-
在任意时刻只能执行一个异步请求
-
必须在异步对象处理完成请求,从服务器端获取数据后,才能执行send之后的代码
-
效率较低
-