ASP.NET Ajax和Jquery Ajax实例

最新推荐文章于 2016-08-14 23:39:30 发布

奋斗的小青年_

最新推荐文章于 2016-08-14 23:39:30 发布

阅读量2.8k

点赞数 1

分类专栏： B/S学习文章标签： Ajax JQuery Ajax

本文链接：https://blog.csdn.net/mascf/article/details/46563057

版权

B/S学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在图书信息管理系统中，用到了Ajax和JQueryAjax，算是都体验了一把。刚开始用的时候很陌生，迟迟不敢下手。但是不动手什么时候也成功不了，就上网找例子，照着敲吧。当然，中间也遇到了一些小的错误，最终还是成功了。

Ajax

AJAX即“AsynchronousJavascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下对网页的某部分进行更新。

下面做了Ajax的demo

JS代码

<span style="font-size:18px;">    <script type="text/javascript">

        //第一步：创建xmlHttp对象
        var xmlHttp = createXmlHttp();
        function createXmlHttp() {
            var request;
            if (typeof (XMLHttpRequest) == "undefined") {
                //IE老版本中创建的方式
                request = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else {
                //支持标准的浏览器创建的方式
                request = new XMLHttpRequest();
            }
            return request;
        }

        function ajax() {
            //第二步：open(true，表示异步)
            xmlHttp.open("GET", "ajax.aspx?haha=" + document.getElementById("first").value, true);
            //第三步：获取查询回来的值
            xmlHttp.onreadystatechange = function () {
                //4表示xmlHttp交互完成，200与后台交互返回的状态码表示正常交互完成，404表示文件未找到。500是出现内部服务器错误
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    document.getElementById("second").value = xmlHttp.responseText;
                }
            }
            //第四步：发送
            xmlHttp.send();
        }
    </script></span>

HTML部分代码

<span style="font-size:18px;"><body>
    <input type="text" id="first" οnkeyup="ajax()" />
    <input type="text" id="second"  />
</body></span>

服务器端代码

<span style="font-size:18px;">using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace 图书管理系统demo
{
    public partial class ajax : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //string.IsNullOrEmpty("string")来判断string是否为null或者空，是空或Null返回true
            if (! string.IsNullOrEmpty(Request.QueryString["haha"]) )
            {
                Response.Write(Request.QueryString["haha"]);   //输出要输出的内容
                Response.End(); //提示输出，要不然会输出整个html
            }

        }
    }
}</span>

JQuery Ajax

编写常规的Ajax代码并不容易，因为不同的浏览器对Ajax的实现并不相同。这意味着必须编写额外的代码对浏览器进行测试。不过，JQuery团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现Ajax功能。

JQuery Ajax的demo

js代码

<span style="font-size:18px;"><head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <%-- 用jquery的时候一定要记得加引用 --%>
    <script src="Scripts/jquery-2.1.4.js"></script>
   <script type="text/javascript">


       function jqueryAjax()
       {
           $.ajax({
               //指定将值传给谁，然后用了Math.random防止页面缓存（因为执行的Page_Load，所以加上了haha这个get方式提交，来在前段判断提交是否为空
               url: 'ajax.aspx?soso=' + Math.random(), //跳转的action
               //post传递的数据
               data: {
                   //是键、值得形式
                   chuandi: document.getElementById("second").value   //传递第二个文本框的值
               },
               type:'post',     //post方式
               cache: false,     //防止缓存
               success: function (data)
               {
                   document.getElementById("first").value = data;
               }
           });
       }
   </script>
</head></span>

HTML部分代码

<span style="font-size:18px;"><body>
    <input type="text" id="first"  />
    <input type="text" id="second" οnkeyup="jqueryAjax()" />
</body></span>

服务器端代码

<span style="font-size:18px;">using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace 图书管理系统demo
{
    public partial class ajax : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            if (! string.IsNullOrEmpty(Request.QueryString["soso"]))
            {
                Response.Write(Request.Form["chuandi"]);
                Response.End();
            }
        }
    }
}</span>

总结：现在还只是限于运用，对于理论知识还有很多的欠缺。还需要不断的学习。在学习这方面知识的时候，参考了很多例子。有一个网站做的额很不错，里面有很多的例子，在这里推荐一下：http://www.w3school.com.cn/