Javascript XMLHttpRequest asp.net은 Refresh_javascript 기술 없이 데이터베이스 데이터를 읽습니다.

复제대码 代码如下:

/**////
/// 生成带CDATA的节点
///
/// XmlDocument
/// 元素name称
/// 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(Exception ex)
{
throw ex;
}
}
Helper#지역 도우미
/**////
/// 向页face输udexml内容
///
/// 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 선언 = xDocument.CreateXmlDeclaration("1.0", "UTF-8", "yes");
XmlElement 루트 = xDocument.CreateElement("root");
XmlElement eleResponse = CreateXmlNodeCDATA(xDocument, "응답", 결과);
root.AppendChild(eleResponse);
xDocument.AppendChild(선언);
xDocument.AppendChild(루트);
ResponseXML(xDocument);
System.Web.HttpContext.Current.Response.End();
}
/** **//// <요약>
/// 向页face输udexml内容
///
/// 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 총 두 개의 페이지를 사용합니다.
그 중 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 코드

코드 복사 코드는 다음과 같습니다.

< >
< 스크립트 언어="javascript" type="text/javascript">

설명: 첫 번째 함수인 createXMLHttpRequest는 XMLHttpRequest 객체를 생성하는 데 사용됩니다. 이 객체에 대한 자세한 설명은 관련 기사를 참조하세요. 이제 이 객체가 데이터를 전송하기 위해 http 요청을 사용할 때 사용된다는 점만 이해하면 됩니다. xml을 사용하여 데이터를 전송합니다. 선언 후 아래에서 사용할 수 있습니다.
두 번째 함수는 일반적으로 http 요청을 보내는 데 사용됩니다. xmlhttp.open("GET","Tools/Ajax. aspx? cateid=" vr1,true); 이 문장에서 매개변수가 포함된 요청이 Ajax.aspx로 전송되는 것을 볼 수 있습니다. Ajax.aspx는 이 매개변수를 캡처한 다음 이 매개변수를 기반으로 데이터베이스에서 쿼리를 실행합니다. 프로세스는 아래에서 자세히 설명됩니다.
이 함수에서는 문장 보기 일반 복사를 클립보드 인쇄에 주의해야 합니다.
xmlhttp.onreadystatechange=handleStateChange;//요청 상태가 변경되면 이 메소드가 호출됩니다.
xmlhttp.onreadystatechange=handleStateChange;/ /In 요청 상태가 변경될 때 호출되는 메소드입니다.
xmlhttp 객체는 실행 중에 여러 단계로 나누어지기 때문에 각 단계는 서로 다른 상태 값에 해당합니다. 0은 초기화, 1은 로드, 2는 로드를 의미합니다. Interactive, 4는 완료됨을 의미합니다.
따라서 위 코드는 xmlhttp 개체의 상태가 변경되는 한 handlerStateChange 메서드가 실행된다는 의미입니다. 해당 메서드의 구체적인 기능은 다음과 같습니다.
이 메서드는 먼저 다음을 표시하는 div를 찾습니다. data.tag(ret)를 확인한 후 xmlhttp의 실행 상태를 확인합니다. 상태 값이 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의 포스트 코드에서 완료됩니다. AjaxTest6.aspx에서 전송되는 Page_Load 이벤트 매개변수입니다. 그러면 이 매개변수를 기반으로 쿼리를 실행해 보겠습니다. 자세한 코드는 설명하지 않겠습니다. 코드는 다음과 같습니다.

코드를 복사하세요. 코드는 다음과 같습니다.

private static readonly string sql = "server=xxx;database=xxx;uid=sa;pwd=xxx"
protected void Page_Load(개체 전송자, 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>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 (객체 전송자, 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)
{
(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);
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 < dt.Rows.Count;i )
{
sb.AppendLine(dt.Rows[i][2].ToString())
}
CreateResponse(sb.ToString())
}
}


참고: GetTitle(int id)에서 볼 수 있듯이 라이브러리에서 읽은 데이터를 문자열로 변환하여 CreateResponse 메서드에 전달했습니다(양이 많아지면 안전하지 않을 수 있으므로 여기서는 적절하지 않을 수 있습니다). 데이터가 크다), 다음은 데이터를 xml 파일로 변환하는 작업에 대한 것입니다.