原生 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 相关文章推荐
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
js 数据类型转换总结笔记
Jan 17 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
react 组件传值的三种方法
Jun 03 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
全面解析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常用的缓存技术汇总
2014/05/05 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
python解析xml文件实例分享
2013/12/04 Python
python练习程序批量修改文件名
2014/01/16 Python
CentOS安装pillow报错的解决方法
2016/01/27 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
携程英文网站:Trip.com
2017/02/07 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
优秀毕业生找工作自荐信
2014/06/23 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
考研英语复习计划
2015/01/19 职场文书
2015年保送生自荐信
2015/03/24 职场文书
退休欢送会主持词
2015/07/01 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS