최근에 저는 <<Ajax in Action>>이라는 책을 읽고 있습니다. 책에 있는 지식을 활용하고 .net을 결합하여 .net을 사용하여 xmlHttp를 처리하여 비동기 요청을 보내는 방법에 대한 이 기사를 작성했습니다.
우리가 달성하고자 하는 것은 버튼을 클릭하여 서버의 현재 시간을 얻는 것입니다. aspx의 html은 다음과 같습니다.
HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Linkedu.Web.WebWWW.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 전환//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " >
<head runat="서버">
<title>테스트</title>
<script 언어="javascript" src="javascript/prototype/extras-array.js"></script>
<script 언어="javascript" src="javascript/xmlHttp.js"></script>
<script 언어="javascript" src="javascript/eventRouter.js"></script>
<script 언어="javascript" src="Default.js"></script>
<스크립트 언어="자바스크립트">
</script>
</head>
<본문>
<form id="form1" runat="서버">
Post 메소드를 사용하여 서버의 현재 시간을 가져옵니다.
<input id="btnTestPost" type="button" value="Post" />
Get 메소드를 사용하여 서버의 현재 시간을 가져옵니다.
<input id="btnTestGet" type="button" value="Get" />
<div id="divResult"></div>
</form>
</body>
</html>
javascript를 사용하여 xmlHttp 요청을 보내기 위해 해결해야 할 문제는 크로스 브라우저 지원입니다. 우리는 javascript 객체에 xmlHttp 전송을 캡슐화하고 동시에 이 객체의 크로스 브라우저 지원 문제를 해결합니다. 코드는 다음과 같습니다:
xmlHttp 객체
/**//*
URL 로딩 객체와 그 위에 구축된 요청 큐
*/
/**//* 네임패싱 객체 */
var net=new Object();
net.READY_STATE_UNINITIALIZED=0;
net.READY_STATE_LOADING=1;
net.READY_STATE_LOADED=2;
net.READY_STATE_INTERACTIVE=3;
net.READY_STATE_COMPLETE=4;
/**//*--- 크로스 브라우저 요청을 위한 콘텐츠 로더 객체 ---*/
net.xmlHttp=function(url, onload, params, method, contentType, onerror){
this.req=null;
this.onload=온로드;
this.onerror=(onerror) ? onerror : this.defaultError;
if(typeof(메소드) == "정의되지 않음" || 메소드 == null)
{
메소드 = "포스트";
}
this.loadXMLDoc(url, params, method, contentType);
}
net.xmlHttp.prototype.loadXMLDoc=function(url, params, method, contentType){
if (!방법){
방법="GET";
}
if (!contentType && method=="POST"){
contentType='application/x-www-form-urlencoded';
}
if (window.XmlHttpRequest){
this.req=new XmlHttpRequest();
} else if (window.ActiveXObject){
this.req=new ActiveXObject("Microsoft.xmlHttp");
}
if (this.req){
노력하다{
var 로더=this;
this.req.onreadystatechange=함수(){
net.xmlHttp.onReadyState.call(로더);
}
this.req.open(method,url,true);
if (콘텐츠 유형){
this.req.setRequestHeader('Content-Type', contentType);
}
this.req.send(params);
}잡다(오류){
this.onerror.call(this);
}
}
}
net.xmlHttp.onReadyState=함수(){
var req=this.req;
var 준비=req.readyState;
if (준비==net.READY_STATE_COMPLETE){
var httpStatus=req.status;
if (httpStatus==200 || httpStatus==0){
this.onload.call(this);
}또 다른{
this.onerror.call(this);
}
}
}
net.xmlHttp.prototype.defaultError=function(){
Alert("데이터를 가져오는 중 오류가 발생했습니다!"
+"nnreadyState:"+this.req.readyState
+"n상태: "+this.req.status
+"n헤더: "+this.req.getAllResponseHeaders());
}
xmlHttp 요청을 보내는 코드 작성을 시작하겠습니다:
default.js
//전역 xmlHttp 객체
var cobj;
/**//* 게시 시작*/
//btnTestPost에 xmlHttp 이벤트를 보내기 위해 Post를 바인딩합니다.
함수 loadTestPost()
{
var iobj = document.getElementById("btnTestPost");
//btnTestPost 버튼 수신을 위한 바인딩
var clickRouter=new jsEvent.EventRouter(iobj,"onclick");
clickRouter.addListener(btnTestPostClick);
}
함수 btnTestPostClick()
{ // 매개변수 열기 url, onload, params, method, contentType, onerror
cobj = new net.xmlHttp("DefaultHandler.ashx",dealResult, "<T/>", "POST");
}
/**//* 포스팅 끝*/
/**//* 시작하기*/
//btnTestGet에 xmlHttp 이벤트를 보내기 위해 Get 바인딩
함수 loadTestGet()
{
var iobj = document.getElementById("btnTestGet");
//btnTestGet 버튼 청취 바인딩
var clickRouter=new jsEvent.EventRouter(iobj,"onclick");
clickRouter.addListener(btnTestGetClick);
}
함수 btnTestGetClick()
{ // 매개변수 열기 url, onload, params, method, contentType, onerror
cobj = new net.xmlHttp("DefaultHandler.ashx?T=1",dealResult, null, "GET");
}
/**//* 종료*/
함수 dealResult()
{
var dobj = document.getElementById("divResult");
dobj.innerHTML = cobj.req.responseXML.text;
}
window.onload = 함수()
{
//btnTestPost에 xmlHttp 이벤트를 보내기 위해 Post를 바인딩합니다.
로드테스트포스트();
//btnTestGet에 xmlHttp 이벤트를 보내기 위해 Get 바인딩
로드테스트Get();
};
마지막은 .net에서 xmlHttp를 처리하기 위한 코드입니다.
.net은 xmlHttp 요청을 처리합니다.
공개 클래스 DefaultHandler : IHttpHandler
{
보호된 XmlDocument _xmlResult
공개 무효 ProcessRequest(HttpContext 컨텍스트)
{
if (context.Request["T"] != null)
{//xmlhttp 테스트 가져오기
context.Response.ContentType = "텍스트/xml";
XmlDocument xmlDoc = new XmlDocument();
xmlDoc.LoadXml(string.Format(@"<time>GET:{0}</time>", System.DateTime.Now));
xmlDoc.Save(context.Response.OutputStream);
context.Response.End();
}
또 다른
{//POST xmlhttp 테스트
context.Response.ContentType = "텍스트/xml";
XmlDocument xmlDoc = new XmlDocument();
xmlDoc.Load(context.Request.InputStream);
if (xmlDoc.DocumentElement.Name == "T")
{
xmlDoc.LoadXml(string.Format(@"<time>POST:{0}</time>", System.DateTime.Now));
xmlDoc.Save(context.Response.OutputStream);
context.Response.End();
}
}
}
공개 bool IsReusable
{
얻다
{
거짓을 반환;
}
}
}
http://www.cnblogs.com/laiwen/archive/2006/12/26/604050.html