全局刷新:
1)浏览器发起请求, 服务器端返回数据和视图。
2)这些数据全部替换原来的浏览器的数据。
3)需要在网络中传输大量的数据
4)视图(jsp,html)需要更新全部。
5)处理请求的时间会更长。
局部刷新:
1)不是由浏览器发起的请求, 是浏览器内存中的一个对象他发起的请求。
这个对象叫做异步对象, 这个异步对象代替浏览器请求发起去。
这个对象对象具有浏览器发请求,接收数据的功能
2)局部刷新需要向服务器发起请求,获取的只有数据,没有视图。
把数据更新到当前视图页面,更新某些dom对象的数据
3)异步对象可以发起请求,传递参数
4)异步对象可以更新dom数据
5)局部刷新,获取的少量数据,只更新部分dom对象。处理请求的速度更快。
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
局部刷新在开发中使用的是AJAX技术, 换句话说AJAX就是局部刷新。AJAX就是局部刷新的实现。
AJAX:用来实现局部刷新的,核心是异步对象(XMLHttpRequest).AJAX不是一种新技术
他是利用现有的各种技术的一种组合方式。AJAX的实现主要使用的javascript和json(xml),
同时需要有css,dom以及服务器端(jsp,servlet,jdbc)的支持
javascript:创建异步对象XMLHttpRequest, 使用异步对象发起请求,处理数据。响应事件。
xml: ajax出现在2003前后,出现的比较早,当时使用的是xml作为数据格式。
xml:能表示,但是他的占用的空间比较大,在网络中传输比较慢。
后来出现的json,json小巧,轻便。各种语言都支持json的处理。现在使用json作为数据的交互格式。
json替换了xml,作为数据的格式。
异步对象:XMLHttpRequest
XMLHttpRequest在各种浏览器中都可以使用, ie,fireforx, chrome等等,他是使用js语法处创建的。
var xmlHttp = new XMLHttpRequest();
异步对象能做什么:
1.发起请求
2.传递参数
3.接收服务器端返回的结果数据(json)
4.接收数据后可以js去更新dom对象的数据。
使用异步对象XMLHttpRequest,实现AJAX的局部刷新。
概念:AJAX是局部刷新的技术实现, 在AJAX中核心是XMLHttpRequest对象。
这个XMLHttpRequest叫做异步对象,他处理的请求也叫做异步请求。
实现ajax,异步请求的步骤:
1.使用js语法创建异步对象
var xmlHttp = new XMLHttpRequest();
使用一般对象发起请求,传递请求参数,接收服务器返回的结果。
2.绑定事件onreadystatechange,可以响应网络请求的变化。
就相当于按钮单击会触发一个click, 异步对象XMLHttpRequest发起请求,接收数据都会执行onreadystatechange事件。
onreadystatechange:指定一个function, 当请求接收数据发生变化时,会执行这个函数function.
异步对象请求,会发起请求,传递参数,接收结果数据。这个过程中会多次执行onreadystatechange对应的function
例如: xmlHttp.onreadystatechange=function(){
多次执行的,处理请求的变化,接收结果数据时的变化
alert(xmlHttp.readyState)
//处理服务器返回数据的时机
if( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) {
处理服务器端返回的数据,更新当前页面中的dom对象
}
}
也可以先定义function,在指定这个function
function myfun() { 处理请求 }
xmlHttp.onreadystatechange = myfun;
在绑定事件,要知道请求的变化,接收数据,使用异步对象XMLHttpRequest的属性,readyState.
readyState属性值:
0:初始化异步对象, 在异步对象内部使用的值,不关心
1:初始化异步对象, 在异步对象执行open方法时, readyState是1.
2:发起请求,执行异步对象的send()方法时。
3:异步对象从服务器端接收了数据。这个数据是原始的数据,没有经过XMLHttpRequest对象处理
4:异步对象把3中的原始数据处理后的状态。比如把3接收到json格式的数据转为js中的json对象。
200 ,404, 500这样的状态码, 网络请求状态是通过XMLHttpRequest的status属性表示, status可能是200,404,500等等
希望是200, 200表示网络请求是成功的
3.初始化异步对象,指定请求的uri地址,请求的参数等等
执行XMLHttpRequest的open()方法
open(method,url,async)
method:请求方式,是get,还是post
url:服务器端的访问地址,也就是某个servlet地址。
async:一个boolean值,表示异步请求,还是同步请求。 默认true表示异步请求。
例如:访问的servlet是 /loginservlet
xmlHttp.open(“get”,"/loginservlet",true)
4.使用XMLHttpRequest异步对象发起请求。
xmlHttp.send()方法。
说明:当执行send()方法时,会像loginservlet发起请求,同时会执行onreadstatechange()时间的function。
5.如何获取服务器端返回的数据
使用异步对象的属性,获取数据。
xmlHttp.responseXML:获取xml格式的数据,现在不用了
xmlHttp.responseText:获取文本数据。
==================================================================================================
实现AJAX异步请求,是通过XMLHttpRequest对象实现的, 使用XMLHttpRequest对象步骤:
1.创建异步对象,使用js语法
var xmlHttp = new XMLHttpRequest();
2.给异步对象绑定事件
xmlHttp.onreadystatechange= function(){
//处理请求,返回数据的内容
if( xmlHttp.readyState == 4 && xmlHttp.status == 200){
//请求是成功的,并获取了数据
//获取服务器端的数据
var data = xmlHttp.responseText;
alert(“服务器端返回的数据是:” + data)
}
}
3.初始化异步对象,指定请求的uri地址,参数等信息
xmlHttp.open(“get”,“uri|url”,true) // readyState == 1
4.发起请求
xmlHttp.send() // readyState == 2
bmi:身体质量指数, 计算公式 bmi = 体重(公斤) / 身高(米)的平方
首先是要全局刷新实现 bmi
1.新建一个jsp或者html
定义form表单, 指定参数 name , 身高height,体重weight
2.发起请求,给一个servlet,接受name ,height, weight
使用公式计算 bmi
把bmi的值存放到request作用域, 并转发到一个jsp。
3.在jsp中,使用el表达式,获取bim的值,显示给用户
xmlHttp.open(“get”,“queryjson?proid=”+proid,true)
看open(“请求方式”,“url”,是否异步)
true:异步请求, 执行send()方法后,可以继续执行其他的代码, 和异步请求不影响。
换句话说:可以在一个浏览器,创建多个异步对象,分别执行不同的请求。
就像是多个线程同时工作。
false:同步请求, 执行异步请求执行完毕后,才能执行其他操作。
在浏览器中,一次只能处理一个异步请求。