最近、「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 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " >
<head runat="サーバー">
<title>テスト</title>
<script language="javascript" src="javascript/prototype/extras-array.js"></script>
<script language="javascript" src="javascript/xmlHttp.js"></script>
<script language="javascript" src="javascript/eventRouter.js"></script>
<script language="javascript" src="Default.js"></script>
<スクリプト言語="javascript">
</script>
</head>
<本文>
<form id="form1" runat="server">
Postメソッドを使用してサーバーの現在時刻を取得します。
<input id="btnTestPost" type="button" value="投稿" />
Getメソッドを使用してサーバーの現在時刻を取得します。
<input id="btnTestGet" type="button" value="Get" />
<div id="divResult"></div>
</form>
</body>
</html>
JavaScript を使用して xmlHttp リクエストを送信するには、クロスブラウザーのサポートという問題を解決する必要があります。 xmlHttp の送信を JavaScript オブジェクトにカプセル化し、同時にこのオブジェクトでのクロスブラウザー サポートの問題を解決します。コードは次のとおりです:
xmlHttp オブジェクト
/**//*
URLローディングオブジェクトとその上に構築されたリクエストキュー
*/
/**//* ネームペーシング オブジェクト */
var net=新しいオブジェクト();
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、メソッド、contentType、onerror){
this.req=null;
this.onload=オンロード;
this.onerror=(onerror) ? onerror : this.defaultError;
if(typeof(method) == "未定義" || メソッド == null)
{
メソッド = "POST";
}
this.loadXMLDoc(url, params, メソッド, contentType);
net.xmlHttp.prototype.loadXMLDoc
=function(url、params、メソッド、contentType){
if (!メソッド){
メソッド = "GET";
}
if (!contentType && メソッド=="POST"){
contentType='application/x-www-form-urlencoded';
}
if (window.XmlHttpRequest){
this.req=新しい XmlHttpRequest();
else if (window.ActiveXObject){
this.req=new ActiveXObject("Microsoft.xmlHttp");
}
if (this.req){
試す{
var ローダー = this;
this.req.onreadystatechange=function(){
net.xmlHttp.onReadyState.call(ローダー);
}
this.req.open(メソッド,url,true);
if (コンテンツタイプ){
this.req.setRequestHeader('Content-Type', contentType);
}
this.req.send(params);
}キャッチ（エラー）{
this.onerror.call(this);
}
}
}
net.xmlHttp.onReadyState=function(){
var req=this.req;
varready=req.readyState;
if (ready==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;
/**//* 投稿開始*/
//Post をバインドして xmlHttp イベントを btnTestPost に送信します
関数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");
}
/**//*投稿終了*/
/**//* 始めましょう*/
//Bind Get を使用して xmlHttp イベントを btnTestGet に送信します
関数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 = 関数()
{
//Post をバインドして xmlHttp イベントを btnTestPost に送信します
ロードテストポスト();
//Bind Get を使用して xmlHttp イベントを btnTestGet に送信します
ロードテスト取得();
、
.net で xmlHttp を処理するコードです。
.net は xmlHttp リクエストを処理します
パブリック クラス DefaultHandler : IHttpHandler
{
protected XmlDocument _xmlResult;
public void ProcessRequest(HttpContext context)
{
if (context.Request["T"] != null)
{//GET xmlhttp テスト
context.Response.ContentType = "テキスト/xml";
XmlDocument xmlDoc = 新しい 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 = 新しい 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();
}
}
public
bool IsReusable
{
得る
{
false を返します。
}
}
http://www.cnblogs.com/laiwen/archive/2006/12/26/604050.html