Javascript Learning Guide (version 2nd) Notes (6) Dom, Ajax and Data

1. Dom
2. node attributes and Methods
3. Ajax security and work zone
4. Ajax data: XML or JSON (JavaScript Object symbol)

1. Dom

In W3C standards on Dom, the document element is described as a node set, which is connected by a hierarchical tree structure. You can not only read nodes from the tree, but also delete or create new nodes.

# Document
Html
Head
Title
Body
H1
Div
P
# Text
P
# Text

2. node attributes and Methods

Each node in the document tree has the basic attributes and basic method set defined in the Node object of dom (core. Node object attributes mainly include:

Nodename: object name. For example, the name of the head element is head;
Nodevalue. If it is not an element, the object value is returned;
Nodetype, which is a node type represented by numbers;
Parentnode: the parent node of the current node;
Childnodes, A nodelist composed of its subnodes, provided that there are subnodes;
Firstchild, the first node in nodelist composed of subnodes;
Lastchild, the last node in nodelist composed of subnodes;
Previussibling: if the current node is a subnode in nodelist, it indicates the previous node in the list;
Nextsibling: if the current node is a subnode in nodelist, it indicates the next node in the list;
Attributes, A namednodemap, expressed in the form of key/value pairs, is the attribute list of the element;
Ownerdocument, a document object. It is useful when you have multiple document objects;
Namespaceuri: The URI Of The namespace. If yes, it targets nodes;
Prefix: the prefix of the namespace. If yes, it is for nodes;
Localname. If namespaceuri is specified, it indicates the local place name of the node.

3. Ajax security and work zone

In JavaScript, Ajax follows the same-origin and same-domain rules: Only web services with the same server (same domain) can be called on web pages; that is: the server page and the page sent by the server are in the same server and domain.

But for AjaxProgramRequest a web service from the local server and then receive the response from the local server. It does not care whether the local Web Service is actually implemented by accessing the remote web service.

4. Ajax data: XML or JSON (JavaScript Object symbol)

XML Ajax response

The advantage is that it is more diverse than a simple string or HTML segment. In addition, you can directly use the DOM method as you would for web page elements to operate ajax to call the returned XML format response.

Make sure that the server-side application sets the correct text/XML data mine type when returning data, and then obtains the response information through the responsexml container of the XMLHTTPRequest object.

JSON

JSON is a lightweight data exchange format ". JSON is a data format that converts server-side data structures into JavaScript objects easily compared to a set of strings separated by commas (,) and complicated (expensive) XML processing.

JSON is actually an object defined using JavaScript syntax. the syntax of an object includes a pair of braces and its members:
Object {} or object {string: value ...}

For an array, it is composed of a group of elements plus each other's parentheses:
Array [] or array [value,..., value]

Note: strings can be referenced using single or double quotation marks in Javascript, while JSON only supports double quotation marks.

Example: Use a simple JSON
$ Result = '[{"value": "stlou", "title": "st. Louis "},'.
'{"Value": "KC", "title": "Kansas City"}]';

JSON object

You can find a JSON JavaScript library on http://www.json.org/js.html, which provides some JSON Objects Based on the library. Includes static methods for directly accessing JSON objects:
JSON. parse: Creates a JavaScript Object Based on a specified JSON string;
JSON. stringify: serialize a javascript object into a JSON string.

JSON Example 1:

// Calculate the JSON string"
VaR Response = JSON. parse (xmlhttpobj. responsetext );

VaRCityselection=Document. getelementbyid ("Cityselection");
VaRName=Value= Null;

// Process data returned from a JSON object
For ( VaR I = 0 ; I < Response. length; I ++ ){
Name = Response [I]. title;
Value = Response [I]. value;
Cityselection. Options [I] =   New Option (name, value );
}

JSON Example 2:

// JSON object instance obtained from the server:
{ " Title " : " Appleini " ,
" Ingredients " :[{ " Ingredient " : " 1 ounce vodka " },
{ " Ingredient " : " 1/2 ounce Sour apple pucker or apple schnapps " }],
" Instruction " : " Mix vodka and schnapps in a glass filled with ice. " }

// =================================================== ======================================
// process JSON data

// Create an object
var recipeobj = JSON. parse (XMLHTTP. responsetext);

var recipe = document. createelement ('div ');
recipe. ID = 'receiver ';
recipe. classname = 'receiver ';

//Add title
VaRTitle=Recipeobj ['title'];
VaRTitlenode=Document. creteelement ('h3 ');
Titlenode. appendchild (document. createtextnode (title ));
Recipe. appendchild (titlenode );

// Add recipe
VaR Ingredients = Recipeobj. ingredients;
For ( VaR I = 0 ; I < Ingredients. length; I ++ ){
VaR Item = Ingredients [I]. ingredient;

}

.
Body [0]. Appendchild (recipe );