prototype-1.6.0.2.js 之Ajax

最新推荐文章于 2024-04-18 11:26:54 发布

weixin_30257433

最新推荐文章于 2024-04-18 11:26:54 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript c# ViewUI

原文链接：http://www.cnblogs.com/angushine/archive/2008/09/01/1280959.html

本文介绍了一个使用Prototype JavaScript库实现的Ajax请求示例。该示例展示了四种不同的Ajax请求方法，包括GET和POST请求，并详细说明了如何处理响应及错误。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ajax.aspx.cs" Inherits="Web.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>Ajax</title>
  <script type="text/javascript" language="javascript" src="js/prototype-1.6.0.2.js"></script>
  <script type="text/javascript" language="javascript">
    function SignIn1()
    {
      var u = $("userName").value;
      var p = $("password").value;
      new Ajax.Request('ajax.aspx?t=si&userName=' + u + '&password=' + p,
      {
        method:'get',
        onSuccess: function(transport){
          var response = transport.responseText || "no response text";
          alert("Success! \n\n" + response);
        },
        onFailure: function(){ alert('Something went wrong

') }
      });
    }

    function SignIn2()
    {
      var u = $("userName").value;
      var p = $("password").value;
      var pars = "&userName=" + u + "&password=" + p;
      new Ajax.Request('ajax.aspx?t=si',
      {
        method:"post",
        parameters:pars,
        onSuccess: function(transport){
          var response = transport.responseText || "no response text";
          alert("Success! \n\n" + response);
        },
        onFailure: function(){ alert('Something went wrong

') }
      });
    }

    function SignIn3()
    {
      var u = $("userName").value;
      var p = $("password").value;
      new Ajax.Request('ajax.aspx?t=si',
      {
        method:'post',
        parameters:$('form').serialize(),
        onSuccess: function(transport){
          var response = transport.responseText || "no response text";
          alert("Success! \n\n" + response);
        },
        onFailure: function(){ alert('Something went wrong

') }
      });
    }

    function SignIn4()
    {
      var u = $("userName").value;
      var p = $("password").value;
      new Ajax.Request('ajax.aspx?t=si',
      {
        method:'post', // 使用GET也可以
        parameters:{'userName' : u, 'password' : p},
        onSuccess: function(transport){
          var response = transport.responseText || "no response text";
          alert("Success! \n\n" + response);
        },
        onFailure: function(){ alert('Something went wrong

') }
      });
    }

    /* Request和Updater的最大区别在于Updater返回的内容可以直接填充到第一个参数“result”*/
    function SignIn()
    {
      var u = $("userName").value;
      var p = $("password").value;
      new Ajax.Updater('result', 'ajax.aspx?t=si',
      {
        method:'post', // 使用GET也可以
        parameters:{'userName' : u, 'password' : p},
        onSuccess: function(transport){
          var response = transport.responseText || "no response text";
          alert("Success! \n\n" + response);
        },
        onFailure: function(){ alert('Something went wrong

') }
      });
    }
  </script>
</head>
<body>
  <form id="form" runat="server">
  <div>
    <input type="text" id="userName" name="userName" /><br />
    <input type="text" id="password" name="userName" /><br />
    <input type="button" id="btnSubmit" name="btnSubmit" onclick="SignIn()" value="提交"/>
    <div id="result"></div>
  </div>
  </form>
</body>
</html>

转载于:https://www.cnblogs.com/angushine/archive/2008/09/01/1280959.html