Ajax基础学习
1.ajax前端技术
前端技术:在浏览器中执行的程序都是前端,HTML,css,js等
后端技术
(1)全局刷新:使用form,href等发起的请求是全局刷新
用户发起请求,视图改变了,使用新的数据添加到页面
缺点:
1.传递数据量比较大,占用网络的带宽
2.浏览器需要重新渲染整个页面
3.用户的体验感不好
(2)局部刷新:在当前页面中,发起请求,获取数据,更新当前页面的dom对象,对视图部分刷新
(异步对象,在浏览器内存中的JavaScript对象,各大浏览器都能支持异步对象
异步对象 XMLHttpRequest
)
特点:
1.数量比较小,在网络中传输速度快
2.更新页面内容,是部分更新页面,浏览器不用全部渲染视图
3.在一个页面中,可以做多个局部刷新
4.从服务器获取数据,拿到更新视图
2.异步请求对象
在局部刷新中,使用异步请求对象,在浏览器内部发起请求,
3.异步对象XMLHttpRequest接收
js中的一种对象,使用js语法创建和使用这个对象
var xhr = new XMLHttpRequest();
之后就可以使用xhr对象的属性或者函数,进行异步对象的操作。
使用异步对象实现局部刷新,异步对象主要是负责发起请求,传递请求的参数并从服务器端接收数据。(网络操作)。
局部刷新需要的技术
1)JavaScript:创建XMLHttpRequest对象,调用它的属性或者方法
2)dom:处理dom,更新select的数据
3)css:处理视图,更新,美化
4)servlet:服务器端技术
5)数据的格式:json。之前是xml
把上面这些技术的综合使用叫做ajax,
4.Ajax
AJAX = Asynchronous Javascript And XML(异步JavaScript和XML),是一种无需重新加载整个页面的情况下,能够更新部分页面的新方法
AJAX不是一种新的语言,是多种技术的综合使用,包含了dom,javascript,jsp,jdbc等
我们使用ajax实现局部刷新
Ajax的核心是JavaScript和xml(json):使用JavaScript操作异步对象XMLHttpRequest和服务器交换使用的json格式。
5.异步对象XMLHttpRequest的属性和方法
1.创建异步对象,使用js语法
var xhr = new XMLHttpRequest();
2.XMLHttpRequest方法
open(请求方式,服务器端的访问地址,异步还是同步,true代表异步)
xhr.open("get","login",true)
send():使用异步对象发送请求
3.XMLHttpRequest属性
readyState属性:请求的状态
0:表示创建异步对象时,new XMLHttpRequest();
1:表示初始异步对象的请求参数,执行open方法
2:表示使用send()方法发送请求。
3:表示使用异步对象从服务器端接收了数据
4:异步对象接收了数据,并在异步对象内部处理完成后
status属性:网络的状态,和Http的状态码对应
200:表示请求成功
404:表示服务器端资源未找到
500:服务器内部代码有错误
responseText属性:表示服务器端返回的数据
例如:
var data = xhr.responseText;
6.异步对象XMLHttpRequest使用步骤
1)使用js创建异步对象
var xhr = new XMLHttpRequest();
2)给异步对象绑定事件,事件名称onereadystatechange
例如button增加单击事件 onclick
xhr绑定事件
xhr.onreadystatechange = function{
//当事件发生时执行的代码
}
在绑定事件中做什么,根据readyState值做请求
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && status ===200){
//从服务器端已经获取数据,更新当前的dom对象,完成请求的处理
var data = xhr.responseText;
//更新dom对象
documen.getElementByTd("#mydiv").innerHTML = data;
}
}
3)初始请求的参数,执行open函数
xhr.open("get","loginSerlet",true)
4)发送请求,执行send()
xhr.send()
使用ajax关注的是:
使用异步对象XMLHttpRequest发起请求,接收数据,更新dom对象,
ajax操作中,处理的是数据,从服务器端接收数据,没有视图
ctrl+shift+delete清空浏览器缓存
7.同步与异步
看open(请求方式,访问url,boolean是不是异步的)
true:异步请求(相当于可以同时进行多个请求处理,不需要考虑当前的请求是否被响应)
false:同步请求(相当于一次只执行一次请求处理)
还没有评论,来说两句吧...