使用 ajax 异步调用数据

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);
    }
}