Four technical cornerstones and reconstruction of AJAX

1. Four technical cornerstones of AJAX
Javascript + CSS + DOM + XMLHttpRequest
Using dom (Document Object Model) to define the structure of the user interface is a set of programmable objects that can be operated using JavaScript to display the structure of the web page
Use XMLHttpRequest to communicate with the server asynchronously.

The DOM Representation on the Web page is a tree structure consisting of elements or nodes. The node may also contain many subnodes. js engine uses global variables.
Document exposes the root node of the current web page. This variable is the starting point of all Dom operations.
VaR childel = Document. createelement ('div '); // create a new element
VaR El = Document. getelementbyid ('empty ');
El. appendchild (childel); // Add a subnode
VaR txtnode = Document. createtextnode (text); // create a text element
Childel. appendchild (txtnode );

VaR childer = empty. childnodes; // find the subnode

For (VAR I = 0; I <childern. length; I ++)
{
Childern [I]. classname = 'grammed '; // defines the CSS style of the child node.

}

. Programmed {
Color: blue;
Font-family: Helvetica;
Font-weight: bold;
Font-size: 10px;
}

El. innerhtml = "<Div class = 'grammed '>" + TEXT + "</div> ";

CSS www.csszengarden.com
CSS www.meyerweb.com/eric/css
How to learn and develop an interactive learning tutorial on www.w3schools.com/js/js_examples_3.asp
 

2. refactoring
Net. js
/*
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. contentloader = function (URL, onload, onerror, method, Params, contenttype ){
This. Req = NULL;
This. onload = onload;
This. onerror = (onerror )? Onerror: This. defaulterror;
This. loadxmldoc (URL, method, Params, contenttype );
}

Net. contentloader. Prototype. loadxmldoc = function (URL, method, Params, 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. contentloader. 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. contentloader. 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. contentloader. Prototype. defaulterror = function (){
Alert ("error fetching data! "
+ "/N/nreadystate:" + this. Req. readystate
+ "/Nstatus:" + this. Req. Status
+ "/Nheaders:" + this. Req. getAllResponseHeaders ());
}