前臺怎樣獲取後臺ajax資料簡單介紹

admin發表於2017-02-10
可能很多ajax的初學者，對於如何從後臺使用ajax在前臺顯示資料比較迷茫。

其實非常的簡單，下面就通過程式碼例項做一下演示。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function creatXMLHttpRequest() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xmlhttp;
}
 
window.onload = function(){
  var odiv = document.getElementById("antzone");
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    var xmlHttpObject = creatXMLHttpRequest();
    xmlHttpObject.onreadystatechange = function () {
      if (xmlHttpObject.readyState == 4 && xmlHttpObject.status == 200) {
        document.getElementById("antzone").innerHTML = xmlHttpObject.responseText;
      }
    }
    xmlHttpObject.open("get", "demo/ajax/net/getDate.ashx", true);
    xmlHttpObject.send();
  }
}
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼實現了我們的要求，就是從資料讀取資料，然後以表哥的形式顯示出來。

下面是c#後臺程式碼:

[C#] 純文字檢視 複製程式碼
namespace ajax
{
    /// <summary>
    /// getDate 的摘要說明
    /// </summary>
    public class getDate : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string tableStr = "<table>";
            DataSet ds = done();
            if (ds.Tables[0].Rows.Count > 0) 
            { 
                for(int index=0;index<ds.Tables[0].Rows.Count;index++)
                {
                    tableStr = tableStr 
                    + "<tr><td>"
                    + ds.Tables[0].Rows[index]["username"].ToString() + "</td><td>"
                    + ds.Tables[0].Rows[index]["address"].ToString() + "</td></tr>";
                }
                tableStr=tableStr+"</table>";
            }
            context.Response.Write(tableStr);
        }
        private DataSet done() 
        {
            string connString = ConfigurationManager.ConnectionStrings["access_con"].ConnectionString;
            string configPath = ConfigurationManager.ConnectionStrings["access_path"].ConnectionString;
            string conPath = HttpContext.Current.Server.MapPath(configPath);
            OleDbConnection conn = new OleDbConnection(connString + conPath);
             
            string sql = "select * from code";
            OleDbCommand cmd = new OleDbCommand(sql,conn);
            OleDbDataAdapter da = new OleDbDataAdapter(cmd);
            DataSet ds = new DataSet();
            da.Fill(ds,"ds");
            return ds;
        }
 
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

面的效果是通過原生javascript實現的，當前使用jQuery更為方便一些。

相關文章