原生ajax调用数据实例讲解

由于jquery的盛行，现在使用较多的是jquery封装好了的ajax，因为解决了浏览器兼容性问题，这对程序员来说就等于去掉了一个心头大患，但并非原生ajax就销声匿迹，并且本人感觉还是对原生的ajax有所了解的好，下面就是一段ajax数据调用的实例代码，非常的简单，初学者可以参考一下。代码如下:
一.兼容浏览器部分

function xmlhttpr()
{ 
 var xmlhttp; 
 if(window.xmlhttprequest)
 { 
 xmlhttp=new xmlhttprequest(); 
 } 
 else
 { 
 try
 {
  xmlhttp=new activexobject("msxml2.xmlhttp")
 } 
 catch(e)
 { 
  try{xmlhttp=new activexobject("microsoft.xmlhttp"); }
  catch(e){return null;}
 } 
 } 
 return xmlhttp; 
} 

以上能够返回一个兼容各个浏览器的对象。
二.实例代码

var ajaxel=new object(); 
//ajaxel是自定义的命名空间； 
ajaxel.contentload=function(url)
{ 
 //ie浏览器下，会启用缓存，这里url加入date字段就是为了防止ie使用缓存，当然也可以使用math.random()产生和gettime类似的效果； 
 url+="?date="+new date().gettime(); 
 this.req=null; 
 this.url=url; 
 //这个回调函数就是在数据在页面上的更新函数； 
 this.onload=function()
 { 
 //domel是id为#test的dom元素； 
 var domel=document.getelementbyid("test"); 
 //除了用responsetext属性，也可以使用responsexml获得一张数据表； 
 domel.innerhtml=this.req.responsetext; 
 } 
 this.xmlhttp(url); 
} 
ajaxel.contentload.prototype={ 
 xmlhttp:function(url){ 
 if(window.xmlhttprequest)
 { 
  this.req=new xmlhttprequest(); 
 } 
 else
 { 
  try{this.req=new activexobject("msxml2.xmlhttp")} 
  catch(e)
  { 
   try{this.req=new activexobject("microsoft.xmlhttp"); 
  } 
  catch(e){return null;} 
 } 
 } 
 if(this.req)
 { 
 var xmlr=this; 
 this.req.onreadystatechange=function(){ 
  if(xmlr.req.readystate===4)
  { 
  xmlr.onload.call(xmlr); 
  } 
 } 
 this.req.open("get",url,true); 
 this.req.send(null); 
 } 
 } 
} 
var xmle=new ajaxel.contentload("main.php"); 

三.php中的代码

echo "now! time is:".date("h:i:s a y");

以上就是关于原生ajax调用数据实例介绍，希望对大家的学习有所帮助。