AJAX
AJAX = Asynchronous JavaScript and XML(异步的JavaScript和XML)
AJAX是一种无需重新加载整个网页的情况下,能够更新页面部分内容的新方法
他不是一种新的编程语言,而是多种技术的综合使用
核心:JavaScript和xml(json):使用JavaScript操作异步对象XMLHttpRequest
和服务器交换使用json数据格式(以前是xml 但xml重量 难解析)
异步对象XMLHttpRequest属性和方法
1.创建异步对象
var xhr = XMLHttpRequest();
2.XMLHttpRequest方法
1)open(请求方法,服务器端的访问地址,异步还是同步)
xhr.open("get","login",true);
2)send();使用异步对象发送请求
3.XMLHTTPRequest属性
readystate属性:请求状态
0:表示创建异步对象时(正在创建异步对象),new XMLHttpRequest();
1:表示初始异步对象的请求参数,执行open()方法
2:使用send()方法发送请求
3:使用异步对象从服务器接收了数据
4:异步对象接收了数据,并在异步对象内部处理完成后
status属性:网络状态,和Http的状态码对应
200:请求成功
404:服务器资源没有找到
500:服务器内部代码有错误
responseText属性:表示服务器端返回的数据
var data = xhr.responseText;
4.异步对象XMLHTTPRequest使用步骤
1)使用js创建异步对象
var xhr = XMLHttpRequest();
2)给异步对象绑定事件,事件名称onreadystatechange
例如button增加单击事件onclick
xhr绑定事件
xhr.onreadystatechange = function(){
当事件发生时执行的代码
}
在绑定事件中做什么?根据readyState值做请求处理
xhr.readystatechange = function(){
if(xhr.readystatechange == 4 && xhr.status == 200){
//从服务器获取了数据,更新当前页面的dom对象,完成请求的处理
var data = xhr.responseText;
//更新dom对象
document.getElementById("#mydiv").innerHTML = data;
}
}
3)初始请求的参数,执行open()函数
xhr.open("get","loginServlet",true);
4)发送请求,执行send()
xhr.send();
5.第一个例子
使用全局刷新,实现计算bmi
可以使用jsp显示request作用域中的数据,使用el表达式
也可使用HttpServletResponse对象输出数据,数据给了浏览器。浏览器可以接受HTTPServletResponse对象print的数据
6.同步请求和异步请求
看open(请求方式,访问url地址,boolean是不是异步的)
true:异步请求
false:同步请求