Having recently been reading <<ajax in action>>, using the knowledge in the book, combined with. NET, wrote this article about sending asynchronous requests using. NET processing xmlhttp.
The goal we want to achieve is to click on the button to get the server's current time, aspx HTML as follows:
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 ">
<title> Testing </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>
<script language= "JavaScript" >
</script>
<body>
<form id= "Form1" runat= "Server" >
Get the server's current time by post
<input id= "btntestpost" type= "button" value= "Post"/>
Get the current time for the server
<input id= "Btntestget" type= "button" value= "Get"/>
<div id= "Divresult" ></div>
</form>
</body>
The problem that you must resolve to send a XMLHTTP request with JavaScript is Cross-browser support. We encapsulated the XMLHTTP's delivery in a JavaScript object, while addressing the problem of Cross-browser support in this object. The code is as follows:
XMLHTTP objects
/**//*
Url-loading object and a request queue built on top of it
*/
/**//* namespacing Object * *
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;
/**//*---Content loader object for Cross-browser requests---* *
Net.xmlhttp=function (URL, onload, params, method, ContentType, onerror) {
This.req=null;
This.onload=onload;
This.onerror= (onerror)? Onerror:this.defaultError;
if (typeof (method) = = "undefined" | | | = = NULL)
{
method = "POST";
}
This.loadxmldoc (URL, params, method, ContentType);
}
Net.xmlhttp.prototype.loadxmldoc=function (URL, params, method, ContentType) {
if (!method) {
Method= "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) {
try{
var loader=this;
This.req.onreadystatechange=function () {
Net.xmlHttp.onReadyState.call (loader);
}
This.req.open (method,url,true);
if (ContentType) {
This.req.setRequestHeader (' Content-type ', contentType);
}
This.req.send (params);
}catch (Err) {
This.onerror.call (this);
}
}
}
Net.xmlhttp.onreadystate=function () {
var req=this.req;
var ready=req.readystate;
if (ready==net. Ready_state_complete) {
var httpstatus=req.status;
if (httpstatus==200 | | httpstatus==0) {
This.onload.call (this);
}else{
This.onerror.call (this);
}
}
}
Net.xmlhttp.prototype.defaulterror=function () {
Alert ("Error fetching data!"
+ "\n\nreadystate:" +this.req.readystate
+ "\nstatus:" +this.req.status
+ "\nheaders:" +this.req.getallresponseheaders ());
}
The following begins writing the code that sends the XMLHTTP request:
Default.js
Global XMLHTTP Object
var CObj;
/**//* Post begin*/
Bind post Send XMLHTTP event to Btntestpost
function Loadtestpost ()
{
var iobj = document.getElementById ("Btntestpost");
Btntestpost button listening for bindings
var clickrouter=new jsevent.eventrouter (iobj, "onclick");
Clickrouter.addlistener (Btntestpostclick);
}
function Btntestpostclick ()
{//Open parameter URL, onload, params, method, ContentType, onerror
CObj = new Net.xmlhttp ("Defaulthandler.ashx", Dealresult, "<T/>", "POST");
}
/**//* Post end*/
/**//* Get begin*/
Bind get Send XMLHTTP event to Btntestget
function Loadtestget ()
{
var iobj = document.getElementById ("Btntestget");
Btntestget button listening for bindings
var clickrouter=new jsevent.eventrouter (iobj, "onclick");
Clickrouter.addlistener (Btntestgetclick);
}
function Btntestgetclick ()
{//Open parameter URL, onload, params, method, ContentType, onerror
CObj = new Net.xmlhttp ("Defaulthandler.ashx? T=1 ", Dealresult, NULL," get ");
}
/**//* Get end*/
function Dealresult ()
{
var dobj = document.getElementById ("Divresult");
dobj.innerhtml = Cobj.req.responseXML.text;
}
Window.onload = function ()
{
Bind post Send XMLHTTP event to Btntestpost
Loadtestpost ();
Bind get Send XMLHTTP event to Btntestget
Loadtestget ();
};
And finally, the code for the. NET process XMLHTTP
. NET processing XMLHTTP requests
public class Defaulthandler:ihttphandler
{
protected XmlDocument _xmlresult;
public void ProcessRequest (HttpContext context)
{
if (context. request["T"]!= null)
{//get XMLHTTP Test
Context. Response.ContentType = "Text/xml";
XmlDocument xmldoc = new XmlDocument ();
Xmldoc.loadxml (String. Format (@ "<time>GET:{0}</time>", System.DateTime.Now));
Xmldoc.save (context. Response.outputstream);
Context. Response.End ();
}
Else
{//post XMLHTTP Test
Context. Response.ContentType = "Text/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 ();
}
}
}
public bool IsReusable
{
Get
{
return false;
}
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
