Home > Developer > Web Develop
Previous studies are in Evernote notes, before also registered in the blog park, but has been useless, it is wasted. Recently thought that since is to learn the technique, uses this to remember some of my daily study notes is not over.
Anyway, I hope that I can get rid of the novice this call Xi Hee (*^__^*)
1, the definition of Ajax
ajax=asynchronous JavaScript and XML (asynchronous JavaScript and XML)--you should first understand HTML, XHTML, CSS, JavaScript, and DOM structures.
Ajax is a new approach, not a new programming language, where you can exchange data with the server to update the Web page without reloading the page.
AJAX enables Web pages to be updated asynchronously by exchanging small amounts of data in the background with the server.
2. How Ajax works
(1), create XMLHttpRequest Object
XMLHttpRequest is used to exchange data in the background and server. All browsers are supported (IE5, IE6 use ActiveXObject)
Create XMLHttpRequest objects: (All modern Browsers (ie7+, Firefox, Chrome, Safari, and Opera) are built-in XMLHttpRequest objects)
Syntax: Variable=new XMLHttpRequest ();
Older versions of IE5, IE6 use ActiveX objects: Variable=new activexobject ("mcrosoft.xmlhttp");
To handle all modern browsers, including IE5 and IE6, check whether the browser supports XMLHttpRequest objects . If supported, the XMLHttpRequest object is created. If not supported, create the ActiveXObject:
var xmlhttp;
if (window. XMLHttpRequest)
{
Code for ie7+, Firefox, Chrome, Opera, Safari
Xmlhttp=new XMLHttpRequest ();
}else{
Code for IE6, IE5
Xmlhttp=new ActiveXObject ("mcrosoft.xmlhttp");
}
(2). Send a request to the server
Use the open () and send () methods: Xmlhttp.open ("GET", "test.txt", true); Xmlhttp.send ();
The open () and send () methods are described below:
Open (Method,url,async): Specifies the type of request, the URL, and whether the request is processed asynchronously. Method (request type; get or post), URL (file in server location), async (true--asynchronous or false--synchronization); the url parameter of the Open () method is the address of the file on the server. The file can be any type of file, such as. txt and. xml, or server script files, such as. asp and. PHP (the ability to perform tasks on the server before the response is returned).
Send (String): Sends the request to the server, string (for post requests only)
Here I briefly introduce the Get and post:
A simple GET Request: Xmlhttp.open ("Get", "demo_get.asp", true); Xmlhttp.send ();//may get cached results
At this point you can add a unique ID:xmlhttp.open ("GET", "demo_get.asp?t=" +math.random,true) to the URL; xmlhttp.send ();
eg
<script type= "Text/javascript" >
function Loadxmldoc ()
{
var xmlhttp;
if (window. XMLHttpRequest)
{//code for ie7+, Firefox, Chrome, Opera, Safari
Xmlhttp=new XMLHttpRequest ();
}
Else
{//code for IE6, IE5
Xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP");
}
Xmlhttp.onreadystatechange=function ()
{
if (xmlhttp.readystate==4 && xmlhttp.status==200)
{
document.getElementById ("Mydiv"). Innerhtml=xmlhttp.responsetext;
}
}
Xmlhttp.open ("GET", "/ajax/demo_get.asp?t=" + math.random (), true);
Xmlhttp.send ();
}
</script>
<body>
<button type= "button" onclick= "Loadxmldoc ()" > Request data </button>
<div id= "Mydiv" ></div>
</body>
If you want to send a message through GET, you can:
Xmlhttp.open ("GET", "Demo_get2.asp?fname=bill&lname=gates", true); Xmlhttp.send ();POST request:
A simple POST request:
Xmlhttp.open ("POST", "demo_post.asp", true); Xmlhttp.send ();If you need to POST data like an HTML form, use setRequestHeader () to add an HTTP header. Then specify the data you want to send in the Send () method:
Xmlhttp.open ("POST", "ajax_test.asp", true); Xmlhttp.setrequestheader ("Content-type", "application/ X-www-form-urlencoded ");//content-type:application/x-www-form-urlencoded means that the encoding of the client's submission to the server's text content is URL-encoded, that is, in addition to the standard characters , each byte is denoted by a "%" before the binary-byte 16. setRequestHeader (header,value) to add an HTTP header to the request. Header: The name of the specifiedheader, value: The specified header values.Xmlhttp.send ("Fname=bill&lname=gates");Use the POST request in the following situations:
The rest of the situation generally uses the Get method.
(3), server response
Use the ResponseText or Responsexml property of the XMLHttpRequest object.
ResponseText: Gets the response data in the form of a string.
The ResponseText property returns a response in the form of a string, so it can be used:
document.getElementById ("Mydiv"). Innerhtml=xmlhttp.responsetext;Responsexml: Gets the response data in XML form.
(4), onreadystatechange events
The onreadystatechange event is triggered whenever the readyState changes.
The ReadyState attribute holds state information for XMLHttpRequest.
The following are three important properties of the XMLHttpRequest object:
onReadyStateChange: Stores the function (or the function name), which is called whenever the ReadyState property changes. The onReadyStateChange event is triggered 5 times (0-4), corresponding to each change of the readyState.
ReadyState: The state of being xmlhttprequest. Vary from 0 to 4.
0: Request not initialized
1: Server Connection established
2: Request received
3: In Request processing
4: The request is complete and the response is ready
status:200: "OK", 404: Page Not Found
Use the callback function: a function passed as a parameter to another function. The function call should contain the URL and the task that is performed when the onReadyStateChange event occurs (each call may be different).
eg
function MyFunction () {Loadxmldoc ("Ajax_info.txt", function () { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getElementById ("mydiv"). Innerhtml=xmlhttp.responsetext; } );}
Showhint () function:
egfunction Showhint (str) {var xmlhttp;if (str.length==0) { document.getElementById ("Txthint"). innerhtml= ""; return; } if (window. XMLHttpRequest) {//code for ie7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest (); } else {//code for IE6, IE5 xmlhttp=new activexobject ("Microsoft.XMLHTTP"); } Xmlhttp.onreadystatechange=function () { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getElementById ("Txthint"). Innerhtml=xmlhttp.responsetext; } } Xmlhttp.open ("GET", "gethint.asp?q=" +str,true); Xmlhttp.send ();}If the input box is empty (str.length==0), the function empties the contents of the Txthint placeholder and exits the function.
If the input box is not empty, the Showhint () function performs the following tasks:
A. Creating a XMLHttpRequest Object
B. Executing a function when the server responds ready
C. Sending a request to a file on the server
D. Please note that we have added a parameter Q (with the contents of the input box) to the URL
Ajax Learning Notes (continuous updates ...) ）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
