JavaScript-based AJAX simple demo, javascriptajax

JavaScript-based AJAX simple demo, javascriptajax

AJAX

AJAX = Asynchronous JavaScript and XML (Asynchronous JavaScript and XML ).

AJAX is not a new programming language, but a new method that uses existing standards.

AJAX is the art of exchanging data with the server and updating some webpages without reloading the entire page.

Function prepareForms () {for (var j = 0; j <document. forms. length; j ++) {var this_forms = document. forms [j]; resetFields (this_forms); this_forms.onsubmit = function () {if (! ValidateForm (this) return false; // perform browser-side form verification var article = document. getElementsByTagName ("article") [0]; if (submitFormWithAjax (this, article) return false; // this indicates preventing repeated submission. The actual submission has been completed. return true ;}}}

First, call the corresponding verification method and ajax submission method through the form submission event. If ajax is submitted successfully, return false to intercept the submission event. If ajax fails, it is submitted normally.

Function displayAjaxLoading (element) {while (element. hasChildNodes () {element. removeChild (element. lastChild); // if there are still child nodes that are deleted until they are empty internally} var content = document. createElement ("img"); content. setAttribute ("src", "images/loading.gif"); content. setAttribute ("alt", "loading .... "); element. appendChild (content);} // clear the element and add an imgfunction submitFormWithAjax (whichform, thetarget) {var request = getHTTPObjec T (); if (! Request) {return false;} displayAjaxLoading (thetarget); // call the Loading Method var dataParts = []; var element; // create the container to use in advance for (var I = 0; I <whichform. elements. length; I ++) {element = whichform. elements [I]; dataParts [I] = element. name + "=" + encodeURIComponent (element. value) // convert the element name and value to URL encoding in the container} var data = dataParts. join ("&"); // convert the array into a string. Use & to connect requests between each project. open ("post", whichform. getAttribute ("action"), true); // submit a request named post to the target address of the form. setRequestHeader ("content-type", "application/x-www-form-urlencoded "); // set the header information // The method that will be called after obtaining the request is regarded as a trigger. The server will execute the following request. onreadystatechange = function () {if (request. readyState = 4) {if (request. status = 200 | request. status = 0) {var matches = request. responseText. match (/<article> ([\ s \ S] +) <\/article>/) // capture the text if (matches. length> 0) {thetarget. innerHTML = matches [1]; // The regular expression returns 0 containing a version not included in <article> 1} else {thetarget. innerHTML = "<p> sorry not find </p>" ;}} else {thetarget. innerHTML = "<p>" + request. statusText + "</p>" ;}} request. send (data); // send the return true request to the target server; // indicates that the function has been executed}

Let's take a step-by-step look at what has been done

First, a request object is obtained.

Second, call the display method to delete all elements in the article and put the load animation on the page.

Third, create a URL-encoded request to store the name and URL-escaped value in an array, and then combine each of the values into a complete string through & join.

Fourth, set basic properties of the request, such as naming the target address header file.

Fifth, create a listener to listen to requests. If the request is successful, fill in the html of the response to the target article.
6. If the request is successfully sent, true is returned.

The above is a simple demo of JavaScript-based AJAX introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave a message. The editor will reply to you in time!