AJAX学习 22日 入门

AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。

AJAX 是一种在 2005 年由 Google 推广开来的编程模式。

AJAX 不是一种新的编程语言，而是一种使用现有标准的新方法。

通过 AJAX，你可以创建更好、更快以及更友好的 WEB 应用程序。

AJAX 基于 JavaScript 和 HTTP 请求（HTTP requests）。

 

学习自己购买的书籍，观看实例，掌握大概技术。

适用：异步操作、响应及时、小数据交互，异步交互

实现手段：XMLHTTP+WebForm,XMLHTTP+HttpHandler,Call Back,Ajax框架（现在一般使用这个）

脚本管理器ScriptManager,必须首先添加该控件

脚本管理器代理ScriptManagerProxy（母板、用户控件）

UpdatePanel(页面中只要添加这么一个，就能够只刷新部分页面）

加载提示控件UpdateProgress

定时器 Timer 定期触发些事件

 

Hello World 程序实现

 创建一个WebService处理系统请求，程序主界面利用脚本请求这个 WebService

这个程序由系统显示界面+WebService组成

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
/// <summary>
/// Hello Word
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class WebService : System.Web.Services.WebService {
    public WebService ()
    {
        //如果使用设计的组件，请取消注释以下行
        //InitializeComponent();
    }
    //HelloWord调用的方法
    [WebMethod]
    public string HelloWorld(string instr) {
        string str = "服务器asp.net ajax得到了您输入的信息：" + instr  + "<br/>您的IP地址是：";
        str += System.Web.HttpContext.Current.Request.UserHostAddress;//ip
        str += "<br/>当前服务器的时间：";
        str += DateTime.Now.ToLocalTime();//时间
        return str ;
    }
}

程序主界面引用该服务

<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head id="Head1" runat="server">
    <title>Hello</title>
    <script type="text/javascript">
  //web服务成功调用后的回调函数
    function OnShow(result)
    {
    var s = $get("msg_display");
    s.innerHTML = result.toString();
    }
  function SayHello()//调用服务器端的Web 服务
    {
    var fs = WebService;//web 服务
    fs.HelloWorld($get("testmsg").value,OnShow);//调用
    return false;
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/WebService.asmx" />
            </Services>
        </asp:ScriptManager>
        <div style="width: 400px; margin-top :50px; text-align: center;">
            &nbsp;<input id="testmsg" runat="server" type="text" value="Hello AJAX" style="width: 214px"><br />
            <br />
            <asp:Button ID="Button2" runat="server" OnClientClick="return SayHello()" Text="提交给WebService.asmx" />
            &nbsp;<br />
            <br />
            <div id="msg_display" style="background: yellow; font-weight: bold; font-size: 13px"
                runat="server">
                从服务器返回的信息在这里显示...</div>
            &nbsp; &nbsp; &nbsp; &nbsp;
        </div>
    </form>
</body>
</html>

 

posted @ 2009-05-23 16:57  minmin8110  阅读(116)  评论(0)    收藏  举报