A simple example of how Ajax works

Source: Internet
Author: User

Statement: ThisCodeThis is a reference from Yan jianghua, but I did not find the relevant address on the network, so I did not add the relevant reference. In this example, I manually typed in. First, I tried it for myself, and second, it was easy for everyone to learn and give advice.

To let everyone know what Ajax is, the following is a manual example of AJAX (that is, without referencing any library or Ajax framework). This example is quite easy to understand, the main function of AJAX is to monitor the changes in Web Server resources or performance through the browser of the client. Once you have done the following examples, you can understand how powerful Ajax is in Web development.

Let's take a look:

This example is a simple Ajax example. However, although it is a little complicated, you can see how the original Ajax technology works. You do not need to install any special Ajax kit. The steps are as follows:

1. Create a WEB Project
First, you can create a common web project in VS 2005 (or vs. NET 2003), or you do not have a vs development tool. You can also create it directly using notepad.

2. Create a client page
Add client.htm to the web Project and set this page as the start page. This page will send a non-synchronous call request to the Web server page and update the server's response information to the webpage element. The Code is as follows:

<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Head>
<Script language = "JavaScript">
VaR XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
Function sendajax ()
{
XMLHTTP. Open ("Post", "server. aspx", true );
XMLHTTP. Send (null );
XMLHTTP. onreadystatechange = serverprocess;
}
Function serverprocess ()
{
If (XMLHTTP. readystate = 4 | XMLHTTP. readystate = 'complete ')
{
Document. getelementbyid ('namelist'). innerhtml
= XMLHTTP. responsetext;
}
}
Setinterval ('sendajax () ', 1000 );
</SCRIPT>
</Head>
<Body>
<Div id = "namelist"> </div>
</Body>
</Html>

3. Create a server-side processing program
In addition, if you add a server. aspx webpage (including. CS) to the project, you do not need to add any code to server. aspx.
Server. aspx. CSProgramThe Code is as follows:

Using system;
Using system. Data;
Using system. configuration;
Using system. collections;
Using system. Web;
Using system. Web. Security;
Using system. Web. UI;
Using system. Web. UI. webcontrols;
Using system. Web. UI. webcontrols. webparts;
Using system. Web. UI. htmlcontrols;
Using system. diagnostics;
Public partial class server: system. Web. UI. Page
{
Protected void page_load (Object sender, eventargs E)
{
Performancecounter mymemory = new performancecounter ();
Mymemory. categoryname = "Memory ";
Mymemory. countername = "available Kbytes ";
String txtresult = "--> memory size available for servers:" +
Mymemory. nextvalue (). tostring () + "kb ";
Response. Write (datetime. Now. tolongtimestring () + txtresult );
}
}

Note:
First, remember to reference the system. Diagnostics namespace because performancecounter must use this namespace,
The performancecounter category allows you to monitor various performance counters in the Windows operating system, where the available memory size of the server changes per second.

Executing the client.htm page will take about 5 seconds to start the performance-counter object, and then you can get the server memory available per second through Ajax.
Body changes. Of course, you can also use the server side timer, but that method will cause the server's loading to surge. If there are many people, your server may be broken down, however, Ajax is extremely flexible and flexible. with Ajax, You can instantly detect changes in databases or events on the web page.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.