<!DOCTYPE html>
<html lang="en">
<head>
<title>xmlhttprequest ajax demo</title>
<script type ="text/javascript" language ="javascript" >
var req; //定义变量，用来创建xmlhttprequest对象
function creatReq() // 创建xmlhttprequest,ajax开始
{
var url="./test5.json"; //要请求的服务端地址
if(window.XMLHttpRequest) //非IE浏览器及IE7(7.0及以上版本)，用xmlhttprequest对象创建
{
req=new XMLHttpRequest();
}
else if(window.ActiveXObject) //IE(6.0及以下版本)浏览器用activexobject对象创建,如果用户浏览器禁用了ActiveX,可能会失败.
{
req=new ActiveXObject("Microsoft.XMLHttp");
}
if(req) //成功创建xmlhttprequest
{
getURL(url,function(content,error){
if(error!=null){
console.log("error"+ error)
}else{
console.log('content:'+ content);
}
})
}
}
function getURL(url,callback){
req.open("GET",url,true); //与服务端建立连接(请求方式post或get，地址,true表示异步)
req.onreadystatechange = function(){
stateback(callback);
}; //指定回调函数
req.send(null); //发送请求
}
function stateback(callback) //回调函数，对服务端的响应处理，监视response状态
{
console.log(req);
if(req.readyState==4) //请求状态为4表示成功
{
if(req.status==200) //http状态200表示OK
{
Dispaly(); //所有状态成功，执行此函数，显示数据
callback(req.responseText);
}
else //http返回状态失败
{
callback(null,new Error('this is error'));
}
}
else //请求状态还没有成功，页面等待
{
document .getElementById ("myTime").innerHTML ="数据加载中";
callback(null,new Error('this is error'));
}
}
function Dispaly() //接受服务端返回的数据，对其进行显示
{
document .getElementById ("myTime").innerHTML =(req.responseText);
}
</script>
</head>
<body>
<div id="myTime"></div>
<input id="Button1" type="button" value="Get Time" onclick ="creatReq();"/>
</body>
</html>
添加异常处理
<!DOCTYPE html>
<html lang="en">
<head>
<title>xmlhttprequest ajax demo</title>
<script type ="text/javascript" language ="javascript" >
var req; //定义变量，用来创建xmlhttprequest对象
function creatReq() // 创建xmlhttprequest,ajax开始
{
var url="./test5.json"; //要请求的服务端地址
if(window.XMLHttpRequest) //非IE浏览器及IE7(7.0及以上版本)，用xmlhttprequest对象创建
{
req=new XMLHttpRequest();
}
else if(window.ActiveXObject) //IE(6.0及以下版本)浏览器用activexobject对象创建,如果用户浏览器禁用了ActiveX,可能会失败.
{
req=new ActiveXObject("Microsoft.XMLHttp");
}
if(req) //成功创建xmlhttprequest
{
getURL(url,function(content,error){
if(error!=null){
console.log("error"+ error)
}else{
console.log('content:'+ content);
}
})
}
}
function getURL(url,callback){
req.open("GET",url,true); //与服务端建立连接(请求方式post或get，地址,true表示异步)
req.onreadystatechange = function(){
stateback(callback);
}; //指定回调函数
req.send(null); //发送请求
}
function stateback(callback) //回调函数，对服务端的响应处理，监视response状态
{
console.log(req);
if(req.readyState==4) //请求状态为4表示成功
{
if(req.status==200) //http状态200表示OK
{
Dispaly(); //所有状态成功，执行此函数，显示数据
callback(req.responseText);
}
else //http返回状态失败
{
callback(null,new Error('this is error'));
}
}
else //请求状态还没有成功，页面等待
{
document .getElementById ("myTime").innerHTML ="数据加载中";
callback(null,new Error('this is error'));
}
}
function Dispaly() //接受服务端返回的数据，对其进行显示
{
document .getElementById ("myTime").innerHTML =(req.responseText);
}
</script>
</head>
<body>
<div id="myTime"></div>
<input id="Button1" type="button" value="Get Time" onclick ="creatReq();"/>
</body>
</html>