这篇文章主要向大家介绍了原生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调用数据实例讲解


基础教程推荐
猜你喜欢
- Bootstrap学习笔记之css组件(3) 2024-01-22
- 创建Vue3.0需要安装哪些脚手架 2025-01-16
- html5视频如何嵌入到网页(视频代码) 2025-01-22
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件 2023-10-29
- js判断一个对象是否在一个对象数组中(场景分析) 2022-10-21
- Django操作cookie的实现 2024-04-15
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析 2024-01-08
- JSONObject与JSONArray使用方法解析 2024-02-07
- 纯css实现漂亮又健壮的tooltip的方法 2024-01-23
- Loaders.css免费开源加载动画框架介绍 2025-01-23