In writing this demo, originally wanted to directly access the side of the blog RSS, but this is obvious cross-domain access, is not allowed.
Therefore, the side dishes of the blog RSS saved to the local, is an XML format file, directly with Ajax request local XML files.
Through This example, the following techniques are presented:
• The use of Ajax core class XMLHttpRequest.
L Ajax Gets the server-side XML file by get way.
L Manipulate XML files using JavaScript.
L update the HTML interface with JavaScript.
Demo Summary Description:
Index.html as the home page, referencing the Ajax.js script, using AJAX technology in the Ajax.js script to request the Rss.xml in the same directory, and after the request succeeds, displays the information in the XML in the index.html.
The whole process simulates the local refresh effect of Ajax.
Specific code:
HTML code (index.html):
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Get Blog Blog rss list </title>
<script type= "Text/javascript" language= "JavaScript" src= "Ajax.js" ></script>
<body>
<div id= "Frmmain" >
<ul id= "Blogtitlelist" ></ul>
<input name= "Btnget" value= Get blog title list "onclick=" Javascript:getblogtitle (); "type= button"/>
</div>
</body>
Ajax Script (Ajax.js):
Copy Code code as follows:
function Getblogtitle () {
Create a XMLHttpRequest object based on the browser type
var xmlHttp;
if (window. XMLHttpRequest) {
IE7, Firefox, Google and other browsers
XmlHttp = new XMLHttpRequest ();
}else{
IE5, IE6 browser
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
Set the callback function after the asynchronous interaction completes
function () {} is an anonymous function, which passes the address of functions to the onReadyStateChange property of the XMLHttpRequest object
Xmlhttp.onreadystatechange=function () {
Normally the status value should be 200, but the local test returns 0 regardless of success failure
if (xmlhttp.readystate = = 4 && xmlhttp.status = 0) {
Accept the return data in XML format, the data received in the text format is: Xmlhttp.responsetext ();
var requestxml = Xmlhttp.responsexml;
Get the content part of XML
var blogcontent = Requestxml.getelementbyid ("feedcontent");
Gets the H3 caption in the content. Note that Blogtitles will be an array, because JavaScript is a weakly typed language, so you do not have to specify
var blogtitles = blogcontent.getelementsbytagname ("h3");
Get the UL tag object in the HTML page
var ulobj = document.getElementById ("Blogtitlelist");
Used to temporarily store blog titles
var temptitle;
Iterate through the blogtitles array to get all the blog headers
for (i=0;i<blogtitles.length;i++) {
Gets the value of the TITLE element
Temptitle = Blogtitles[i].firstchild.childnodes[0].nodevalue;
Inserts the title value into the UL tag of the interface
ulobj.innerhtml + + "<li>" + temptitle + "</li>";
}
}
};
Constructing interaction parameters
The first parameter refers to the Get method submission or POST method
The second parameter is the URL of the submission, which can be a text file (*.xml), a script file (*.aspx), and so on.
The third parameter indicates whether the communication is asynchronous, and ture represents asynchronous.
Xmlhttp.open ("Get", "Rss.xml", true);
Submit Request
Xmlhttp.send ();
}
Blog List rss (fragment) (Rss.xml):
Copy Code code as follows:
<div id= "Feedcontent" >
<div class= "Entry" >
<a href= "http://www.cnblogs.com/iyangyuan/archive/2012/12/27/2835509.html" >
Checksum for socket transfer file (simple to solve TCP sticky problem)
</a>
<div class= "LastUpdated" >
December 27, 2012 12:57
</div>
<div xml:base= "Http://feed.cnblogs.com/blog/u/135156/rss" class= "Feedentrycontent" >
Normal 0 False 7.8 lb 0 2 false false en-US zh-cn x-none ...
</div>
</div>
<div style= "Clear:both;" >
</div>
<div class= "Entry" >
<a href= "http://www.cnblogs.com/iyangyuan/archive/2012/12/23/2829712.html" >
C # (server) and Java (client) pass objects through the socket
</a>
<div class= "LastUpdated" >
December 23, 2012 8:44
</div>
<div xml:base= "Http://feed.cnblogs.com/blog/u/135156/rss" class= "Feedentrycontent" >
Recent projects require interaction between C # and Java: n S
</div>
</div>
<div style= "Clear:both;" >
</div>
The code comment above is very detailed and I believe that the reader will understand the process.
Supplementary Note:
Note In this example, when setting the onReadyStateChange property of a XMLHttpRequest object, it should be judged in the callback function whether the server responds to completion, where the readystate value of 4 indicates that the response is complete, and the status value of 200 indicates the request succeeded. However, the status value is always 0, as this example is demonstrated locally and does not build a server environment.
L The so-called Cross-domain access, that is, in a server to request other servers through JavaScript script, all such requests are called Cross-domain. Cross-domain access is directly rejected by the browser. The Cross-domain key problem is that the browser rejects the request, and it is due to a lack of JavaScript permissions, not that the XMLHttpRequest object does not have Cross-domain access, and that the XMLHttpRequest object does not have a domain. If the XMLHttpRequest object written in the program (including C/S, b/s program) rather than in the script, you can access the server at will, or even simulate manual access. For information on how to troubleshoot Cross-domain access, ask your readers to Google.
