实现一个最基本的AJAX异步调用,其步骤如下:
1、创建XMLHttpRequest对象;
2、创建一个新的http请求,并指定请求的方法,URL以及验证信息;
3、设置http请求状态变化的函数;
4、发送http请求;
5、获取异步调用返回的数据;
6、利用JS和DOM实现局部更新
小例子一枚:
获取员工信息,创建新员工信息
html php代码略;
js部分:
//获取员工信息
document.getElementById('serach').onclick=function(){
var request=new XMLHttpRequest();//不考虑ie6
request.open("GET","server.php?number="+document.getElementById('keyword').value);
request.send();
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
document.getElementById('searchResult').innerHTML=request.responseText;
}else{
alert("发生错误:"+request.status);
}
}
}
}
//创建员工信息
document.getElementById('create').onclick=function(){
var request=new XMLHttpRequest();
request.open("POST","server.php");
var data="name="+document.getElementById('staffName').value
+"&number="+document.getElementById('staffNumber').value
+"&sex="+document.getElementById('staffSex').value
+"&job="+document.getElementById('staffJob').value;
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
document.getElementById('createResult').innerHTML=request.reponseText;
}else{
alert("发生错误:"+request.status)
}
}
}
}