码迷,mamicode.com
首页 > Web开发 > 详细

原生ajax调用数据简单实例代码

时间:2016-01-09 11:01:09      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:

原生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");

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9369

更多内容可以参阅:http://www.softwhy.com/javascript/

 

原生ajax调用数据简单实例代码

标签:

原文地址:http://www.cnblogs.com/zhadanren/p/5115555.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!