JavaScript AJAX Implementation Data post submission

The Simple new

First you need to create a new variable and assign it a XMLHttpRequest object instance. This is simple in JavaScript, as long as you use the New keyword for the object name, as shown in Listing 1.

Listing 1. Create a new XMLHttpRequest object

The code is as follows	Copy Code
<script language= "javascript" type= "Text/javascript" > var request = new XMLHttpRequest (); </script>

It's not hard, is it? Remember that JavaScript does not require a variable type to be specified, so you do not need to do this as in Listing 2 (this may be required in the Java language).

Listing 2. To create a XMLHttpRequest Java pseudo code

The code is as follows	Copy Code
XMLHttpRequest request = new XMLHttpRequest ();

So create a variable with var in JavaScript, give it a name (such as "request"), and then assign it a new XMLHttpRequest instance. You can then use the object in the function.

Error handling

In fact all sorts of things can go wrong, and the code above does not provide any error handling. A better approach is to create the object and gracefully exit the problem when it occurs. For example, any older browsers--whether you believe it or not--still use the old version of Netscape Navigator--Do not support XMLHttpRequest, and you need to let these users know that something is wrong. Listing 3 shows how to create the object to emit a JavaScript warning when a problem occurs.

Listing 3. Create a XMLHttpRequest with error handling capabilities

The code is as follows	Copy Code
<script language= "javascript" type= "Text/javascript" > var request = false; try { Request = new XMLHttpRequest (); } catch (Failed) { Request = false; } if (!request) Alert ("Error initializing xmlhttprequest!"); </script>

Be sure to understand these steps:

Create a new variable request and assign False value. False is used later as a decision condition, which indicates that the XMLHttpRequest object has not yet been created.
Add Try/catch Block:
An attempt was made to create a XMLHttpRequest object.
Failure (catch (failed)) guarantees that the value of the request is still false.
Check to see if the request is still false (not false if everything is OK).
If there is a problem (request is false), a JavaScript warning is used to notify the user that there is a problem.
The code is very simple, and for most JavaScript and WEB developers, it takes longer to really understand it than to read and write code. You have now got a XMLHttpRequest object creation code with error checking and can tell you where the problem is.

The following are the coding of XMLHTTP:

The code is as follows

Copy Code

var xmlHttp; function Createxmlhttprequest () { Mozilla Browser (creates the XMLHttpRequest object as a local browser object) if (window. XMLHttpRequest) {//mozilla browser XmlHttp = new XMLHttpRequest (); }else if (window. ActiveXObject) {//ie browser IE browser (creates the XMLHttpRequest object as an ActiveX object) try{ XmlHttp = new ActiveXObject ("Msxml2.xmlhttp"); }catch (e) { try { XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP"); }catch (e) {} } } if (xmlHttp = = null) { Alert ("Cannot create XMLHttpRequest object"); return false; } } Method for issuing an asynchronous request function Sendasynchronrequest (url,parameter,callback) { Createxmlhttprequest (); if (parameter = = null) { Set up an event handler, and when the XMLHTTP state changes, it starts the event handler, which he calls Callback the specified JavaScript function Xmlhttp.onreadystatechange = callback; Sets the parameters that are invoked on the brush (the manner in which it was submitted, the URL requested, the type of request (asynchronous request)) Xmlhttp.open ("Get", url,true);//true indicates that an asynchronous request is made. Xmlhttp.send (NULL); }else{ Xmlhttp.onreadystatechange = callback; Xmlhttp.open ("POST", url,true); Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded;"); Xmlhttp.send (parameter); } } The above code is a common method, and then the above method is called function Loadpros (title,count,pid,cid,level) { Calling the asynchronous Request method url = "... "; Sendasynchronrequest (Url,null,loadcallback); } Specifying callback methods function Loadcallback () { Try { if (xmlhttp.readystate = = 4) { if (Xmlhttp.status = = 200) { if (xmlhttp.responsetext!= null && xmlhttp.responsetext!= "") { var divproid = document.getElementById (' videolist '); divproid.innerhtml = Xmlhttp.responsetext; for (i=0;i<len;i++) { var video_url = document.getElementById ("videolist" +i+ ""). href; if (video_url!= undefined && video_url!= null && video_url!= "") { Window.location.href = Video_url; } } } } } if (xmlhttp.readystate = 1) { Alert ("Loading connection objects ..."); } if (xmlhttp.readystate = 2) { Alert (The Connection object is loaded. "); } if (xmlhttp.readystate = 3) { Alert ("Data Capture ..."); } } catch (E) { Alert (e); } }

A better compatibility of Ajax code

The code is as follows

Copy Code

var http_request = false; Ajax objects function Changepage (url,idname) { if (Url.indexof ("?") >-1) url=url+ "&now=" + (new Date ()). GetTime (); Else url=url+ "now=" + (new Date ()). GetTime (); Http_request = false; if (window. XMLHttpRequest) {//Mozilla, Safari,... Http_request = new XMLHttpRequest (); if (Http_request.overridemimetype) { Http_request.overridemimetype (' Text/xml '); } else if (window. ActiveXObject) {//IE try { Http_request = new ActiveXObject ("Msxml2.xmlhttp"); catch (e) { try { Http_request = new ActiveXObject ("Microsoft.XMLHTTP"); catch (e) {} } }         if (!http_request) {              alert (' Giving up:( Cannot create an XMLHTTP instance ');             return false;        }         http_request.onreadystatechange = loadcontent (idname);   //alert ("url=" +url)         http_request.open (' Get ', url, true);         http_request.send (null); }   Function loadcontent (idname) {    if (http_request.readystate!= 4)  {  & Nbsp;//alert ("Error http_request.readystate" +http_request.readystate);   return;  }  if (http_request.status!=)  {    //alert ("error" +http_request.status);;   return;  }  eval (' document.getElementById (' +idname+ '). InnerHTML ") = Http_request.responsetext;  //document.getelementbyid (' programlist '). InnerHTML = "ddddddddddddddddddddddddd";  }