JavaScript 使用xmlHttpRequest 对象来直接与服务器进行通信,异步数据传输
从服务器请求少量的所需信息。而不是整个页面内容,减少服务器压力
通过使用ajax可实现页面局部数据跟新,而不是整个页面的跳转
异步请求方式:xmlHttpRequest(助手)
服务器返回结果由xmlHttpReuest接受
JavaScript-----》xmlHttpReuset对象------》服务器
常见的异步加载:在不影响当前页面的情况下,发送请求
ajax关键元素:JavaScript
DOM
CSS
xmlHttpReuest
ajax主要作用: web2.0主要开发技术
实现页面局部刷新
提升用户体验
异步方式发送请求
ajax实现步骤: 创建XMLHttpReuest对象
function createXmlHttp(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
设置回调函数
初始化xmlHttpRequest组件
发送请求
function checkUsername(){
// 获得文件框值:
var username = document.getElementById("username").value;
// 1.创建异步交互对象
var xhr = createXmlHttp();
// 2.设置监听
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
document.getElementById("span1").innerHTML = xhr.responseText;
}
}
}
// 3.打开连接
xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true);
// 4.发送
xhr.send(null);
}
·