AJAX response Data XML format and AJAX. innerHTML Processing method

Ajax. innerHTML Processing

JavaScript code Analysis

First of all, this needs to be sent three times, so we write the reusable code into a function, the task of which is to set the XMLHttpRequest object and initialize the necessary attributes. The code largely refers to the Ajax Basics Tutorial and the AdvancED DOM scripting.

code is as follows

copy code

function Createrequest (options) {  var req = false;  if ( Window. XMLHttpRequest) {   var req = new window. XMLHttpRequest ();  } else if (window. ActiveXObject) {   var req = new window. ActiveXObject (' microsoft.xmlhttp ');  }  if (!req) return false;  req.onreadystatechange = function () {   if (req.readystate ==4 && req.status = 200) {    options.listener.call (req);   }  };  req.open (options.method,options.url,true);  return req; }

Createrequest accepts only one options parameter, which is an object that returns the XMLHttpRequest object. Parameter options may be such a literal object:

The code is as follows	Copy Code
var options = { URL: ' Ajax/strtest.txt ', Listener:callback, Method: ' Get ' }

The URL represents the address of the file to be requested, and listener is used as the onreadystatechange,method of the open argument. This object is relatively simple, just "just enough" degree, should also need to expand.

With this function of creating the XMLHttpRequest object, our task is left with send. This page has three similar functions that request different three text files from the server:

The code is as follows

Copy Code

function Ajaxstr () { var options = { URL: ' Ajax/strtest.txt ', Listener:callback, Method: ' Get ' } var request = createrequest (options); Request.send (NULL); } function ajaxtable () { var options = { URL: ' Ajax/tabletest.txt ', Listener:callback, Method: ' Get ' } var request = createrequest (options); Request.send (NULL); } function ajaximg () { var options = { URL: ' Ajax/imgtest.txt ', Listener:callback, Method: ' Get ' } var request = createrequest (options); Request.send (NULL); } The callback function inserts them into the document using innerHTML. function callback () { var str = This.responsetext; document.getElementById (' Test '). InnerHTML = str; }

The final task is to generate the buttons that call the function, and no code is given here.

Ajax XML processing

You still use the function in the previous section to create the XMLHttpRequest object, where you don't write code. The Ajaxrequest function to send the request is also simpler:

The code is as follows	Copy Code
function Ajaxrequest () { var options = { URL: ' Ajax/ajaxxml.xml ', Listener:callback, Method: ' Get ' } var request = createrequest (options); Request.send (NULL); }

Among them, ajaxxml.xml This file is the XML format file we want to request, and its contents are as follows:

The code is as follows	Copy Code
<?xml version= "1.0" encoding= "UTF-8"?> <root> <server> <lang>PHP</lang> <lang>Java</lang> <lang>Python</lang> <lang>.NET</lang> <lang>Ruby</lang> </server> <browser> <lang>XHTML</lang> <lang>CSS</lang> <lang>JavaScript</lang> <lang>ActionScript</lang> </browser> </root>

The final response function callback is the key:

code is as follows

copy code

Function callback () {  var xmldoc = this.responsexml;  var Parent = document.getElementById (' Langsel ');  var side = Parent.options[parent.selectedindex].value | | "Server";  var target = Xmldoc.getelementsbytagname (side) [0];  var str = "<ul>";  var langs = target.getelementsbytagname ("lang");  var Currentlang = null;  for (var i = 0; i < langs.length i++) {   currentlang = langs[i];   str + = ' < Li> ' + currentlang.childnodes[0].nodevalue + ' </li> ';  }  str + = ' </ul> ';  document.getelementbyid (' Test '). InnerHTML = str; }

var xmldoc = This.responsexml; Gets the requested XML file content through the XMLHttpRequest Responsexml property. Then we can use the "various" methods to deal with it.

Xmldoc.getelementsbytagname (side) [0];side value may be ' server ' or ' browser ', the server tag is obtained when the server is on. Then on its basis getelementsbytagname ("Lang"), we get all the server tags under the lang, for an array-like structure, we can iterate over this array.