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 相关文章推荐
Jquery选择器 $实现原理
Dec 02 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
理解JSON:3分钟课程
Oct 28 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
vue 如何使用递归组件
Oct 23 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
原生JS实现京东查看商品点击放大
Dec 21 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
使用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开发工具有哪五款
2015/11/09 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
使用Apache的rewrite
2021/03/09 Servers
js 页面输出值
2008/11/30 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
对python判断是否回文数的实例详解
2019/02/08 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
python同步windows和linux文件
2019/08/29 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
医学专业毕业生推荐信
2013/11/14 职场文书
学年末自我鉴定
2014/01/21 职场文书
综艺节目策划方案
2014/06/13 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL