使用 ajax 异步调用数据

最新推荐文章于 2023-03-04 19:37:32 发布

weixin_30566149

最新推荐文章于 2023-03-04 19:37:32 发布

阅读量70

点赞数

CC 4.0 BY-SA版权

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/enamorbreeze/p/6283664.html

本文介绍了一种使用Ajax技术实现网页上异步数据加载的方法。通过一个具体实例展示了如何编写Ajax脚本来请求服务器端的数据，并将这些数据动态地显示在网页中。此外还涉及了服务器端代码如何接收并响应Ajax请求。

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

ajax 脚本

<script type="text/javascript" >
       function show(page)
        {
          var xmlhttp;
          try
          {
            xmlhttp=new XMLHttpRequest();
          }
          catch(e)
          {
             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4)
          {
            if (xmlhttp.status==200)
            {
                var data=xmlhttp.responseText;        
                document.getElementById("divInfor").innerHTML=unescape(data);   //divInfor 需要显示异步调用数据的地方
            }
          }
        }
            xmlhttp.open("post", "showInfor.aspx", true);    //showInfor.aspx 写异步调用数据的地方
            xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
            xmlhttp.send("lx=all&page="+escape(page));       //需要传递的参数
        }    
    </script>

HTML页面

<form id="form1" runat="server">
    <div>
      如何使用ajax来实现异步调用数据
    </div>
    <div><input type="button"  value="显示ajax内容"  onclick="show('5')"  /></div>
    <br />
    <div id="divInfor"></div>
</form>

异步调用页面代码 showInfor.aspx

public partial class showInfor : System.Web.UI.Page
{
    protected string strType = "";
    protected string strPage = "";

    protected void Page_Load(object sender, EventArgs e)
    {
        strType = Convert.ToString(Request.Form["lx"]);              //参数调用是用Request.Form  而不是Request.QueryString 
        strPage = Convert.ToString(Request.Form["page"]);

        Response.Write("类型为：" + strType + "<br /> 页面为：" + strPage);
    }
}