使用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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
javascript判断chrome浏览器的方法
Mar 26 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
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递归函数返回值使用方法
2013/02/18 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
python检测某个变量是否有定义的方法
2015/05/20 Python
python类和继承用法实例
2015/07/07 Python
Django开发中复选框用法示例
2018/03/20 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
Django配置文件代码说明
2019/12/04 Python
Python列表切片常用操作实例解析
2020/03/10 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
你懂得怎么写自荐信吗?
2013/12/27 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
会议主持词
2014/03/17 职场文书
《春笋》教学反思
2014/04/15 职场文书
校园文化标语
2014/06/18 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
教务处干事工作总结
2015/08/14 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang