A simple example of how Ajax works

Source: Internet
Author: User
I read the. NET component development series (ii) of the. NET component development series (ii) of the martial arts series Taijiquan development Ajax controls. I did not think that the golden ocean (jyk) was "Dizzy". I felt quite well written, that is, a little less salt, so I am brave enough to add the following.

Statement:BenCodeIs referenced fromYan jianghuaBut I did not find the relevant address on the network, so no reference is added. 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 a client page to a web projectClient.htmAnd set this page as the start page. This page will send a non-synchronous call request to the Web server webpage and update the server's return data 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
AddServer. aspxWebpage (Including. CS),Server. aspxNo code is required.
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 the server: "   +

Mymemory. nextvalue (). tostring () +   " KB " ;

Response. Write (datetime. Now. tolongtimestring () + Txtresult );

}

}

Note:

Remember to referenceSystem. DiagnosticsNamespace, becausePerformancecounterThe namespace must be used,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.

 

RelatedArticle: Makes Ajax more friendly and displays the background processing progress in real time

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.