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中常用的SET和GET
Jan 13 Javascript
根据出生日期自动取得星座的js代码
Jul 20 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
js添加绑定事件的方法
May 15 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 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
如何开始收听短波广播
2021/03/01 无线电
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
php抓取https的内容的代码
2010/04/06 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
python2.7安装图文教程
2018/03/13 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Python实现图像的垂直投影示例
2020/01/17 Python
如何基于Python实现数字类型转换
2020/02/07 Python
python 写一个文件分发小程序
2020/12/05 Python
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
大专毕业生简历的自我评价
2013/10/20 职场文书
个人委托书格式
2014/04/04 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
协议书格式模板
2016/03/24 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
Oracle11g R2 安装教程完整版
2021/06/04 Oracle
如何优化vue打包文件过大
2022/04/13 Vue.js
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript