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中的var_dump函数实现代码
Sep 07 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
js实现简单扫雷
Nov 27 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
理解javascript中的闭包
2017/01/11 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
python sys模块sys.path使用方法示例
2013/12/04 Python
为Python的web框架编写前端模版的教程
2015/04/30 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
彻底理解Python list切片原理
2017/10/27 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
国际残疾人日广播稿范文
2014/10/09 职场文书
公司禁烟通知
2015/04/23 职场文书
我的长征观后感
2015/06/09 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
Redis 常见使用场景
2021/08/30 Redis
Nginx 匹配方式
2022/05/15 Servers