This period of time in learning Ajax, before today to the company colleagues to explain the basic principles, but also casually put on the internet for your reference.
I think Ajax simply means that the client gets the server-side text through JavaScript script, and updates the content of the page by parsing the return value.
The following is a combination of access to the QQ Weather Report page, and the return value of the processing examples to explain.
Number of rows: explanation.
14: Click the button to get started.
29: Display the small area of "loading ..." in the upper right corner (fake Gmail).
30: Create the Xmlhttp,ie, the other browser to create different ways.
A callback function called when the 31:xmlhttp state changes, implementing an asynchronous invocation.
32: Specifies the URL of the call.
33: Start the call (you can send a section of XML to the server side, examples can be viewed: Using JavaScript to get a blog via MetaWeblog).
37:xmlhttp Status: 1 equipment stage, 2 send, 3 receive, 4 All data receive complete.
40: Hide the tip in the upper right corner.
41: Server return Status: 200 normal return. 404 Web pages do not exist etc.
45: Displays the obtained web page in HTML format.
46: Text display to obtain the source code of the Web page.
49-53: Intercept part of the Web page display.
58-60: There is no normal access to the Web page prompts.
----------------------
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>
7 <!--
8 XMLHTTP Description
9 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/ 7924f6be-c035-411f-acd2-79de7a711b38.asp
-->
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 > Loading </button>
15
16<hr/>
17<div id=city> Fragment </div>
18<hr/>
19<center><div id= "Wuhan_weather" > Data region </div></center>
20<hr/>
21<div id=stext> code area </div>
22
23<script language= "JavaScript" >
24
var xmlhttp;
function GetWeather ()
27 {
window.status = ';
document.all ("Load"). style.display= ';
xmlhttp = new ActiveXObject ("Msxml2.xmlhttp");
xmlhttp.onreadystatechange = Getready;
XMLHTTP. Open ("Get", document.getElementById (' Wurl '). Value,true);
XMLHTTP. Send (NULL);
34}
35function Getready ()
36{
Window.status + = Xmlhttp.readystate+ ';
(xmlhttp.readystate = 4)
39 {
document.all ("Load"). style.display= ' None ';
if (xmlhttp.status = 200)
42 {
var xmlreturn = Xmlhttp.responsetext;
44
document.all ("Wuhan_weather"). Innerhtml=xmlreturn;
document.all ("Stext"). Innertext=xmlreturn;
47
48
var newtext = xmlreturn.replace (/\n+/g, ');
//document.all ("Stext"). Innertext=newtext;
Wuyi var re =/<table .+?table>/ig;
var citytext = Newtext.match (re);
document.all ("City"). Innerhtml=citytext[2];
54
55}
Else
57 {
document.all ("Wuhan_weather"). Innerhtml= "<b> error: </b><br/>" +new Date () + "<br/>" +xm lhttp.statustext+ "<br/>" +xmlhttp.status;
document.all ("Stext"). Innerhtml= "Code area";
document.all ("City"). Innerhtml= "Fragments";
61
62}
xmlhttp = null;
64}
65
66}
67
68</script>
69</body>
70</html>
71
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
