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获取input的value问题说明
Aug 19 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 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在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
javascript 多浏览器 事件大全
2010/03/23 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
vue最简单的前后端交互示例详解
2018/10/11 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
解决layer.open后laydate失效的问题
2019/09/06 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
python计算圆周率pi的方法
2015/07/11 Python
Python中%r和%s的详解及区别
2017/03/16 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
python生成带有表格的图片实例
2019/02/03 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
在校生党员自我评价
2013/09/25 职场文书
写好自荐信要注意的问题
2013/11/10 职场文书
竞选班委演讲稿
2014/04/28 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
雨中的树观后感
2015/06/03 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL