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 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 Javascript
微信小程序自定义胶囊样式
Dec 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
制作美丽的拉花
2021/03/03 冲泡冲煮
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
Nginx实现反向代理
2017/09/20 Servers
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
python读取并写入mat文件的方法
2019/07/12 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
会议接待欢迎词
2014/01/12 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
行政内勤岗位职责
2014/04/07 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
品牌推广策划方案
2014/05/28 职场文书
学前教育专业求职信
2014/09/02 职场文书
庆祝国庆节标语
2014/10/09 职场文书
刑事申诉状范文
2015/05/20 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
关于python爬虫应用urllib库作用分析
2021/09/04 Python
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技