Ajax and Dom for dynamic loading

Read Catalogue

• How the DOM dynamically adds nodes
• Ajax asynchronous requests
• Chrome handles local AJAX asynchronous requests
• Reference:

First of all, the problem background: Want to asynchronously request a text file, and then dynamically create a DOM node through the contents of the file to add to the Web page.

Based on this need to understand:

1 How the DOM dynamically adds nodes

2 Ajax Asynchronous requests

3 How the Chrome browser handles local requests

How the DOM dynamically adds nodes

To add nodes dynamically, you need a good understanding of the DOM documentation.

A few common methods:

getElementById () getElementsByTagName () getattribute () SetAttribute ()

And

CreateElement () createTextNode () appendchild ()

Wait a minute.

Let's take a look at the method procedure for creating a DOM node, first you need to have a mounted div, which needs to be set up with the previous ID, so it's easy to get through getElementById.

<div id= "Test" ></div>        <script type= "Text/javascript" >             var para = document.createelement (" P ");//Create a P-label node             var txt  = document.createTextNode (" text content ");//Create a text node that specifies the relevant content             para.appendchild (TXT); /Add the text node to the P-tag node             document.getElementById ("test"). AppendChild (para);//Add the P tag node to the Div        </script>

This completes the dynamic creation of the node.

Ajax asynchronous requests

To create a XMLHttpRequest object for a different browser, you can take the following approach:

function Gethttpobject () {                if (typeof XMLHttpRequest = = "undefined") {                    XMLHttpRequest = function () {                        try{                            return new ActiveXObject ("Microsoft.XMLHTTP");                        } catch (e) {}                        return false;                    }                }                return new XMLHttpRequest ();            }

　　

This will return the request object supported by the browser. Then create the corresponding request for the open Send onReadyStateChange method.

Here is a way to put it directly in a method:

function Getnewcontent () {                var request = Gethttpobject ();                if (request) {                    Request.open ("GET", "test.txt", true);                    Request.onreadystatechange = function () {                        if (request.readystate = = 4) {                            //core code                        }                    };                    Request.send (null);                } else{                    Console.log ("Browser does not support XMLHttpRequest");                }                Console.log ("Function done!");            }

　　

Then wait for the departure getnewcontent to be ready.

All code:

<!doctype html>
　　
Chrome handles local AJAX asynchronous requests
Because Chrome does not support local asynchronous requests, accessing files directly via file://will result in an error!
The error message is as follows:
　　XMLHttpRequest cannot load file:///C:/Users/Administrator/Desktop/test.txt. Cross origin requests is only supported for protocol schemes:http, data, chrome-extension, HTTPS, Chrome-extension-r Esource.
　　uncaught networkerror:failed to execute ' send ' in ' XMLHttpRequest ': Failed to load' file:///C:/Users/ Administrator/desktop/test.txt '.
So add the following shortcut to Chrome:--allow-file-access-from-files . Note that you should add a space later, or you will be prompted with an error!
The correct wording:
"C:\Program Files (x86) \google\chrome\application\chrome.exe"--allow-file-access-from-files
This will allow you to access it correctly.
Transferred from: Http://www.cnblogs.com/xing901022/p/4345508.html#_labelTop
Ajax and Dom for dynamic loading