JS-based DOM programming basics and JSON syntax and the Ajax basics of JS

1. In DOM programming: Note: Using DOM operations is generally done in the Window_onload event after the page is fully loaded

NodeName indicates the name of the node, such as: <input type= "button" value= "OK"/> at this time nodename= "input";

NodeValue represents the value of the node, such as <p>aaa</p> nodevalue= "AAA" At this time, and nodename= "P";

NodeType indicates the inverse of the node type constant value

FirstChild represents the first child node under a DOM node (childNodes) as follows code

Code highlighting produced by Actipro Codehighlighter (freeware) http://www. codehighlighter.com/--><!--Children Object array elements example-->
LastChild indicates that the last child node code under a DOM node (childNodes) is shown above
ChildNodes represents a list of all child nodes
PreviousSibling returns the previous sibling node that points to the current node, if there is no back null;
NextSibling returns the next sibling node that points to the current node, if no return null exists;
Haschidlnodes returns a Boolean type that indicates whether there are child nodes under the current node and returns True, otherwise false
Attributes used to get or set the property value of a node
ParentNode Gets the parent node of the current node
AppendChild (node) adds node to the end of ChildNodes (that is, add node child nodes under a node)
RemoveChild (node) to delete node nodes under nodes
ReplaceChild (Newnode,oldnode) replaces the original node with the new node NewNode OldNode
InsertBefore (newnode,refnode) Insert NewNode before Refnode
Example use: Add a <p> paragraph tag under the body tag and add text to the paragraph
   <script type= "Text/javascript" >        var Op = document.createelement ("P");  Create tags <p/>        var otext = document.createTextNode ("Hello Word");  Create text node        op.appendchild (otext);  Add text node        document.body.appendChild (Op) under the <p> node;  add <p> to the body node    </script>
2.JSon syntax
The simplest JSON syntax name/value {"Name": "TOM"}
Multiple name/value pairs are strung together {"FirstName": "TOM", "LastName": "Joy", "Emal": "[email protected] "}
When you want to represent a set of values as follows
{"Onearray": [
{"FirstName": "Tom", "LastName": "Joy", "Emal": "[email protected]"},
{"FirstName": "Lucy", "LastName": "Ann", "Emal": "[email protected]"},
{"FirstName": "Tiger", "lastName": "Pig", "Emal": "[email protected]"}
]} When you ask or set a property value, such as: The first firstName can be onearray[0].firstname to ask or set its value.
The Ajax Foundation in 3.JS and the creation of the XMLHttpRequest object code are as follows
The use of Ajax in A.js
B. Create a XMLHttpRequest pair of images
<script type= "Text/javascript" >
    function Createrequest ()
    {        var request = False        try        {            request = new XMLHttpRequest ();  at present IE7 above or Firefox and other versions have built-in xmlhttpreques to the image, direct new can         }        catch (e)        {            try            {                request= New ActiveXObject ("Msxml2.xmlhttp");    IE7 Previous versions such as IE6, such as the previous version              }            catch (ex)            {                try                {                    request=new ActiveXObject (" Microsoft.XMLHTTP ");    Older version                   }                catch (em)                 {                    request = false;                   Run here to show that your browser does not support XMLHttpRequest                      }}}        
        if (!request) alert ("Error initializing xmlhttprequest!");
    }            </script>
About Xmlhttprequest.open ("Get", url, True) method configuration
The first parameter is the request type: can be get or post
The second parameter is the requested URL:
The third parameter is whether the request is asynchronous: It is generally true, otherwise Ajax is less meaningful.
About the use and description of the Xmlhttprequest.send (null) method: When the method is called, the request is actually sent back to the server:
Its arguments can be null, a query statement, or, of course, a parameter in the preceding URL.
About XMLHttpRequest callback function onReadyStateChange property: Its value has 5 kinds of strong state
0: The delegate has just sent a request to the server
1: On behalf of the request is in the network transmission
2: On behalf of the request has reached the server, the server is processing
3: Reverse on behalf of request
4: On behalf of the request full end//execution only need to observe the strong state is 4 o'clock
About the callback function is configured as follows
      function Processzipdata ()          {             createrequest ();                                         Create a XMLHttpRequest pair like             var zipcode = document.getElementById ("ZipCode"). Value;             var url = "Zipdata.js?zipcode=" + Escape (zipcode);  build the URL             request. Open ("GET", url, true);                          Configure the Open method             request.onreadystatechange = updatepage;                 Set the callback function (Updatepage)             request.send (null);                                      Call the Send method for sending the request         }
4. For JS in the DropDownList option (that is, an option control, BS under the final resolution of the following standard select label)
A. var Olistbox = document.getElementById ("Selage");
alert (Olistbox.options[0].firstchild.nodevalue); Option[0] represents the 1th option, which is the 1th option of the output listbox.
Alert (Olistbox.options[1].getattributes ("value"))//Get ListBox second option value
alert (Olistbox.options[2].text); Gets the text of the 3rd selection in a ListBox
alert (Olistbox.options[2].value); Gets the value of the 3rd selection in a ListBox
alert (Olistbox.options[2].index); Gets the index of the 3rd selection in a ListBox
Alert (oListBox.option.length)//Get the number of options in the listbox
B. Get or set the selected item
alert (Olistbox.selectedindex); Gets or sets the index of the selected item
Alert (olistbox.options[olistbox.selectedindex].text)//Gets the text of the selected item
Olistbox.selectedindex =-1; setting is not selected
5. Delete Options
       Remove an option
       function Dal (index)   //Index of the item to delete          {             var olistbox = document.getElementById ("Selage");             Olistbox.options[index] = null;             Olistbox.remove (index);     Same as above         }         //Clear all options         function Clear (olistbox) {for             (var i = olistbox.options.length-1; I >= 0; i--)      //Note must be removed from the back and forth               {                 olistbox.remove (i);             }         }
6. Add Items
         function Add (Olistbox, SName, svalue)          {             var option = document.createelement ("option");          Create node Options             option.appendchild (document.createTextNode (SName));      Create a text node and add it to the options node under              if (arguments.length = = 3)                                            {                 Option.setattribute ("value", svalue);                Sets the value of "               }             Olistbox.appendchild (oPtion);                           Add the Options node to the Olistbox node         }
JS-based DOM programming basics and JSON syntax and the Ajax basics of JS