要完整实现一个Ajax同步调用和局部刷新，通常需要以下几个步骤：
1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象
2.创建一个新的HTTP请求，并指定该HTTP请求的方法，URL
3.设置响应HTTP请求状态变化的函数
话不多说，代码伺候：
创建XMLHttpRequest对象：
// 封装通用的XMLHttpRequest对象 ，兼容各个版本
function createXHR(){
// 判断浏览器是否将XMLHttpRequest最为本地对象实现，正对IE7，firefox,opera等
if(typeof XMLHttpRequest != 'undefine'){
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}else if(typeof ActiveXObject != 'undefine'){
// code for IE6,IE5...
var xmlArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
var len = xmlArr.length, xhr;
for(var i=0;i<len;i++){
try{
// 创建XMLHttpRequest对象
xhr = new ActiveXObject(xmlArr[i]);
break;
}catch(ex){
}
}
return xhr;
}else{
throw new Error('No XHR Ojbect available.');
}
}
也可以简写：
function crateXHR(){
var xmlHttp;
if(windown.XMLHttpRequest){
//code for IE7+, Firefox, Chrome,Opera, Safari
xmlHttp = new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlHttp = new ActiveXObject('Microsoft.XMLHttp');
}
}
完整代码：
<html>
<head>
<title>ajax</title>
</head>
<body>
<div id="banner" class="banner">
</div>
<script type="text/javascript">
// 封装通用的XMLHttpRequest对象 ，兼容各个版本
function createXHR(){
// 判断浏览器是否将XMLHttpRequest最为本地对象实现，正对IE7，firefox,opera等
if(typeof XMLHttpRequest != 'undefine'){
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}else if(typeof ActiveXObject != 'undefine'){
// code for IE6,IE5...
var xmlArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
var len = xmlArr.length, xhr;
for(var i=0;i<len;i++){
try{
// 创建XMLHttpRequest对象
xhr = new ActiveXObject(xmlArr[i]);
break;
}catch(ex){
}
}
return xhr;
}else{
throw new Error('No XHR Ojbect available.');
}
}
// XMLHTTPRequest对象
var xhr = createXHR(), data =null;
// 响应XMLHttpRequest对象状态变化的函数,onreadystatechange在readstatechagne属性发生改变时触发
xhr.onreadystatechange = function(){
if(xhr.readystate==4){
if((xhr.status>=200 && xhr.status<300) || xhr.status === 304){
// 获得服务器返回的数据
// console.log(xhr.responseText);
// responseText返回的数据是string类型
// data = eval("("+xhr.responseText+")");
data = JSON.parse(xhr.responseText)
// 渲染数据到页面
renderDataToDom();
}
}
}
// 创建请求
// open(method,url,async)方法有三个参数
// method 请求方式，url 要请求的文件在服务器上的位置 async 请求是同步还是异步
xhr.open('get','./server.json',true);
// 发送请求
xhr.send(null);
// xhr.send({user:'zhangsan',id:6})
// 设置http头部信息
// xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
function renderDataToDom(){
}
</script>
</body>
</html>