使用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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 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
实用函数5
2007/11/08 PHP
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
php中chdir()函数用法实例
2014/11/13 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
js简单的弹出框有关闭按钮
2014/05/05 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
JSON取值前判断
2014/12/23 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
react build 后打包发布总结
2018/08/24 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
PyCharm代码格式调整方法
2018/05/23 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
python列表的逆序遍历实现
2020/04/20 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
2014年学生党支部工作总结
2014/12/20 职场文书
Redis入门教程详解
2021/08/30 Redis
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS