As we all know, JavaScript is an object-based language and has some object-oriented features. Therefore, we can use the object idea to write some functions that page clients need to implement.
Ajax. JS is a Javascript script framework for retrieving background data through the XMLHTTPRequest object. It can easily obtain the text or XML format data returned by the backend server for code execution. Of course, the updatepanel control under. Net can well implement the problem of page data not refreshing, But improper use will affect the transmission efficiency. However, the XMLHTTPRequest object in Ajax. js creates an asynchronous HTTP request to obtain data from the server. The transmission speed has little impact on the performance.
The following is a typical JavaScript object-oriented framework, which is extracted from your actual project. It is easy to summarize later.
// JScript File
Function stringbuilder ()
{
This. _ content = new array ();
If (typeof stringbuilder. _ init = "undefined ")
{
Stringbuilder. Prototype. append = function (STR)
{
This. _ content. Push (STR );
}
Stringbuilder. Prototype. tostring = function ()
{
Return this. _ content. Join ("");
}
Stringbuilder. _ init = true;
}
}
Function Ajax ()
{
This. _ XMLHTTP = (function ()
{
Try
{
If (window. activexobject)
{
VaR arrsignature = ["msxml2.xmlhttp. 5.0", "msxml2.xmlhttp. 4.0", "msxml2.xmlhttp. 3.0 ",
"Msxml2.xmlhttp. 2.0", "Microsoft. XMLHTTP"];
For (VAR I = 0; I <arrsignature. length; I ++)
{
Try {
Return new activexobject (arrsignature [I]);
}
Catch (exception)
{
}
}
}
Else
{
Return new XMLHttpRequest ();
}
}
Catch (exception)
{
Throw new error ("your browser doesn't support XMLHTTPRequest object! ");
}
})();
This. _ Params = new stringbuilder ();
If (typeof Ajax. _ init = "undefined ")
{
Ajax. Prototype. Get = function (URL, ofunction)
{
VaR oxmlhttp = This. _ XMLHTTP;
This. _ XMLHTTP. Open ("get", URL + this. getparams (), true );
This. _ XMLHTTP. onreadystatechange = function ()
{
If (oxmlhttp. readystate = 4)
Ofunction (oxmlhttp. responsetext, oxmlhttp. responsexml );
};
This. _ XMLHTTP. setRequestHeader ("cache-control", "No-Cache ");
This. _ XMLHTTP. Send (null );
}
Ajax. Prototype. Post = function (URL, ofunction)
{
VaR oxmlhttp = This. _ XMLHTTP;
This. _ XMLHTTP. Open ("Post", URL, true );
This. _ XMLHTTP. onreadystatechange = function ()
{
If (oxmlhttp. readystate = 4)
Ofunction (oxmlhttp. responsetext, oxmlhttp. responsexml );
}
This. _ XMLHTTP. setRequestHeader ("cache-control", "No-Cache ");
This. _ XMLHTTP. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded ");
This. _ XMLHTTP. Send (this. getparams (). substring (1 ));
}
Ajax. Prototype. addparams = function (name, value)
{If (this. _ Params. tostring (). indexof ("? ") =-1)
{
This. _ Params. append ("? ");
}
Else
{
This. _ Params. append ("&");
}
This. _ Params. append (encodeuricomponent (name ));
This. _ Params. append ("= ");
This. _ Params. append (encodeuricomponent (value ));
}
Ajax. Prototype. getparams = function ()
{
Return this. _ Params. tostring () + "& Rand =" + math. Random ();
}
Ajax. _ init = true;
}
}
The post method is called as follows: (the same is true for get)
VaR Ajax = new Ajax ();
Ajax. addparams ("name", "charleschen ");
Ajax. addparams ("sex", "male ");
Ajax. Post ("test. aspx", function ()
{
Handlesmethod (arguments [0], arguments [1])
});
Handlesmethod is a callback function that accepts two parameters. One is the returned text format data, and the other is the returned XML format data. In this way, we can process the returned data. In this way, it feels like the background code has an object-oriented meaning, which makes it easier to understand and implement. I hope this article will be helpful to my friends.
PS. In addition, you can put the above Ajax. js in the project to reduce development workload and increase work efficiency.
