AJAX (asynchronous JavaScript and XML) Learning notes

Tag: Load pen Cannot send width nod ASC limit processing

Basic concepts:

1.AJAX is not a new programming language, but a new method of using existing standards.

The biggest advantage of 2.AJAX is to exchange data with the server without reloading the entire page and update some of the Web content to create a fast Dynamic Web page (traditional pages must reload the entire page if they need to update the content).

3.AJAX does not require any browser plugins, just allow JavaScript to run on the browser.

Examples of 4.AJAX applications: Sina Weibo, Google Maps, Google search suggestions

To create a XMLHttpRequest object:

Focus:

1.XMLHttpRequest is the basis of Ajax.

2. Create the syntax for the XMLHttpRequest object:

1 varXMLHTTP;2 //to deal with 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:3 if(window. XMLHttpRequest)4 {5     //ie7+, Firefox, Chrome, Opera, Safari6xmlhttp=NewXMLHttpRequest (); 7 }8 Else9 {Ten     //IE6, IE5 browser execution code Onexmlhttp=NewActiveXObject ("Microsoft.XMLHTTP"); A}

To send a request to the server:

Focus:

1.XMLHttpRequest objects for exchanging data with the server

2. Syntax:

1 xmlhttp.open ("GET", "Ajax_info.txt",true); 2 xmlhttp.send ();

3. Get faster and simpler than post, most of the cases, only three cases use post:

• Unable to use cache file (update file or database on server)

• Send large amounts of data to the server (post has no limit on the amount of data)

• Post is more stable and reliable when sending user input with unknown characters

4. If you use a POST request, you need to use setRequestHeader () to add an HTTP header, and then specify the data you want to send in the Send () method.

1 xmlhttp.open ("POST", "/try/ajax/demo_post2.php",true); 2 xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded"); 3 xmlhttp.send ("Fname=henry&lname=ford");

The URL in the 5.open () method is the address of the file on the server, which can be any type, such as. txt and. xml, or server script files,. asp/.php, as long as the task can be performed on the server before the response is returned.

6.Async is generally set to true so that JavaScript can execute additional scripts while waiting for the server to respond, and handle the response when it is ready. The function that is executed when the response is in the ready state in the onReadyStateChange event is specified:

 1  xmlhttp.onreadystatechange=function   ()  2   { 3  if  (xmlhttp.readystate==4 & & Xmlhttp.status==200)  4   { 5  document.getElementById (" mydiv "). Innerhtml=xmlhttp.responsetext;  6  }  7  }  8  xmlhttp.open ("GET", "/try/ajax /ajax_info.txt ", true  );  9  xmlhttp.send (); 

For some small requests, you can set it to false, instead of writing the onreadystatechange function, put the code behind the Send () function:

1 xmlhttp.open ("GET", "/try/ajax/ajax_info.txt",false); 2 xmlhttp.send (); 3 document.getElementById ("mydiv"). Innerhtml=xmlhttp.responsetext;

Server response:

Focus:

1. If you need to get a response, you need to use the two properties of the XMLHttpRequest object, ResponseText or Responsexml:

2. If the response from the server is not XML, use ResponseText:

1 document.getElementById ("mydiv"). Innerhtml=xmlhttp.responsetext;

3. In the case of XML, XML objects need to be parsed:

1 xmldoc=xmlhttp.responsexml; 2 txt= ""; 3 x=xmldoc.getelementsbytagname ("ARTIST"); 4  for (i=0;i<x.length;i++) 5 {6     txt=txt + x[i].childnodes[0].nodevalue + "<br>"; 7 }8 document.getElementById ("mydiv"). Innerhtml=txt;

onreadystatechange Events :

Focus:

Three properties of 1.XMLHttpRequest objects:

When a request is sent to the server, we perform a response based on the server's response.

The onreadystatechange event is triggered whenever readystate changes.

ReadyState stores the status information of the XMLHttpRequest.

In the above conditions, the onReadyStateChange event will be triggered 5 times.

2. Use the callback function:

A callback function is a function that is passed to another function as an argument.

If you have more than one AJAX task on your Web site, you should write a callback function for the XMLHttpRequest object, which is called every time you use Ajax.

The URL should be included and the task performed each time onreadystatechange occurs:

1 varXMLHTTP;2 functionLoadxmldoc (Url,cfunc)3 {4 if(window. XMLHttpRequest)5{//ie7+, Firefox, Chrome, Opera, Safari code6xmlhttp=NewXMLHttpRequest ();7   }8 Else9{//IE6, IE5 codeTenxmlhttp=NewActiveXObject ("Microsoft.XMLHTTP"); One   } AXmlhttp.onreadystatechange=Cfunc; -Xmlhttp.open ("GET", URL,true); - xmlhttp.send (); the } -  - functionmyFunction () - { +     //The Loadxmldoc () function stores XML content -Loadxmldoc ("/try/ajax/ajax_info.txt",function()     +     { A         if(Xmlhttp.readystate==4 && xmlhttp.status==200) at         { -document.getElementById ("Mydiv"). innerhtml=Xmlhttp.responsetext; -         } -     }); -}

asp/php instances:

1<! DOCTYPE html>234<meta charset= "Utf-8" >5<script>6 functionshowhint (str)7 {8   varXMLHTTP;9   if(str.length==0)Ten   {  Onedocument.getElementById ("Txthint"). Innerhtml= ""; A     return; -   } -   if(window. XMLHttpRequest) the   { -     //ie7+, Firefox, Chrome, Opera, Safari browser code execution -xmlhttp=NewXMLHttpRequest (); -   } +   Else -   { +     //IE6, IE5 browser execution code Axmlhttp=NewActiveXObject ("Microsoft.XMLHTTP"); at   } -Xmlhttp.onreadystatechange=function() -   { -     if(Xmlhttp.readystate==4 && xmlhttp.status==200) -     { -document.getElementById ("Txthint"). innerhtml=Xmlhttp.responsetext; in     } -   } toXmlhttp.open ("GET", "/try/ajax/gethint.php?q=" +str,true); + xmlhttp.send (); - } the</script> * $<body>Panax Notoginseng  - the<form action= "" > +Enter Name: <input type= "text" id= "txt1" onkeyup= "Showhint (this.value)"/> A</form> the<p> message: <span id= "Txthint" ></span></p> +  -</body> $
1. If str.length = = 0 is not entered in the form, empty the contents of the Txthint placeholder and exit.
2. If there is content in the form, onkeyup time triggers the Showhint function, creates the XMLHttpRequest object, executes the function when the server responds ready, and finally sends the request to the file on the server.
AJAX (asynchronous JavaScript and XML) Learning notes