zoukankan      html  css  js  c++  java
  • ASP.NET and Ajax using XmlHttpRequest

    1. 使用AJAX
    If you are not interested in using the ASP.NET AJAX library offered for ASP.NET, but would like to feature small amounts of AJAX functionality on your pages, you can do this easily with some javascript and a receptive page.

    UPDATE: A much simpler way to add small doses of AJAX fuctionality to ASP.NET Web Forms can be achieved by using jQuery. Please see this article: http://www.mikesdotnetting.com/Article/104/Many-ways-to-communicate-with-your-database-using-jQuery-AJAX-and-ASP.NET

    I only use AJAX in small doses on web sites - mainly to improve the user-experience. Typical instances will involve retrieving a full record based on a users sleection in a drop down list. I don't want to perform a full page postback, so I get the javascript xmlhttpserver object to do it for me behind the scenes. Here's an example that fetches the address details for a Northwind Traders customer.

    First, a generic function to instantiate an instance of xmlhttprequest or xmlhttp, depending on the browser:

      function GetXmlHttpObject(handler)
      { 
      var objXmlHttp=null
      if (navigator.userAgent.indexOf("MSIE")>=0)
      { 
      var strName="Msxml2.XMLHTTP"
      if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
      {
      strName="Microsoft.XMLHTTP"
      } 
      try
      { 
      objXmlHttp=new ActiveXObject(strName)
      objXmlHttp.onreadystatechange=handler 
      return objXmlHttp
      } 
      catch(e)
      { 
      alert("Error. Scripting for ActiveX might be disabled") 
      return 
      } 
      } 
      if (navigator.userAgent.indexOf("Mozilla")>=0)
      {
      objXmlHttp=new XMLHttpRequest()
      objXmlHttp.onload=handler
      objXmlHttp.onerror=handler 
      return objXmlHttp
      }
      } 
    

    Now, a simple dropdownlist populated by a SqlDataSource control that fetches the CustomerID and Customer Name. Note the empty div, CustomerDetails below the dropdownlist:

    <div>
    <asp:DropDownList ID="DropDownList1" 
    runat="server" 
    DataSourceID="SqlDataSource1"
    DataTextField="CompanyName" 
    DataValueField="CustomerID">
    </asp:DropDownList>
    
    <asp:SqlDataSource 
    ID="SqlDataSource1" 
    runat="server" 
    ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|Northwind.mdb"
    DataSourceMode="DataReader" 
    ProviderName="System.Data.OleDb"
    SelectCommand="SELECT [CustomerID], [CompanyName] FROM [Customers]">
    </asp:SqlDataSource>
    
    </div>
    <div id="CustomerDetails"></div>
    

    Two more javascript functions are needed. One to fire the GetXmlHttpObject method, and denote the page to send a request to, and one to handle the response by checking the readtState property of the object for a value of 4 or complete, then to write the reponse to the empty div:

      function GetCustomer(id)
      { 
      var url="FetchCustomer.aspx?CustomerID=" + id ;
      xmlHttp=GetXmlHttpObject(stateChanged);
      xmlHttp.open("GET", url , true);
      xmlHttp.send(null);
      } 
      
      
      function stateChanged() 
      { 
      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
      {
      document.getElementById('CustomerDetails').innerHTML=xmlHttp.responseText;
      }
      } 
    

    So now we have a page that gets called by xmlhttp (FetchCustomer.aspx) and we have a value to pass to the querystring for the page. So the next thing to do is to add an event handler to the DropDownList that will fire the GetCustomer() event and pass a CustomerID value:

      if (!Page.IsPostBack)
      {
      DropDownList1.DataBind();
      DropDownList1.Items.Insert(0, "");
      }
    
      DropDownList1.Attributes["onChange"] = "GetCustomer(this.value);";
      HttpResponse myHttpResponse = Response;
      HtmlTextWriter myHtmlTextWriter = new HtmlTextWriter(myHttpResponse.Output);
      DropDownList1.Attributes.AddAttributes(myHtmlTextWriter);
    

    And finally, the code for the FetchCustomer.aspx page. Everyting has been removed from the .aspx file except the first line. We don't want DocTypes or default <form> tags disturbing the piece of html to be emitted in the response:

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

    And the code-behind makes doubly sure by calling Response.Clear() before querying the database and emitting the resulting data as html:

    using System;
    using System.Data;
    using System.Data.OleDb;
    using System.Text;
    
    public partial class FetchCustomer : System.Web.UI.Page
    {
      protected void Page_Load(object sender, EventArgs e)
      {
        Response.Clear();
        StringBuilder sb = new StringBuilder();
        sb.Append("<br />");
        string provider = "Provider=Microsoft.Jet.OLEDB.4.0;";
        string db = "Data Source=|DataDirectory|Northwind.mdb";
        string connstr = provider + db;
        string query = "SELECT * FROM Customers WHERE CustomerID = ?";
        OleDbConnection conn = new OleDbConnection(connstr);
        OleDbCommand cmd = new OleDbCommand(query, conn);
        cmd.Parameters.AddWithValue("", Request.QueryString["CustomerID"]);
        conn.Open();
        OleDbDataReader dr = cmd.ExecuteReader();
        while(dr.Read())
        {
          sb.Append(dr[1].ToString() + "<br />");
          sb.Append(dr[4].ToString() + "<br />");
          sb.Append(dr[5].ToString() + "<br />");
          sb.Append(dr[6].ToString() + "<br />");
          sb.Append(dr[7].ToString() + "<br />");
          sb.Append(dr[8].ToString() + "<br />");
          sb.Append("Tel: " + dr[9].ToString() + "<br />");
        } 
        dr.Close();
        dr.Dispose();
        conn.Close();
        conn.Dispose();
        Response.Write(sb.ToString())
        Response.End();
      }
    }
    
    2. ASP.Net集成的方案
    http://www.asp.net/web-forms/tutorials/aspnet-ajax/understanding-partial-page-updates-with-asp-net-ajax

  • 相关阅读:
    2019 NJCTF WarmUp
    家用路由器渗透过程总结
    IOT 安全资料整合(主要是路由器)
    由一道工控路由器固件逆向题目看命令执行漏洞
    路由器漏洞挖掘之 DIR-850/645 命令执行漏洞复现
    路由器漏洞挖掘之 DIR-815 栈溢出漏洞分析
    从外网到内网的渗透姿势分享
    ESP8266 显示实时天气信息
    静态链接学习之 ELF 文件 DIY
    ROP-Tamu CTF 2018-pwn5
  • 原文地址:https://www.cnblogs.com/blackbean/p/2966070.html
Copyright © 2011-2022 走看看