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


Posted in Javascript onJune 08, 2016

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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 #Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 #Javascript
JavaScript中两个字符串的匹配
Jun 08 #Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 #Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 #Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 #Javascript
Javascript之String对象详解
Jun 08 #Javascript
You might like
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
PHP中的替代语法介绍
2015/01/09 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
js change,propertychange,input事件小议
2011/12/20 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
详解JS函数重载
2014/12/04 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
python3实现随机数
2018/06/25 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
python3获取url文件大小示例代码
2019/09/18 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
Python中return函数返回值实例用法
2020/11/19 Python
selenium如何定位span元素的实现
2021/01/13 Python
企业门卫岗位职责
2013/12/12 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang