AJAX basic principle explanation

During this time, I learned AJAX, and I gave the fund's colleagues today, and I would like to put it on the Internet. I think AJAX is simple to say that the client gets the server-side text through the JavaScript script, by parsing the return value, updating the web content of the part. Next, an example of obtaining QQ weather forecasting web pages and processes the return value is explained. Number of lines: explanation. 14: Click the button to start getting it. 29: Show the "Loading ..." in the upper right corner (patterned gmail). 30: Create XMLHTTP, IE, other browser creation methods are different. 31: The callback function called when the XMLHTTP state changes, and achieves asynchronous calls. 32: Specify the URL called. 33: Start call (you can send a paragraph XML to the server side, the example can be viewed: Get blog by MetaWeblog with JavaScript).

37: XMLHTTP Status: 1 Equipment Stage, 2 Send, 3 Receive, 4 All data reception is completed. 40: Hide hidden in the upper right corner prompt. 41: The status returned by the server: 200 is returned normally. 404 webpages do not exist.

45: Display the web page in HTML format. 46: Display the source code in text.

49-53: Intercepting some webpages display.

58-60: There is no prompt to get a web page. ---------------------- Code download: Weather.zip

1

<

HTML

>

2

<

HEAD

>

3

<

Title

>

Weather forecast

Title

>

4

<

Meta

Name

= "Author"

Content

= "http://pharaoh.cnblogs.com"

>

5

HEAD

>

6

<

Body

>

Seduce

8

XMLHTTP description

9

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/7924f6be-c035-411f-acd2-79de7a711b38.asp

10

->

11

<

Div

id

= LOAD

Style

= "Display: None; Position: absolute; right: 0px; top: 0px; background: # ff5b5b; border: 1px solid

>

loading

Div

>

12

13

<

INPUT

id

= WURL

Style

= "Width: 500px"

Value

= "http://appnews.qq.com/cgi-bin/news_qq_search?city= Chongqing"

>

14

<

Button

Onclick

= "GetWeather ();"

>

load

Button

>

15

16

<

HR

/>

In one

<

Div

id

= City

>

Piece

Div

>

18

<

HR

/>

19

<

Center

> <

Div

id

= "wuhan_Weather"

>

Data area

>

Center

>

20

<

HR

/>

twenty one

<

Div

id

= stext

>

Code area

Div

>

twenty two

twenty three

<

Script

Language

= "JavaScript"

>

2425 VAR XMLHTTP; 26 function getWeather () 27 {28 window.status = '; 29 document.all ("LOAD"). Style.display ='; 30 xmlhttp = new activXObject ("msxml2.xmlhttp"); 31 xmlhttp.onreadystatechange = getReady; 32 xmlhttp.Open (. "GET", document.getElementById ( 'wurl') value, true); 33 xmlhttp.Send (null); 34} 35function getReady () 36 {37 window.status = XMLHTTP.ReadyState ''; 38 IF (XMLHttp.ReadyState == 4) 39 {40 document.all ("LOAD"). Style.display = 'none'; 41 if (xmlhttp.status == 200) 42 {43 var xmlReturn = xmlhttp.responseText; 4445 document.all ( "wuhan_weather") innerHTML = xmlReturn;. 46 document.all ( "stext") innerText = xmlReturn;. 47 48 49 var newText = xmlReturn.replace (// n / g , ''); 50 //Document.all ("stext").innertext=Newtext ;51 var RE = / / Ig; 52 var citytext = newtext.match (re); 53 document. All ("city"). Innerhtml = citytext [2]; 5455} 56 else57 {58 Document.all ("WUHA N_WEATHER "). Innerhtml =" error:
" new date () "
" xmlhttp.statustext "
" xmlhttp.status; 59 Document.all ("Stext"). InnerHtml = "Code Zone"; 60 Document.all ("City"). InnerHTML = "Piece"; 61 62} 63 xmlhttp = null; 64} 6566} 6768

Script

>

69

Body

>

70

HTML

>

71