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实现自定义风格的滑动条实现代码
Apr 26 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
Vue中fragment.js使用方法小结
Feb 17 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 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(5) 类和对象
2010/02/16 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
innerText 使用示例
2014/01/23 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
详解Bootstrap插件
2016/04/25 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
python生成随机密码或随机字符串的方法
2015/07/03 Python
python中set常用操作汇总
2016/06/30 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
python如何快速拼接字符串
2020/10/28 Python
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
关于VPN
2012/06/10 面试题
企业内部培训方案
2014/02/04 职场文书
清扬洗发水广告词
2014/03/14 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
电视新闻稿
2015/07/17 职场文书
Oracle中日期的使用方法实例
2022/07/07 Oracle