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 相关文章推荐
js日期时间补零的小例子
Mar 05 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
Javascript实现简易天数计算器
May 18 Javascript
javascript canvas时钟模拟器
Jul 13 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
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
Angular 容器部署的方法
2018/04/17 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
python实现批量下载新浪博客的方法
2015/06/15 Python
python在控制台输出进度条的方法
2015/06/20 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
django自带调试服务器的使用详解
2019/08/29 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
职业生涯规划怎么写
2013/12/29 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
大一新生学期自我评价
2014/04/09 职场文书
我的老师教学反思
2014/05/01 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
银行贷款委托书范本
2014/10/11 职场文书
个人催款函范文
2015/06/23 职场文书
培训感想范文
2015/08/07 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
Pandas 数据编码的十种方法
2022/04/20 Python