Javascript XMLHttpRequest asp.net は、refreshing_javascript スキルなしでデータベース データを読み取ります

复制代 代码如下:

/**////
/// CDATA を生成するポイント
///
/// XmlDocument
/// 元素名
/// CDATA值
/// XmlElement
public static XmlElement CreateXmlNodeCDATA(XmlDocument xDocument, string elementName, string cdataValue)
{
try
{
XmlElement xElement = xDocument.CreateElement(elementName);
XmlCDataSection cdata = xDocument.CreateCDataSection(cdataValue);
xElement.AppendChild(cdata);
return xElement;// 返す
}
catch (例外 ex)
{
throw ex;
}
}
Helper#region ヘルパー
/**////
/// 向页面输出力xml 内容
///
/// xml 内容
private void ResponseXML(XmlDocument xmlNode)
{
System.Web.HttpContext.Current.Response.Expires = 0;
System.Web.HttpContext.Current.Response.Clear();
System.Web.HttpContext.Current.Response.Cache.SetNoStore();
System.Web.HttpContext.Current.Response.ContentType = "text/xml";
System.Web.HttpContext.Current.Response.Write(xmlNode.OuterXml);
System.Web.HttpContext.Current.Response.End();
}
/**////
/// 创建Ajax は情報を返します
///
///
private void CreateResponse(string result)
{
XmlDocument xDocument = new XmlDocument();
XmlDeclaration detect = xDocument.CreateXmlDeclaration("1.0", "UTF-8", "yes");
XmlElement root = xDocument.CreateElement("root");
XmlElement eleResponse = CreateXmlNodeCDATA(xDocument, "response", result);
root.AppendChild(eleResponse);
xDocument.AppendChild(declare);
xDocument.AppendChild(root);
ResponseXML(xDocument);
System.Web.HttpContext.Current.Response.End();
}
/** **////
/// 向页面输出力xml 内容
///
/// xml 内容
private void ResponseXML(XmlDocument xmlNode)
{
System.Web.HttpContext.Current.Response.Expires = 0;
System.Web.HttpContext.Current.Response.Clear();
System.Web.HttpContext.Current.Response.Cache.SetNoStore();
System.Web.HttpContext.Current.Response.ContentType = "text/xml";
System.Web.HttpContext.Current.Response.Write(xmlNode.OuterXml);
System.Web.HttpContext.Current.Response.End();
}


インターネット上には Ajax に関する多くのトピックがありますが、その多くはコントロール オープン ソース フレームワークを使用して実装されており、特に vs2008 は多くの ajax コントロールを統合し、ajax 実行プロセスを緊密にカプセル化しています。私もこれらのフレームワークとコントロールを使用したことがありますが、とても快適です。しかし最近、ふと思い立って、ajax がどのように実行されるのかを見てみたいと思い、自分で実装してみようと思い、たまたま js のスキルを鍛えました。タイトルにあるように、早速、実行プロセスを見てみましょう。
1. この実装では、AjaxTest6.aspx と Ajax.aspx の合計 2 つのページを使用します
このうち、AjaxTest6.aspx はリクエストを開始するページであり、Ajax.aspx は AjaxTest6.aspx のリクエストを取得し、処理します。
処理プロセス: (1) AjaxTest6.aspx が http リクエストを開始します ---> (2) Ajax.aspx が URL 内のパラメーターを取得し、これらのパラメーターに基づいてデータベース内でクエリ操作を実行し、結果 (データ) を返します。 set) -- ->(3) 返されたデータセットを XML として処理し、応答として出力します。現在の出力データの形式は xml であることに注意してください --- (4) AjaxTest6.aspx は Ajax.aspx の出力 xml データを取得し、それを表示します
2. AjaxTest6.aspx の js コード

コードをコピーします コードは次のとおりです。

< script language="javascript" type="text/javascript" >
< script language="javascript" type="text/javascript">


説明: 最初の関数 createXMLHttpRequest は、XMLHttpRequest オブジェクトを作成するために使用されます。このオブジェクトの詳細な説明については、関連記事を参照してください。ここで、このオブジェクトが http リクエストを使用してデータを送信するときに使用されることを理解するだけで済みます。 xml を使用してデータを転送します。宣言後、以下で使用できます。
2 番目の関数は、http リクエストを送信するために使用されます。通常、URL には xmlhttp.open("GET","Tools/Ajax. aspx? cateid=" vr1,true); この文から、パラメータ付きのリクエストが Ajax.aspx に送信されることがわかります。Ajax.aspx はこのパラメータを取得し、このパラメータに基づいてデータベースでクエリを実行します。プロセスについては後で詳しく説明します。
この関数では、センテンス view plaincopy to Clipboardprint?
xmlhttp.onreadystatechange=handleStateChange;//このメソッドはリクエストのステータスが変化したときに呼び出されます。
xmlhttp.onreadystatechange=handleStateChange;/ /In このメソッドは、リクエストのステータスが変化したときに呼び出されます。
xmlhttp オブジェクトは実行中に複数のステージに分割されるため、各ステージは異なるステータス値に対応します。0 は初期化を意味し、1 はロード中を意味し、2 はロード済みを意味します。インタラクティブ、4 は完了を意味します
したがって、上記のコードは、xmlhttp オブジェクトの状態が変化する限り、handleStateChange メソッドが実行されることを意味します。その特定の関数は次のとおりです。
このメソッドは、最初に、 data.tag (ret) を参照し、ステータス値が 4 および xmlhttp.status==200 になったとき (ステータスは、サーバーの http ステータス コード 200 が OK に対応し、404 が Not Found に対応します)。 xmlhttprequest オブジェクトについてはあまり詳しくありません。最初によく理解しておくことをお勧めします)
xmlhttp.onready==4 および xmlhttp.stauts==200 の場合は、すべてのデータがサーバー上で読み取られていることを意味します。このとき、データはxmlファイルに置かれます。このxmlファイルはサーバー側で生成されます。
プログラムを実行する準備はすべて完了しました。あとはブラウザから XML ファイルを読み取るだけです。このとき、以下で説明する最後の関数 GetText() に注意してください。
この関数は、最初にブラウザに XML オブジェクトを読み取りたいことを伝えます (もちろん、文字列形式に設定することもできます)。例: var xmlDoc =xmlhttp.responseText); データ セットを xml 形式に設定する理由は、この時点でデータ セットを DOM オブジェクトに解析できるため、以下で非常に柔軟に処理できるためです。
クライアント コードの説明が終わったので、サーバー側の実行プロセスについて説明します。このプロセスは Ajax.aspx
1 のポストコードで完了します。 Page_Load イベント パラメーター。AjaxTest6.aspx から送信されます。次に、このパラメータに基づいてクエリを実行します。具体的なコードについては詳しく説明しません。コードは次のとおりです。

コードをコピーします。 コードは次のとおりです。

private static readonly string sql = "server=xxx;database=xxx;uid=sa;pwd=xxx"; >protected void Page_Load(object sender, EventArgs e)
{
string id=Request.QueryString["cateid"]
System.Threading.Thread.Sleep(2000); .ToInt32(id));
}

private DataTable GetLogs(int cateid)
{
using (SqlConnection con = new SqlConnection(sql))
{
con .Open();
string select = "SELECT Id,Cat​​eId,LogTitle FROM Logs WHERE CateId = " cateid;
SqlDataAdapter sda = new SqlDataAdapter(select, con); ;
sda.Fill(dt);
return dt;
}

public void GetTitle(int id) {
DataTable dt = GetLogs(id) ;
StringBuilder sb = new StringBuilder();
if (dt != null && dt.Rows.Count>0)
{
for ( int i = 0; dt.Rows .Count;i )
{
sb.AppendLine(dt.Rows[i][2].ToString()); (sb.ToString());
}
}
private static readonly string sql = "server=xxx;database=xxx;uid=sa;pwd=xxx"; (オブジェクト送信者、EventArgs e)
3 {
4 string id=Request.QueryString["cateid"]
5 System.Threading.Thread.Sleep(2000); .ToInt32(id));
7 }
8
9 private DataTable GetLogs(int cateid)
{
using (SqlConnection con = new SqlConnection(sql))
{
con.Open();
string select = "SELECT Id,Cat​​eId,LogTitle FROM Logs WHERE CateId = " cateid;
SqlDataAdapter sda = new SqlDataAdapter(select, con); DataTable();
sda.Fill(dt);
return dt;

public void GetTitle(int id)
{
DataTable dt = GetLogs (id);
StringBuilder sb = new StringBuilder();
if (dt != null && dt.Rows.Count>0)
{
for (int i = 0; i {
sb.AppendLine(dt.Rows[i][2].ToString()); 🎜>CreateResponse(sb.ToString())
}
}


注: GetTitle (int id) からわかるように、ライブラリから読み取ったデータを文字列に変換し、CreateResponse メソッドに渡しました (量が多くなると安全ではない可能性があるため、ここでは適切ではないかもしれません)データ量が大きい場合）、以下はデータをXMLファイルに変換する操作についてです。