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 简单的进度条实现代码
Mar 11 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
vue项目中openlayers绘制行政区划
Dec 24 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
main.php
2006/12/09 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
js玩一玩WSH吧
2007/02/23 Javascript
javascript之锁定表格栏位
2007/06/29 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
JavaScript中的闭包
2016/02/24 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
python列表操作实例
2015/01/14 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
Python中super函数的用法
2017/11/17 Python
Random 在 Python 中的使用方法
2018/08/09 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
十周年庆典策划方案
2014/06/03 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android