下载提示
- 1.该资料是网友上传的，本站提供全文预览，预览什么样，下载就什么样。
- 2.下载该文档所得收入归上传者、原创者。
- 3.下载的文档，不会出现我们的网址水印。
文档列表
文档介绍
jQuery框架学习第六天：jQuery中的Ajax应用.doc
本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.
.
Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, , 并且让调用Ajax更加简单.
首先通过实例, 来看一下jQuery实现Ajax有多简单. 下面是一个使用原始Ajax的示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "/xhtml1/DTD/xhtml1-">
<html xmlns="9/xhtml">
<head>
<title>jQuery Ajax</title>
<script type="text/javascript">
$(function()
{
var xhr = new AjaxXmlHttpRequest();
$("#btnAjaxOld").click(function(event)
{
var xhr = new AjaxXmlHttpRequest();
= function()
{
if ( == 4)
{
("divResult").innerHTML = ;
}
}
("GET", "data/?resultType=html", true);
(null);
});
})
//跨浏览器获取XmlHttpRequest对象
function AjaxXmlHttpRequest()
{
var xmlHttp;
try
{
// Firefox, Opera +, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
// Explorer
try
{
xmlHttp = new ActiveXObject("");
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject("");
}
catch (e)
{
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
return xmlHttp;
}
</script>
</head>
<body>
<button id="btnAjaxOld">原始Ajax调用</button><br />
<br />
<div id="divResult"></div>
</body>
</html>
上面的实例中, data/?resultType=html 地址会返回一段HTML代码.
使用原始Ajax, 我们需要做较多的事情, 比如创建XmlHttpRequest对象, 判断请求状态, 编写回调函数等.
而用jQuery的Load方法, 只需要一句话:
$("#divResult").load("data/", { "resultType": "html" });
曾经我是一个原始Ajax的绝对拥护者, Ajax, 因为我想要最高的代码灵活度. 使用原始Ajax让我感觉完成自己的工作更加轻松, 即使多写了一些代码. 但是当我去翻看别人的Ajax代码并且尝试修改的时候, 我改变了我的看法--我们的代码到处分布着创建XmlHttpRequest方法的函数, 或者某些Ajax程序逻辑性和结构性很差, 很难看懂.
我们可以将通用方法放到一个js文件中, 然后告诉大家"嘿伙伴们, 都来用这个js中的方法". 但是在某些时候有些新来的外包人员并不知道有这个js文件的存在. 而且其实这个通用的js就是一个
本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.
.
Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, , 并且让调用Ajax更加简单.
首先通过实例, 来看一下jQuery实现Ajax有多简单. 下面是一个使用原始Ajax的示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "/xhtml1/DTD/xhtml1-">
<html xmlns="9/xhtml">
<head>
<title>jQuery Ajax</title>
<script type="text/javascript">
$(function()
{
var xhr = new AjaxXmlHttpRequest();
$("#btnAjaxOld").click(function(event)
{
var xhr = new AjaxXmlHttpRequest();
= function()
{
if ( == 4)
{
("divResult").innerHTML = ;
}
}
("GET", "data/?resultType=html", true);
(null);
});
})
//跨浏览器获取XmlHttpRequest对象
function AjaxXmlHttpRequest()
{
var xmlHttp;
try
{
// Firefox, Opera +, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
// Explorer
try
{
xmlHttp = new ActiveXObject("");
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject("");
}
catch (e)
{
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
return xmlHttp;
}
</script>
</head>
<body>
<button id="btnAjaxOld">原始Ajax调用</button><br />
<br />
<div id="divResult"></div>
</body>
</html>
上面的实例中, data/?resultType=html 地址会返回一段HTML代码.
使用原始Ajax, 我们需要做较多的事情, 比如创建XmlHttpRequest对象, 判断请求状态, 编写回调函数等.
而用jQuery的Load方法, 只需要一句话:
$("#divResult").load("data/", { "resultType": "html" });
曾经我是一个原始Ajax的绝对拥护者, Ajax, 因为我想要最高的代码灵活度. 使用原始Ajax让我感觉完成自己的工作更加轻松, 即使多写了一些代码. 但是当我去翻看别人的Ajax代码并且尝试修改的时候, 我改变了我的看法--我们的代码到处分布着创建XmlHttpRequest方法的函数, 或者某些Ajax程序逻辑性和结构性很差, 很难看懂.
我们可以将通用方法放到一个js文件中, 然后告诉大家"嘿伙伴们, 都来用这个js中的方法". 但是在某些时候有些新来的外包人员并不知道有这个js文件的存在. 而且其实这个通用的js就是一个
jQuery框架学习第六天：jQuery中的Ajax应用 来自淘豆网www.taodocs.com转载请标明出处.
猜你喜欢
- 2024年希望工程申请书 5页
- 基于时空混沌系统的彩色图像加密算法的开题报.. 2页
- 2024年师恩难忘作文400字 14页
- 肝辨证ppt课件 28页
- 基于抗震设计和构造改进的钢框架结构抗倒塌性.. 2页
- 2024年市级骨干教师的培训阶段学习总结范文（.. 29页
- 2024年市场部个人年度总结 70页
- 基于序列特征的核小体定位中期报告 2页
- 基于嵌入式系统的图像处理技术研究的开题报告.. 2页
- 高次谐波对风电场输电线路影响 31页
- 2024年工程类工作总结 42页
- 2024年工程管理专业自我鉴定 6页
- 2024年工程施工委托合同9篇 32页
- 基于双经纬仪的雷达阵面监测系统设计与实现的.. 2页
- 基于区域差别的燃煤电厂动态脱硝电价研究的开.. 2页
相关文档 更多>>
非法内容举报中心
相关标签
最近更新
- 植物激素对裂殖壶菌生长与DHA含量的影响及裂..
- 2024年悲伤的简短句子
- 2024年悲伤富有生活哲理的名言
- 小学六年级数学计算题整理
- 森林泥炭热解动力学特性和阴燃蔓延规律研究..
- 棉浆粕含水率在线检测研究的开题报告
- 梵·吠檀多·瑜伽——印度宗教思想家维韦卡..
- 2024年总结会议主持词范文汇总8篇
- 桦树花粉致敏原Betv1-FI的表达鉴定及其过敏..
- 小学六年级教学采取的措施
- 框-剪结构剪力墙的合理数量及合理布置研究的..
- 2024年总会计师工作总结3篇
- 2024年性格培养
- 格点规范理论对胶球质量的研究开题报告
- 根管预备对感染根管形成根尖生物膜影响的体..
- 核电厂故障诊断关键方法研究与系统设计的开..
- 核壳复合材料的制备及其药物释放体系的应用..
- 电梯维保报价书
- 棋牌室培训资料
- 电镀黑铬工艺
- 电镀六价铬讲议
- 计算机桌面运维技术服务方案
- 老年慢性阻塞性肺疾病呼吸衰竭患者经鼻气管..
- 《博微电力工程经济评价软件使用手册》
- 少先队植树造林歌
- 《我和星星打电话》课件
- 土方路基压实度超百现象.pdf