这篇文章主要向大家介绍了原生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的delete、put方法接收不到参数的问题方法 2023-02-23
- ExtJS 3.x DateField menuListeners 显示/隐藏 2022-09-15
- ECSHOP中实现ajax弹窗登录功能 2023-01-31
- 关于 css:WebKit (iPad) CSS3: 背景过渡闪烁 2022-09-21
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽) 2023-02-01
- Vue+WebSocket实现在线聊天 2023-10-08
- 第7天:CSS入门 2022-11-04
- 分页技术原理与实现之无刷新的Ajax分页技术(三) 2023-01-20
- vue的 Mixins (混入) 2023-10-08
- 深入浅析Jsonp解决ajax跨域问题 2022-12-28