• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    原生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调用数据实例介绍,希望对大家的学习有所帮助。

    您可能感兴趣的文章:
    • 分享Ajax创建简单实例代码
    • 关于ajax的使用方法_例题、ajax的数据处理
    上一篇:解决ajax返回验证的时候总是弹出error错误的方法
    下一篇:通过Ajax手动解决WordPress WP-PostViews不计数的问题
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    原生ajax调用数据实例讲解 原生,ajax,调用,数据,实例,