ajax在asp.net中的应用

（1）Ajax的发展史

Ajax从一种十分模糊稀罕的技术一下变成最热门的东西。Ajax最开始出现的是万维网。比较于桌面应用程序,web应用程序相当缓慢和沉闷。无论如何，人们都喜欢上了web应用程序，因为他们无论在什么地方都能上网，只要身边的计算机上安装一个浏览器就行。之后，微软在Internet Explorer 5中创建了XMLHttpRequest,它使得浏览器端JavaScript可以与web服务器在后台进行通讯而不需要浏览器显示一新的web页面。这使得人们有可能开发更具有流畅性和响应性的web应用程序。Mozilla不久在它的浏览器中也实现了XMLHttpRequest,还有Apple(Safari浏览器)和Opera等公司。

　　XMLHttpRequest原先一定是Web上的一个被保持得最好的秘密。自从它在1998年初次登场,只有很少几个站点使用它,而大多数开发者,如果他们曾经了解过它的话,也从未使用过它。Google最终改变了这一现状-它发行了一系列的高度轮廓性的web应用程序-在XMLHttpRequest技术支持下，它们拥有平滑的新颖的UI。最具有视觉吸引力的是Google Maps,它给你产生这样的幻想-能够在它的很小的窗口中围绕着一个无限大小的地图拖动鼠标。

　　当Google的突出对XMLHttpRequest的使用的事实戏剧性地表明完全可以大大改进web应用程序UI效果的时候，是Jesse James Garrett的一篇论文最终给了这种技术一个可用的名字：Ajax(异步JavaScript和XML)。

（2）Ajax的基本概念

type:请求方式 get/post
url:请求的Uri
async：请求是否为异步
headers：自定义的header参数
data：发往服务器的参数
dataType：参数格式，常见的有string、json、xml等
contents：决定怎样解析response的一个”字符串/正则表达式” map
contentType：发送到服务器的额数据的内容编码类型，它的默认值是"application/x-www-form-urlencoded; charset=UTF-8""。
success:请求成功后调用的一个提示

10.error：请求失败后调用的一个提示

（3）通过Ajax获取内容

（3.1）获取asp.net页面代码

（1）jquery的下载地址：http://www.jq22.com/jquery-info122

自己可以根据自己的需求，下载不同的版本，如下是下载当前的一个界面

（2）创建一个Default.aspx

代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ajax.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>这个是Ajax的练习</title>
    <%---引用如jquery.js文件,如果没有这个文件，可以到网上下载，然后引进到这个项目当中--%>
    <script src="jquery/jquery.js" type="text/javascript"></script>
    <style type="text/css">
       form
        {
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
        }
        
        #container
        {
            margin: 100px;
            height: 300px;
            width: 500px;
            background-color: #eee;
            border: double 1px #0e0;
        }
    </style>
</head>
<body>
     <form id="form1" runat="server">
    <div id="container">
        <input type="button" value="Test Ajax" onclick="testGet()" />
        <br />
    </div>
    <script type="text/javascript">
        function setContainer(text) {
            document.getElementById("container").innerHTML += ('<br/>' + text);
        }

        function testGet() {
            $.ajax({
                type: 'get',<%----get的请求----%>
                url: 'testAjax.aspx',<%-----请求成功后的路径-----%>
                async: true,<%---是否异步请求----%>
               <%---请求成功所弹出的内容---%>
                success: function (result) {
                    alert(result);
                },
                <%---请求错误时所弹出的提示---%>
                error: function () {
                    setContainer('ERROR!');
                }
            });
        }
    </script>
    </form>
</body>
</html>

（3）运行效果

在键盘上按CTRL + shift + w就可以运行了

未点击Test Ajax运行之前：

点击Test ajax之后

（4）获取wep界面

（1）前端Default.aspx代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ajax.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>这个是Ajax的练习</title>
    <%---引用如jquery.js文件,如果没有这个文件，可以到网上下载，然后引进到这个项目当中--%>
    <script src="jquery/jquery.js" type="text/javascript"></script>
    <style type="text/css">
       form
        {
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
        }
        
        #container
        {
            margin: 100px;
            height: 300px;
            width: 500px;
            background-color: #eee;
            border: double 1px #0e0;
        }
    </style>
</head>
<body>
     <form id="form1" runat="server">
    <div id="container">
        <input type="button" value="Test Ajax" onclick="testGet()" />
        <input type="button" value="Test Ajax2" onclick="testGet2()" />
        <br />
    </div>
    <script type="text/javascript">
        function setContainer(text) {
            document.getElementById("container").innerHTML += ('<br/>' + text);
        }

        function testGet() {
            $.ajax({
                type: 'get',<%----get的请求----%>
                url: 'testAjax.aspx',<%-----请求成功后的路径-----%>
                async: true,<%---是否异步请求----%>
               <%---请求成功所弹出的内容---%>
                success: function (result) {
                    alert(result);
                },
                <%---请求错误时所弹出的提示---%>
                error: function () {
                    setContainer('ERROR!');
                }
            });
        }

function testGet2(){
$.ajax({
type:'get',
url:'testAjax.aspx',
data:{action:'getTime'},
success:function(result){
setContainer(result);
},
error:function(){
setContainer('ERROR!');
}
});
}
    </script>
    </form>
</body>
</html>

（2）前端testAjax.aspx代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testAjax.aspx.cs" Inherits="Ajax.testAjax" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Ajax实例1</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="scriptmanager1" runat="server">
    <Services>
    <asp:ServiceReference Path="~/Service1.svc" />
    </Services>
    </asp:ScriptManager>
    </div>
    <div>
    用户名：<input id="tbxUid" type="text" /><br/>
    密码：<input id="tbxpwd" type="text" /><br />
    <input id="button1" type="button" value="Submit" onclick="Button1_onclick();" />
    </div>
    </form>
</body>
</html>

（3）后台testAjax.aspx代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace Ajax
{
    public partial class testAjax : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        public void test()
        {
            string action = Request.QueryString["action"];
            Response.Clear();
            if (!string.IsNullOrEmpty(action))
            {
                switch (action)
                {
                    case "getTime":
                        Response.Write(GetTime());
                        break;
                    case "getDate":
                        Response.Write(GetDate());
                        break;
                }
            }
            Response.End();
        }

        private string GetDate()
        {
            return DateTime.Now.ToShortDateString();

        }
        private string GetTime()
        {
            return DateTime.Now.ToShortDateString();
        }
    }
}

（4）运行的效果

未运行之前效果：