Javascript+xmlhttprequest+asp.net _javascript Techniques for reading database data without refreshing

Copy Code code as follows:

/**////<summary>
Generating nodes with CDATA
</summary>
<param name= "XDocument" >XmlDocument</param>
<param name= "ElementName" > element name </param>
<param name= "Cdatavalue" >cdata value </param>
<returns>XmlElement</returns>
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 (Exception ex)
{
Throw ex;
}
}
Helper#region Helper
/**////<summary>
Create Ajax return information
</summary>
<param name= "Result" ></param>
private void Createresponse (string result)
{
XmlDocument xDocument = new XmlDocument ();
XmlDeclaration declare = 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 ();
}
/**////<summary>
Output XML content to a page
</summary>
<param name= "XmlNode" >xml content </param>
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 ();
}
/**////<summary>
Generating nodes with CDATA
</summary>
<param name= "XDocument" >XmlDocument</param>
<param name= "ElementName" > element name </param>
<param name= "Cdatavalue" >cdata value </param>
<returns>XmlElement</returns>
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 (Exception ex)
{
Throw ex;
}
}
Helper#region Helper
/**////<summary>
Create Ajax return information
</summary>
<param name= "Result" ></param>
private void Createresponse (string result)
{
XmlDocument xDocument = new XmlDocument ();
XmlDeclaration declare = 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 ();
}
/**////<summary>
Output XML content to a page
</summary>
<param name= "XmlNode" >xml content </param>
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 ();
}

On the topic of Ajax on the internet has a lot of, but a lot of it is to use the control open source framework to implement, especially vs2008 is integrated with a lot of Ajax controls, the AJAX implementation process encapsulated tightly. I have also used these frameworks and controls, and it feels like fun. But recently whim, want to see how Ajax in the end is how to implement, want to do it yourself, just also exercise my JS level. Needless to say, the title, we look at the implementation process.
1. A total of two pages were used for this implementation: Ajaxtest6.aspx and Ajax.aspx
Where ajaxtest6.aspx is the page that initiates the request, Ajax.aspx gets the ajaxtest6.aspx request and processes the page.
Processing process: (1) ajaxtest6.aspx initiates HTTP request---> (2) ajax.aspx gets the parameters in the URL, executes the query operation in the database based on this parameter, and returns the result (DataSet)---> (3) XML processing of the returned dataset through response output. Note that the output data is now formatted as XML---(4) ajaxtest6.aspx obtains ajax.aspx output XML data and displays
2.ajaxtest6.aspx in the JS code

Copy Code code as follows:

< script language= "javascript" type= "Text/javascript" ><!--
var xmlhttp;
function createxmlhttprequest ()//create instance for XMLHTTP
{
if (window. ActiveXObject)
Xmlhttp=new ActiveXObject (' microsoft.xmlhttp ');
else if (window. XMLHttpRequest)
{
Xmlhttp=new XMLHttpRequest ();
}
}
function Staterequest (VR1)//Status request
{
Alert (' seems to have executed the staterequest ');
Createxmlhttprequest ()//reference XMLHTTP instance
xmlhttp.onreadystatechange=handlestatechange;//call this method when the request state has changed
Xmlhttp.open ("Get", "tools/ajax.aspx?cateid=" +vr1,true);
Xmlhttp.send (NULL);
}
function Handlestatechange ()
{
Alert ("It appears that Handlestatechange () has been implemented");
var Divret=document.getelementbyid ("ret");
if (xmlhttp.readystate = 4)
{
if (Xmlhttp.status = 200)
{
var text= GetText ();
Divret.innerhtml=text;
}
}
Else
Divret.innerhtml= "<b> Data loading </b> ";
}
function GetText ()
{
var xmldoc=xmlhttp.responsexml;
Alert (xmldoc.tostring ());
if (xmldoc = null)
{
Alert ("Executed here");
Return "No data! ";
}
var requestnode=xmldoc.getelementsbytagname ("response") [0];
var Node=requestnode.firstchild.nodevalue;
alert (node);
Return node
}
--></script>
< script language= "javascript" type= "Text/javascript" ><!--
var xmlhttp;
function createxmlhttprequest ()//create instance for XMLHTTP
{
if (window. ActiveXObject)
Xmlhttp=new ActiveXObject (' microsoft.xmlhttp ');
else if (window. XMLHttpRequest)
{
Xmlhttp=new XMLHttpRequest ();
}
}
function Staterequest (VR1)//Status request
{
Alert (' seems to have executed the staterequest ');
Createxmlhttprequest ()//reference XMLHTTP instance
xmlhttp.onreadystatechange=handlestatechange;//call this method when the request state has changed
Xmlhttp.open ("Get", "tools/ajax.aspx?cateid=" +vr1,true);
Xmlhttp.send (NULL);
}
function Handlestatechange ()
{
Alert ("It appears that Handlestatechange () has been implemented");
var Divret=document.getelementbyid ("ret");
if (xmlhttp.readystate = 4)
{
if (Xmlhttp.status = 200)
{
var text= GetText ();
Divret.innerhtml=text;
}
}
Else
Divret.innerhtml= "<b> Data loading </b> ";
}
function GetText ()
{
var xmldoc=xmlhttp.responsexml;
Alert (xmldoc.tostring ());
if (xmldoc = null)
{
Alert ("Executed here");
Return "No data! ";
}
var requestnode=xmldoc.getelementsbytagname ("response") [0];
var Node=requestnode.firstchild.nodevalue;
alert (node);
Return node
}
--></script>

Description: The first function createxmlhttprequest to create the XMLHttpRequest object, the detailed description of the object can refer to the relevant article, now just understand when we use the HTTP request to send data, and use XML to pass the data to use the object, Once we've declared it, we can use it below.
The second function is used to send HTTP requests, in general, URLs with parameters, via Xmlhttp.open ("Get", "tools/ajax.aspx?cateid=" +vr1,true); We can see that this is to send a request with parameters to the ajax.aspx, ajax.aspx capture this parameter, and then execute the query in the database based on this parameter, the process we detail below.
In this function we also pay attention to a word view plaincopy to Clipboardprint?
xmlhttp.onreadystatechange=handlestatechange;//call this method when the request state has changed
xmlhttp.onreadystatechange=handlestatechange;//call this method when the request state has changed
Because the XMLHTTP object is divided into stages during execution, each phase corresponds to a different state value: 0 for initialization, 1 for loading, 2 for load, 3 for interaction, 4 for completion
So the above code means that as long as the state of the XMLHTTP object changes to execute the Handlestatechange method, it specifically implements the following functions:
This method first finds the DIV tag that displays the data (ret), and then it determines the execution state of the XMLHTTP, when the state value becomes 4 and xmlhttp.status==200 (status is the HTTP status code 200 of the server corresponds to OK 404 corresponds to Not Found, If you are not familiar with the XMLHttpRequest object, I suggest you get acquainted with it first.
Obviously when the xmlhttp.onready==4 and xmlhttp.stauts==200 instructions have read all the data on the server side, the data is placed in an XML file that we generated on the server side.
The execution of the program is now all ready, and now it is only the XML file that is being read from the browser. Now, notice that the last function we're going to talk about here is GetText ()
This function first tells the browser that we want to read an XML object (of course you can also set it to a string format, for example: Var xmldoc=xmlhttp.responsetext); We set the dataset to XML because at this point it can be parsed into a DOM object, so we're pretty flexible about how it's handled below.
Now that we've finished with the client's code, let's say the server-side execution process, which is done in the ajax.aspx code.
1. First we get the parameters in the URL in the Page_Load event, which is sent from the ajaxtest6.aspx. Then execute the query according to this parameter, the concrete code I no longer explained in detail, everybody sees to understand, the code is as follows:

Copy Code code as follows:

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);
GetTitle (Convert.ToInt32 (id));
}

Private DataTable getlogs (int cateid)
{
using (SqlConnection con = new SqlConnection (SQL))
{
Con. Open ();
String select = "Select Id,cateid,logtitle from Logs WHERE Cateid =" + Cateid;
SqlDataAdapter SDA = new SqlDataAdapter (select, con);
DataTable dt = new DataTable ();
Sda. Fill (DT);
Con. Close ();
return DT;
}
}

public void GetTitle (int id)
{
DataTable dt = getlogs (ID);
StringBuilder sb = new StringBuilder ();
if (dt!= null && dt. ROWS.COUNT&GT;0)
{
for (int i = 0; i < dt. rows.count;i++)
{
Sb. Appendline (dt. ROWS[I][2]. ToString ());
}
Createresponse (sb.) ToString ());
}
}
private static readonly String sql = "Server=xxx;database=xxx;uid=sa;pwd=xxx";
2 protected void Page_Load (object sender, EventArgs e)
3 {
4 string id=request.querystring["Cateid"];
5 System.Threading.Thread.Sleep (2000);
6 GetTitle (Convert.ToInt32 (id));
7}
8
9 Private DataTable getlogs (int cateid)
{
using (SqlConnection con = new SqlConnection (SQL))
{
Con. Open ();
String select = "Select Id,cateid,logtitle from Logs WHERE Cateid =" + Cateid;
SqlDataAdapter SDA = new SqlDataAdapter (select, con);
DataTable dt = new DataTable ();
Sda. Fill (DT);
Con. Close ();
return DT;
}
}

public void GetTitle (int id)
{
DataTable dt = getlogs (ID);
StringBuilder sb = new StringBuilder ();
if (dt!= null && dt. ROWS.COUNT&GT;0)
{
for (int i = 0; i < dt. rows.count;i++)
{
Sb. Appendline (dt. ROWS[I][2]. ToString ());
}
Createresponse (sb.) ToString ());
}
}

Description: by gettitle (int id), I can see that the data I read from the library into a string to the Createresponse method (this may not be appropriate, because when the volume of data may not be very safe), the following is about the operation of converting data into XML files