使用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 相关文章推荐
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
js实现网页定位导航功能
Mar 07 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
React实现动效弹窗组件
Jun 21 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
MySQL修改密码方法总结
2008/03/25 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
功能强大的php分页函数
2016/07/20 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
介绍Python的@property装饰器的用法
2015/04/28 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
python中的json总结
2018/10/11 Python
Python 面试中 8 个必考问题
2018/11/16 Python
Pyqt5实现英文学习词典
2019/06/24 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
关于雷锋的演讲稿
2014/05/10 职场文书
论文诚信承诺书
2014/05/23 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书