ajax|xml| Page | refresh | No refresh in fact, the title is just a gimmick, just to talk about how Javascript and Actionscript manipulate XML.
Hope to help some friends who only use Javascript or only Actionscript to understand the similarities and differences between the two.
There are many kinds of Flash and background connections, Actionscript calls XML () is a relatively simple one,
While JavaScript calls XmlHttp, it forms the Ajax that is now popular.
Now, use an online paging effect to get started on Flash and Ajax.
Effect Preview
Bottom section of source file:
Click here to download the source file
In practice, we usually generate XML files through background script, and then manipulate the data produced by them.
Due to the length of the relationship in this article will be replaced by 1.xml 2.xml 3.xml. Background scripts do not explain
First understand the structure of an XML:
<data>
<movie id= "1" type= "Love" > Happiness terminal </movie>
<movie id= "2" type= "terror" > absolute termination station </movie>
<movie id= "3" type= "comedy" > Horror film </movie>
...
....
</data> start with Simple flash
function Setxml (page) {
Pagexml = new XML (); Declare XML object
Pagexml.ignorewhite = true; Allow whitespace
Pagexml.load (page+ ". xml?rid=" +math.random ()); reading XML files
Pagexml.onload = function (Success)
{
if (success)
{
Parsexml (Pagexml); Parse XML file if read is successful
}
}
}
function Parsexml (pagexml) {
XmlRoot = Agexml.firstchild; Defining the XML root directory
for (i=0;i<xmlroot.childnodes.length;i++)
{
Attachmovie ("tr", "Tr_" +i,i); Born
this["Tr_" +i]._x = 13;
this["tr_" +i]._y = 25*i+33;
this["tr_" +i].no = xmlroot.childnodes[i].attributes.id; Gets the ID of a record
this["tr_" +i].name = Xmlroot.childnodes[i].firstchild; Film Name
this["tr_" +i].type = Xmlroot.childnodes[i].attributes.type; Type
page = PageXml.firstChild.attributes.page; Get current Page
}
}
if (!page)///original page number is first page page=1;
Setxml (page); Initial first page content
Presetxmlbtn.onrelease = function ()
{
Setxml (page*1-1); Page forward, read content
}
Nextbtn.onrelease = function ()
{
Setxml (page*1+1); Page back to read content
Next is Ajax.
About Ajax introductory learning can have a look at my previous log, I recommended two good articles
var xmlHttp
/*
The first part is about XMLHTTP's statement, because IE is a bit different from some of the other browsers that generate XMLHTTP, so it's tricky to declare.
Other major functions are equivalent to the "New XML ()" In flash mode and of course the other functions of the package
*/
function Getxmlhttpobject (handler)
{
var objxmlhttp=null;
if (Navigator.userAgent.indexOf ("MSIE") >=0)
{
var strname= "Msxml2.xmlhttp";
if (Navigator.appVersion.indexOf ("MSIE 5.5") >=0)//even IE has two types of declarations
{
Strname= "Microsoft.XMLHTTP";
}
Try
{
Objxmlhttp=new ActiveXObject (strName);
Objxmlhttp.onreadystatechange=handler;
return objxmlhttp;
}
catch (E)
{
Alert ("Error. Scripting for ActiveX might is disabled ");
Return
}
}
Else
{
Objxmlhttp=new XMLHttpRequest (); Firefox, opera and so on are all using this
Objxmlhttp.onload=handler;
Objxmlhttp.onerror=handler;
return objxmlhttp;
}
}
The first function to be called can be considered as the Setxml () function in Flash above.
function ShowPage (NO)
{
document.getElementById ("Loadstatus"). InnerHTML = "lading ...";
var url = no+ ". xml?rid=" +math.random ();
Statechanged_showplist is the name of the function below, note that do not add parentheses
Xmlhttp=getxmlhttpobject (statechanged_showplist);
Pass is a GET, you can also choose post way, sometimes passing variables is Chinese to remember to set the file header
Xmlhttp.open ("Get", url, True);
Xmlhttp.send (NULL);
}
Parsing XML functions
function Statechanged_showplist ()
{
if (xmlhttp.readystate==4 | | xmlhttp.readystate== "complete")//xmlhttp.readystate==4 4 means read end
{
document.getElementById ("Loadstatus"). InnerHTML = "";
Table = document.getElementById ("Pagebody"); Generate Talbe Element
for (i = table.rows.length-1 i >= 0; i-compact)//To delete the original rows, otherwise the table will extend indefinitely
Table.deleterow (i);
XmlRoot = XmlHttp.responseXML.getElementsByTagName ("movie"); To get the root required by XML
for (i=0;i<xmlroot.length;i++)
{
Simple DOM, generating tables.
TR = Table.insertrow (-1);
TD = Tr.insertcell (-1);
td.align = "center";
td.innerhtml = ' <span class= ' warntxt ' > ' +xmlroot[i].getattribute (' id ') + ' </span> ';
TD = Tr.insertcell (-1);
td.innerhtml = Xmlroot[i].firstchild.data;
TD = Tr.insertcell (-1);
td.innerhtml = Xmlroot[i].getattribute (' type ');
}
Define page Links
page = XmlHttp.responseXML.getElementsByTagName ("Data") [0].getattribute (' page ')
if (page >1)
{
Prepage = page*1-1;
var changpage = "<a href=" javascript:showpage ("+ prepage +") ' > Prev </a> ';
}
Else
{
Changpage = "Previous page";
}
if (page <3)
{
NextPage = page*1+1;
Changpage + + <a href= ' javascript:showpage ("+ nextpage +") ' > Next </a> ';
}
else{
Changpage + = "Next page";
}
document.getElementById ("Changpage"). InnerHTML = Changpage;
}
}
