`
greenwen
  • 浏览: 220456 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

使用原始Ajax访问与使用jquery的Ajax访问的实例

阅读更多
原始Ajax的访问

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht
ml1/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>    
    <button id="btnAjaxOld">原始Ajax调用</button><br />
    <br />
    <div id="divResult"></div>
</body>
</html>


jquery的访问
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
l1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Ajax</title>
    <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
    <script type="text/javascript">
        $(function()
        {            
            $("#btnGetHtml").click(function(event)
            {
                $("#divResult").load("data/AjaxGetCityInfo.aspx", { "resultType": "html" });
            });       
        })        
    </script>
</head>
<body>    
    <button id="btnAjaxJquery">使用jQuery的load方法</button>
    <br />
    <div id="divResult"></div>
</body>
</html>
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    JS使用AjAX实例,JQUERY使用AJAX实例

    **JS使用AJAX实例** AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在JavaScript中,我们通常使用`XMLHttpRequest`对象或者jQuery库来实现AJAX请求。 1...

    Jquery Ajax分页(有实例)

    本篇文章将深入探讨jQuery AJAX分页的原理与实践,通过具体的实例来展示如何实现炫酷的分页功能。 首先,理解jQuery AJAX的核心概念。AJAX允许我们在不刷新整个页面的情况下,与服务器交换数据并更新部分网页内容。...

    asp+jquery ajax实例源码,添加,删除,修改,分页

    综上所述,这个"asp+jquery ajax实例源码"展示了如何利用ASP作为服务器端语言处理数据,结合jQuery的AJAX功能,实现无刷新的交互体验,优化用户在添加、删除、修改和分页操作中的浏览感受。通过学习和理解这个实例,...

    Asp.Net MVC之jQuery与AJAX操作实例

    本实例将深入探讨如何在Asp.Net MVC项目中应用jQuery与AJAX。 一、jQuery简介 jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画设计以及Ajax交互。在Asp.Net MVC项目中,jQuery可以帮助开发者更...

    jquery-ajax实例

    总结一下,这个"jQuery-AJAX实例"涵盖了以下几个关键知识点: 1. jQuery的$.ajax()方法,用于发起Ajax请求。 2. JSON数据格式的使用,包括Java Bean到JSON的转化。 3. jQuery如何解析服务器返回的JSON数据,并更新...

    ajax与jquery实现的简单验证实例

    这个“ajax与jquery实现的简单验证实例”着重于如何利用这两种技术进行前端数据验证,提高用户体验,减少不必要的服务器交互。在这个实例中,我们将探讨Ajax的核心概念,jQuery库的优势,以及它们如何结合实现表单...

    jQuery Ajax 实例 全解析

    jQuery Ajax 实例 全解析; jQuery Ajax 实例 全解析;

    ajax (部分案例使用jquery)实例集锦

    三、Ajax实例应用 1. 数据提交:通过Ajax实现表单数据的异步提交,避免页面刷新,提高用户交互性。 2. 分页加载:利用Ajax实现分页功能,只加载当前页数据,节省资源并加快页面响应。 3. 实时搜索:输入框实时查询,...

    jquery文本框自动补全ajax autocomplete 完整实例

    在本文中,我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见,它能够提高用户输入的效率和用户体验。 首先,让...

    JqueryAjax简单实例

    在这个"JqueryAjax简单实例"中,我们主要关注如何在Visual Studio 2005 C#环境下利用jQuery实现AJAX的功能。首先,我们需要确保项目中已经引入了jQuery库。这通常通过在HTML头部添加jQuery库的CDN链接或者将jQuery....

    jquery ajax实例点击按钮触发Ajax loading

    在网页开发中,jQuery AJAX是一种常用的异步数据通信技术,它允许我们在不刷新整个页面的情况下与服务器进行数据交互。在本实例中,我们将探讨如何利用jQuery的AJAX功能,通过点击按钮来触发一个加载动画(通常表现...

    jquery和ajax结合的使用实例

    jQuery简化了JavaScript的DOM操作、事件处理和动画制作,而Ajax(异步JavaScript和XML)则允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。本篇文章将深入探讨如何将两者结合,实现用户名和密码的...

    使用jQuery ajax提交表单代码

    首先,jQuery的$.ajax()函数是进行Ajax请求的核心,它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单代码”的资源中,我们可以期待看到一个清晰的示例,展示如何将表单数据发送到服务器,并处理...

    基于JQuery框架的AJAX实例代码

    在这个"基于JQuery框架的AJAX实例代码"中,我们将探讨如何使用jQuery提供的API,包括`$.ajax`,`$.post`和`$.get`,来实现异步数据传输。 1. **$.ajax()** `$.ajax()`是jQuery中最全面的AJAX方法,它可以处理GET和...

    C#.net下jquery ajax实例及教程

    总的来说,这个C#.NET下的jQuery AJAX实例和教程将涵盖这些主题,并提供实际的代码示例和可运行的源码,帮助开发者更好地理解和应用AJAX技术。通过学习,你将能够构建出高效、用户友好的Web应用。文档`Jquery.doc`...

    ASP jQuery AJAX无刷新评论留言实例(好几个)

    在这个实例中,我们将探讨如何使用jQuery和AJAX技术在ASP.NET环境中实现无刷新的评论留言功能。 **jQuery** 是一个轻量级的JavaScript库,极大地简化了DOM操作、事件处理和动画效果。它使得开发者能更高效地编写...

    Jquery Pagination AJax 分页实例 For ASP

    本实例将详细讲解如何利用jQuery Pagination插件与AJAX技术在ASP环境中实现分页功能,同时连接到Access数据库进行数据读取。 **jQuery Pagination插件** 是一个轻量级的JavaScript组件,它提供了丰富的选项和事件,...

    一个完整的jquery+ajax传送请求的实例

    本文将深入探讨一个完整的jQuery+AJAX传输请求的实例,旨在帮助开发者理解如何有效地使用这两种技术实现异步数据通信。 首先,jQuery是一个强大的JavaScript库,它为DOM操作、事件处理、动画效果和Ajax交互提供了...

    jquery ajax用json传值实例asp.net

    在本文中,我们将深入探讨如何使用jQuery AJAX与ASP.NET一起工作,通过JSON格式传递和接收数据。这非常适合初学者,因为我们将逐步解析整个过程,并提供实际的代码示例。 首先,理解jQuery AJAX的核心概念至关重要...

Global site tag (gtag.js) - Google Analytics