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中小数转换整数的方法
Jan 26 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 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
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
javascript控制台详解
2015/06/25 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
python 容器总结整理
2017/04/04 Python
Python numpy 点数组去重的实例
2018/04/18 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
用Python逐行分析文件方法
2019/01/28 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
幼师自我鉴定范文
2013/10/01 职场文书
测试工程师职业规划书
2014/02/06 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
科技馆观后感
2015/06/08 职场文书
合理化建议书范文
2015/09/14 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python