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 相关文章推荐
JavaScript XML操作 封装类
Jul 01 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
js实现上传图片并显示图片名称
Dec 18 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 数组入门教程小结
2009/05/20 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
详解JS面向对象编程
2016/01/24 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
netbeans7安装python插件的方法图解
2013/12/24 Python
用Python进行基础的函数式编程的教程
2015/03/31 Python
Python正则表达式使用范例分享
2016/12/04 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
大学毕业通用个人的求职信
2013/12/08 职场文书
房产委托公证书
2014/04/08 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
单位租房协议书范本
2014/12/04 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
银行求职信模板
2015/03/20 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
初中语文教学反思范文
2016/03/03 职场文书
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js