使用JavaScript实现ajax的实例代码


Posted in Javascript onMay 11, 2016

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种创建快速动态网页的技术。

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实现ajax的实例代码,希望对大家有所帮助,在使用过程发现有任何疑问欢迎给我留言,小编会及时回复大家的。在此小编非常感谢大家对三水点靠木网站的支持,相信我们会做的更好!

Javascript 相关文章推荐
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
对vuex中store和$store的区别说明
Jul 24 Javascript
jQuery的框架介绍
May 11 #Javascript
jQuery链式调用与show知识浅析
May 11 #Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 #Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 #Javascript
javascript简单判断输入内容是否合法的方法
May 11 #Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 #Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 #Javascript
You might like
php数据访问之增删改查操作
2016/05/09 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
Axios学习笔记之使用方法教程
2017/07/21 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
pyenv命令管理多个Python版本
2017/03/26 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
活动志愿者自荐信
2014/01/27 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
新郎新娘致辞
2015/07/31 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
Python面向对象之成员相关知识总结
2021/06/24 Python