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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
详解javascript实现瀑布流列式布局
Jan 29 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
js在HTML的三种引用方式详解
Aug 29 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处理换行符的问题 \r\n
2013/06/13 PHP
php 生成短网址原理及代码
2014/01/23 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
JS实现的省份级联实例代码
2013/06/24 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
Popup弹出框添加数据实现方法
2017/10/27 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
Python应用库大全总结
2018/05/30 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
Python3模拟登录操作实例分析
2019/03/12 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
python实现自动打卡的示例代码
2020/10/10 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
弘扬职业精神演讲稿
2014/03/20 职场文书
医学求职自荐信
2014/06/21 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
环卫工作汇报材料
2014/10/28 职场文书
学校推普周活动总结
2015/05/07 职场文书
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL
Golang ort 中的sortInts 方法
2022/04/24 Golang