使用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 setattribute批量设置css样式
Nov 26 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
jquery图片切换实例分析
Apr 15 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
javascript自定义右键菜单插件
Dec 16 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
微信小程序APP的生命周期及页面的生命周期
Apr 19 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原生模板引擎 最简单的模板引擎
2012/04/25 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
JS & JQuery 动态添加 select option
2016/06/08 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
详解vue中axios的封装
2018/07/18 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
在Python中使用正则表达式的方法
2015/08/13 Python
python模拟表单提交登录图书馆
2018/04/27 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
益模软件Java笔试题
2012/03/27 面试题
单位介绍信范文
2014/01/18 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
通知函的格式
2015/04/27 职场文书
离婚被告答辩状
2015/05/22 职场文书
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript