原生 JS Ajax,GET和POST 请求实例代码

 更新时间:2016年06月08日 10:18:06   作者:jerrylsxu  
这篇文章主要介绍了原生 JS Ajax,GET和POST 请求实例代码的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下

javascript/js的ajax的GET请求代码如下所示:

<script type="text/javascript"> 
/* 创建 XMLHttpRequest 对象 */ 
var xmlHttp; 
function GetXmlHttpObject(){ 
  if (window.XMLHttpRequest){ 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
  }else{// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  } 
  return xmlhttp; 
} 
// -----------ajax方法-----------// 
function getLabelsGet(){ 
  xmlHttp=GetXmlHttpObject(); 
  if (xmlHttp==null){ 
    alert('您的浏览器不支持AJAX!'); 
    return; 
  } 
  var id = document.getElementById('id').value; 
  var url="http://www.Leefrom.com?id="+id+"&t/"+Math.random(); 
  xmlHttp.open("GET",url,true); 
  xmlHttp.onreadystatechange=favorOK;//发送事件后,收到信息了调用函数 
  xmlHttp.send(); 
}
function getOkGet(){ 
  if(xmlHttp.readyState==1||xmlHttp.readyState==2||xmlHttp.readyState==3){ 
    // 本地提示:加载中 
  } 
  if (xmlHttp.readyState==4 && xmlHttp.status==200){ 
    var d= xmlHttp.responseText; 
    // 处理返回结果 
  } 
} 
</script>

javascript/js的ajax的POST请求:

<script type="text/javascript"> 
/* 创建 XMLHttpRequest 对象 */ 
var xmlHttp; 
function GetXmlHttpObject(){ 
if (window.XMLHttpRequest){ 
// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest(); 
}else{// code for IE6, IE5 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
return xmlhttp; 
} 
// -----------ajax方法-----------// 
function getLabelsPost(){ 
xmlHttp=GetXmlHttpObject(); 
if (xmlHttp==null){ 
alert('您的浏览器不支持AJAX!'); 
return; 
} 
var url="http://www.lifefrom.com/t/"+Math.random(); 
xmlhttp.open("POST",url,true); 
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xmlhttp.send(); 
xmlHttp.onreadystatechange=getLabelsOK;//发送事件后,收到信息了调用函数 
} 
function getOkPost(){ 
if(xmlHttp.readyState==1||xmlHttp.readyState==2||xmlHttp.readyState==3){ 
// 本地提示:加载中/处理中 
} 
if (xmlHttp.readyState==4 && xmlHttp.status==200){ 
var d=xmlHttp.responseText; // 返回值 
// 处理返回值 
} 
} 
</script> 

注意:XMLHttpRequest 是 AJAX 的基础,在创建 XMLHttpRequest 对象时,必须与你写的ajax方法在同一个‘<script></script>'标签中!否则ajax请求会出错,并无法返回数据。 javascript/js的ajax的POST/GET请求。

以上所述是小编给大家介绍的原生 JS Ajax,GET和POST 请求实例代码的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 理解javascript中的MVC模式

    理解javascript中的MVC模式

    这篇文章主要为大家介绍了javascript中的MVC模式,MVC是一种软件架构模式,一般把软件模式分为三部分,本文就针对MVC模式的三部分进行讲解,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JS获取当前时间戳与时间戳转日期时间格式问题

    JS获取当前时间戳与时间戳转日期时间格式问题

    这篇文章主要介绍了JS获取当前时间戳与时间戳转日期时间格式,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • JavaScript利用切片实现大文件断点续传

    JavaScript利用切片实现大文件断点续传

    断点续传即在文件上传期间因为一些原因而导致上传终止时,下次再次上传同一个文件就从上一次上传到一半的地方继续上传,以节省上传时间。本文将利用切片实现大文件断点续传功能,快来跟随小编一起学一学吧
    2022-03-03
  • 详解基于javascript实现的苹果系统底部菜单

    详解基于javascript实现的苹果系统底部菜单

    本篇文章主要对基于javascript实现的苹果系统底部菜单进行了详细的分析说明,有助于理解和学习编写苹果系统底部菜单,相信会对大家有所帮助,下面就跟小编一起来看看吧
    2016-12-12
  • 关于Bootstrap按钮组件消除黄框的方法

    关于Bootstrap按钮组件消除黄框的方法

    这篇文章主要介绍了Bootstrap按钮组件消除黄框的方法,需要的朋友可以参考下
    2017-05-05
  • JavaScript实现瀑布流布局

    JavaScript实现瀑布流布局

    这篇文章主要介绍了原生JavaScript实现瀑布流布局的相关资料,实现鼠标下拉图片自动加载效果,和百度图片效果类似,需要的朋友可以参考下
    2016-01-01
  • JavaScript实现AOP详解(面向切面编程,装饰者模式)

    JavaScript实现AOP详解(面向切面编程,装饰者模式)

    下面小编就为大家分享一篇JavaScript实现AOP的方法(面向切面编程,装饰者模式),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • js时间比较 js计算时间差的简单实现方法

    js时间比较 js计算时间差的简单实现方法

    下面小编就为大家带来一篇js时间比较 js计算时间差的简单实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JavaScript中数据结构与算法(五):经典KMP算法

    JavaScript中数据结构与算法(五):经典KMP算法

    这篇文章主要介绍了JavaScript中数据结构与算法(五):经典KMP算法,本文详解了KMP算法的方方面在,需要的朋友可以参考下
    2015-06-06
  • JavaScript编制留言簿程序代码

    JavaScript编制留言簿程序代码

    也许你有一个很酷的主页,很希望与人分享。同时,你希望访问你主页的人能对你的主页提供一些意见和建议,或者你对某个主题感兴趣,而希望客人也许能给你一帮助,这就要用到留言簿。留言簿使得你能与每一个访问你主页的人交换信息。
    2008-09-09

最新评论