学习Ajax做的一个异步调用例子

最新推荐文章于 2025-06-17 21:00:00 发布

xbf321

最新推荐文章于 2025-06-17 21:00:00 发布

阅读量963

点赞数

CC 4.0 BY-SA版权

分类专栏： [02]Asp.Net Ajax学习文章标签： ajax xmlhttprequest textbox javascript server asp

本文链接：https://blog.youkuaiyun.com/xbf321/article/details/1547646

[02]Asp.Net Ajax学习专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的Ajax应用案例，通过用户输入邮编实时查询并显示对应的城市名。使用了ASP.NET和JavaScript实现前后端交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看了OkAjax网站上的例子，学习了一下Ajax，自己仿照作了做了，果然挺好，下面他代码公布一下；
首先，新建一页面，把一下html代码覆盖原html即可，.cs文件不用谢任何代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    var zipField = null;
function zipChanged(){
zipField = document.getElementById("zipcode")
var zip = zipField.value;
updateCity(zip);
}
function updateCity(zip) {
　var cityField = document.getElementById("city");
　ask("Default2.aspx? lookupType=city&zip="+zip,cityField,zipField);
}
</script>
<script language="javascript" type="text/javascript">
HTTPRequest = function () {
   var xmlhttp=null;
   try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (_e) {
      try {
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (_E) {    }
   }
   if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
     try {
        xmlhttp = new XMLHttpRequest();
     } catch (e) {
        xmlhttp = false;
   }  }
   return xmlhttp;
}
function ask(url, fieldToFill, lookupField)
{
      var http = new HTTPRequest();
         http.open("GET", url, true);
      http.onreadystatechange = function ()
      {
         handleHttpResponse(http, fieldToFill, lookupField)
      }
      http.send(null);
}
function handleHttpResponse(http, fieldToFill, lookupField)
{
  if (http.readyState == 4)
  {
    result = http.responseText;
       if (-1 != result.search("null"))
       {
        lookupField.style.borderColor = "red";
        fieldToFill.value = "";
    }
    else
    {
        lookupField.style.borderColor = "";
        fieldToFill.value = result;
    }
   }
}
    </script>
</head>
<body>
    <form id="form1" runat="server">
        邮编：<asp:TextBox ID="zipcode" runat="server" onKeyUp="zipChanged()" ></asp:TextBox>
        城市：<asp:TextBox ID="city" runat="server"></asp:TextBox> 
    </form>
</body>
</html>

然后在新建一页面，起名叫Default2.aspx,然后，把里面除了<@Page>这一行不用删，其他的代码，全删掉
最后把此.cs文件，文件覆盖掉你的cs文件即可

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            string sValue = Request.QueryString["zip"].ToString();
            switch (sValue)
            {
                case "0312":
                    Response.Write("河北");
                    break;
                case "010":
                    Response.Write("北京");
                    break;

            }
        }
        catch (System.Exception e1)
        {

        }
    }
}

以上就是，可以测试一下哦！