一.摘要

本系列文章将带您进入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

                {
                    xmlHttp = new
 ActiveXObject("Msxml2.XMLHTTP"
);
                }
                catch
 (e)
                {

                    try

                    {
                        xmlHttp = new
 ActiveXObject("Microsoft.XMLHTTP"
);
                    }
                    catch
 (e)
                    {
                        alert("您的浏览器不支持AJAX！"
);
                        return
 false
;
                    }
                }
            }
            return
 xmlHttp;
        }        
    </
script
>


</
head
>

<
body