javascript实现原生ajax的几种方法介绍


Posted in Javascript onSeptember 21, 2013

自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了。但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件。但又要使用到ajax这种功能该如何办呢?下面和大家分享几种利用javascript实现原生ajax的方法。

实现ajax之前必须要创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器,则需要创建 ActiveXObject,具体方法如下:

var xmlHttp; 
function createxmlHttpRequest() { 
if (window.ActiveXObject) { 
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} else if (window.XMLHttpRequest) { 
xmlHttp=new XMLHttpRequest(); 
}

(1)下面使用上面创建的xmlHttp实现最简单的ajax get请求:
function doGet(url){ 
// 注意在传参数值的时候最好使用encodeURI处理一下,以防出现乱码 
createxmlHttpRequest(); 
xmlHttp.open("GET",url); 
xmlHttp.send(null); 
xmlHttp.onreadystatechange = function() { 
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { 
alert('success'); 
} else { 
alert('fail'); 
} 
} 
}

(2)使用上面创建的xmlHttp实现最简单的ajax post请求:
function doPost(url,data){ 
// 注意在传参数值的时候最好使用encodeURI处理一下,以防出现乱码 
createxmlHttpRequest(); 
xmlHttp.open("POST",url); 
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
xmlHttp.send(data); 
xmlHttp.onreadystatechange = function() { 
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { 
alert('success'); 
} else { 
alert('fail'); 
} 
} 
}
Javascript 相关文章推荐
range 标准化之获取
Aug 28 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 #Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 #Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 #Javascript
js调用css属性写法
Sep 21 #Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 #Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 #Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 #Javascript
You might like
如何在PHP中进行身份认证
2006/10/09 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
Javascript 面向对象 命名空间
2010/05/13 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
详解Vue之事件处理
2020/07/10 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
举例讲解Python常用模块
2019/03/08 Python
python3转换code128条形码的方法
2019/04/17 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
Python操作Excel的学习笔记
2021/02/18 Python
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
11月红领巾广播稿
2014/01/17 职场文书
西岭雪山导游词
2015/02/06 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书