从零开始学习jQuery (六) AJAX快餐
一.摘要
本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.
本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式.
二.前言
Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数来帮助我们统一这种差异, 并且让调用Ajax更加简单.
三.原始Ajax与jQuery中的Ajax
首先通过实例, 来看一下jQuery实现Ajax有多简单. 下面是一个使用原始Ajax的示例:
<!
DOCTYPE
html
PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
>
jQuery Ajax</
title
>
<script type="text/javascript"
>
$(function
()
{
var
xhr = new
AjaxXmlHttpRequest();
$("#btnAjaxOld"
).click(function
(event
)
{
var
xhr = new
AjaxXmlHttpRequest();
xhr.onreadystatechange = function
()
{
if
(xhr.readyState == 4)
{
document.getElementById("divResult"
).innerHTML = xhr.responseText;
}
}
xhr.open("GET"
, "data/AjaxGetCityInfo.aspx?resultType=html"
, true
);
xhr.send(null
);
});
})
//跨浏览器获取XmlHttpRequest对象
function
AjaxXmlHttpRequest()
{
var
xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp = new
XMLHttpRequest();
}
catch
(e)
{
// Internet Explorer
try
{
相关文档：
Ajax调用远程服务器数据会出现拒绝访问的问题。这是因为基于安全的考虑，AJAX只能访问本域下的资源，而不能跨域访问。也就是说，domain1.com站点中的AJAX只能访问domain1.com站点下的资源,而不能跨域访问domain2.com站点中的资源，这就是AJAX跨域问题。
解决思路：页面在提交请求时 ......
JSP:
课程名称:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/options.js"></script>
<html:select property="icourseId" onchange="change(this)" style="width:180px;">
<html:opt ......
事件触发：
<input name="keyword" onkeyup="LoadResults(this.value)" id="keyword" runat="server"/>
客户端主体：
//定义用户控件ID全局变量
var ClientID;
function ShowDiv(divid)
{
//...
}
function HideDiv(divid)
{
//...
}
//页面加载时的处理
function BodyLoad()
{
HideD ......
AJAX简介
一、AJAX是什么
在传统的web应用中，用户与应用的每一次交互，都是首先用户通过浏览器向服务器端发送一个
请求，服务器解析这个请求，将相应的响应信息返回给浏览器。在服务器端业务逻辑非常复杂或者需要耗时较长的情况下，浏览器等待刷新时，页面经常是一片空
白，用户只能被动等待服务器端响应完成，在此期� ......
