Home > Developer > Web Develop

Detailed Ajax core--xmlhttprequest object (bottom)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Continue with the previous article
The previous article about the XMLHttpRequest object sends the request to the server only to get the way, did not say the post way. That's because the Post method needs to say something else, which is the DOM document Object model. JavaScript reads, alters, or removes elements from HTML, XHTML, and XML through the DOM, and can refactor the entire HTML document. You can add, remove, change, or rearrange items on a page, and such actions appear on the page immediately. In addition, all browsers implement the DOM standard specification published by the Web, and the DOM's cross-browser compatibility issue is not a problem.

Let's take a look at the following HTML document

<title> Document title </title>
<body>
<a href= "" > My Links </a>
</body>

This HTML document is transformed into an object representation of this DOM tree.

As you can see from this tree, each item in the HTML corresponds to a node in the DOM, including attributes and text.
Each node contains properties for some information. The node properties include the following three types:

    • NodeName (node name)
    • NodeValue (node value)
    • NodeType (node type)

NodeName
The NodeName property contains the name of a node.

    • The nodeName of the element node is the label name
    • The nodeName of the attribute node is the property name
    • The nodeName of a text node is always #text
    • The nodeName of the document node is always #document

Note: The label name of the XML element contained in NodeName is always capitalized

NodeValue

    • For text nodes, the NodeValue property contains text.
    • For attribute nodes, the NodeValue property contains the property value.

The NodeValue property is not available for document nodes and ELEMENT nodes.

NodeType
The NodeType property returns the type of the node.
The main common node types are the following:

    • Element node type is 1
    • The attribute node type is 2
    • The text node type is 3
    • The document node type is 9

Use the DOM to start by getting the DOM object and see how to access the DOM object itself:

var domtree = document;

In practice, we are more directly using document to represent DOM objects.
From here, we can access all the contents of the document through the DOM object.

Take a look at the method used by the node.
Let's take a look at getElementById () and getElementsByTagName ()

    • document.getElementById ("ID"); Returns the node specified by ID;
    • document.getElementsByTagName ("label name"); Returns the specified label name for all nodes (as a list of nodes);

In this article we use the main use of these methods, the specific details can be online search, or can be viewed here: Detailed information can be seen http://www.w3school.com.cn/htmldom/index.asp;

Here's a simple example of how to use the DOM to send content to the server using the Post method and display the results.
Look at this HTML page

<title>ajax and the Dom</title>
<body>
<div id= "Content" >
<input type= "text" id = "name" value= "MyName"/>
<br/>
<input type= "text" id = "age" value= "/>"
</div>
<input type= "button" value= "Tell me!"/>
<div id = "Result" ></div>
</body>

Our goal is simply to send the name and age to the server for processing and display the results in the result div.
The XMLHttpRequest object is created using the previous method, and there is no more talking about it.
The first is to get the name and age of the value

var name = document.getElementById ("name"). Value; Take a name
var = document.getElementById ("Age"). Value; Take age

Then the name and age are stitched together in the communication format.

var info = name+ "|" +age; Simply split the name and age with a vertical line to the server for processing

OK, tidy up the content to send, determine the address to send, and the way; look, here is the Post method, the address is naturally to be processed server address.

Xmlhttp.open ("Post", "http://localhost/WebForm1.aspx", true);

At this point we can use the Send method to send the info object to the server.

Xmlhttp.send (info);

Processing the returned results is also straightforward, showing the results directly in result

var result = document.getElementById ("result"). FirstChild;
Xmlhttp.onreadystatechange = function () {
if (xmlhttp.readystate = = 4 && xmlhttp.status = = 200) {
Result.nodevalue = Xmlhttp.responsetext;
}
}

Incidentally, the result is shown in the div of result, why getElementById ("result"). FirstChild instead of direct getElementById ("result"). This is related to the beginning of the DOM object, said before, in the DOM is also a node, the text in the DIV is the result of the DIV's child nodes, but also the only node, so with FirstChild can be taken.

full page Code

The server side will do the most recent simple processing, the code is as follows:

<%@ page language= "C #" autoeventwireup= "true"%>
<script language= "C #" runat= "Server" >
public string result;
private void Page_Load (object sender, System.EventArgs e)
{
Place user code here to initialize page
System.IO.StreamReader sr = new System.IO.StreamReader (PAGE.REQUEST.INPUTSTREAM,SYSTEM.TEXT.ENCODING.UTF8);
String[] gets = Sr. ReadToEnd (). Split (' | ');
result = String. Format (@ "Your name is {0},{1} years old!", gets[0],gets[1]);
}
</script>
<%=result%>

A simple post-send example is complete.

Finally, in different situations it is necessary to use setRequestHeader to modify the request header instead of sending it directly.

Category: AJAX

Detailed Ajax core--xmlhttprequest object (bottom)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
detailed world map vector cloudwatch detailed monitoring detailed network statistics detailed network diagram visio bottom html tag select bottom sql server sql select bottom 10

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More