原生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调用数据实例介绍，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • 关于ajax的使用方法_例题、ajax的数据处理

    关于ajax的使用方法_例题、ajax的数据处理

    需要注意的是,调用的封装的数据库,和jQuery的保存地址 一.注册 (1)写文本框来进行用户名的验证 <input type="text" id="uid" /> <span id="tishi"></span> //这个使用来显示提示信息的 (2)用jQuery语句写:用户名存在不能使用,用户名可以使用 $("#uid").blur(function(){ //取用户名 var uid

  • 分享Ajax创建简单实例代码

    XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面.几乎所有的浏览器都支持XMLHttpRequest对象,它是Ajax应用的核心技术. js代码如下: <html> <head> <title> New Document </title> <meta charset="utf

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

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

  • jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

    jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

    本文使用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果. HTML <div id="list"> <ul></ul> </div> <div id="pagecount"></div> 页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,#pagecount用来展示分页条,即本例中的上一页.下一页. 当然,别忘了,在head中预先载入jquery

  • .net core2.0下使用Identity改用dapper存储数据(实例讲解)

    前言. 已经好多天没写博客了,鉴于空闲无聊之时又兴起想写写博客,也当是给自己做个笔记.过了这么些天,我的文笔还是依然那么烂就请多多谅解了.今天主要是分享一下在使用.net core2.0下的实际遇到的情况.在使用webapi时用了identity做用户验证.官方文档是的是用EF存储数据来使用dapper,因为个人偏好原因所以不想用EF.于是乎就去折腾.改成使用dapper做数据存储.于是就有了以下的经验. 一.使用Identity服务 先找到Startup.cs 这个类文件 找到 Configu

  • C# WebService创建、发布、调用的实例讲解

    C# WebService创建、发布、调用的实例讲解

    Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML标准来描述.发布.发现.协调和配置这些应用程序,用于开发分布式的互操作的应用程序. Web service是一种可以接收从Internet或者Internet上的其它系统中传递过来的请求,轻量级的独立的通讯技术. webservice说明: 假设A是Client端,B是webservice服务端,用户通过http协议向服务器发送soap请求,webservice返回客户端XML格式的数据.

  • Javascript原生ajax请求代码实例

    这篇文章主要介绍了Javascript原生ajax请求代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 class Ajax{ constructor(url, method, data, callback_suc, callback_err, callback_run){ this.RT = true;//默认为异步请求 this.url = url; this.method = method || "POST";

  • python爬取安居客二手房网站数据(实例讲解)

    python爬取安居客二手房网站数据(实例讲解)

    是小打小闹 哈哈,现在开始正式进行爬虫书写首先,需要分析一下要爬取的网站的结构:作为一名河南的学生,那就看看郑州的二手房信息吧! 在上面这个页面中,我们可以看到一条条的房源信息,从中我们发现了什么,发现了连郑州的二手房都是这么的贵,作为即将毕业的学生狗惹不起啊惹不起 还是正文吧!!!由上可以看到网页一条条的房源信息,点击进去后就会发现: 房源的详细信息.OK!那么我们要干嘛呢,就是把郑州这个地区的二手房房源信息都能拿到手,可以保存到数据库中,用来干嘛呢,作为一个地理人,还是有点用处的,这次就不说

  • phpexcel导入excel处理大数据(实例讲解)

    先下载对应phpExcel 的包就行了https://github.com/PHPOffice/PHPExcel 下载完成 把那个Classes 这个文件夹里面的 文件跟文件夹拿出来就好了. 直接写到PHPExcel 这个文件里面的.调用很简单.引入phpExcel 这个类传递对应的excel 文件的路径就好了 现在上传到指定的目录,然后加载上传的excel文件读取这里读取是的时候不转换数组了.注意:是Sheet可以多个读取,php上传值要设置大,上传超时要设置长. header('Conten

  • python调用api实例讲解

    我们在做自动化运维的时候,经常需要调用api中的接口,不过很多人不知道具体的调用方法,在学习python中的requests库后,我们就可以很轻松的实现了. 1.说明 api接口调用是指使用python的requests库进行访问,基本上是get或post请求,有些接口会加密,然后必须使用对方提供给我们的公钥加密或解密,配上相应的参数进行访问,我们所需要的数据在请求后的返回结果中,所看到的基本上都是json格式的解析,所以请求后可以使用requests自带的json函数进行解析,然后提取所需的数

  • 使用jsonp实现跨域获取数据实例讲解

    js部分 (function(window, document) { 'use strict'; var jsonp = function(url, data, callback) { //1.挂载回调函数 var fnsuffix = Math.random().toString().replace('.', ''); var cbFuncName = 'my_json_cb' + fnsuffix; window[cbFuncName] = callback; //2.将data转换成url

  • vue父组件中获取子组件中的数据(实例讲解)

    如下所示: <FormItem label="上传头像" prop="image"> <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg> </FormItem> <Fo

随机推荐