Shulou(Shulou.com)06/03 Report--

Editor to share with you how to achieve Ajax request, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Ajax is not a new programming language, but a technology for creating better, faster and more interactive Web applications. With Ajax, you can use JavaScript's XMLHttpRequest object to communicate directly with the server. You can exchange data with the Web server without reloading the page. In the example in this article, we will demonstrate how a web page communicates with a HTML server when a user enters data into a standard web form.

Simple Ajax request var xmlHttp; / / create XMLHttpRequest object function createXMLHttpRequest () {if (window.ActiveXObject) {xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");} else if (window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest ();}} / / integrate url parameter function createQueryString () {var name = document.getElementById ("txtName"). Value; var sex = document.getElementById ("txtSex"). Value Var birthday = document.getElementById ("txtBirthday"). Value; var queryString = "Name=" + encodeURIComponent (name) + "& Sex=" + encodeURIComponent (sex) + "& Birthday=" + encodeURIComponent (birthday); return queryString;} / / pass the parameter function doRequestUsingGET () {createXMLHttpRequest (); var queryString = "AjaxServer.ashx?"; queryString = queryString + createQueryString () + "& timeStamp=" + new Date (). GetTime (); xmlHttp.onreadystatechange = handleStateChange XmlHttp.open ("GET", queryString, true); xmlHttp.send (null);} / pass parameters function doRequestUsingPOST () {createXMLHttpRequest (); var url = "AjaxServer.ashx?timeStamp=" + new Date (). GetTime (); var queryString = createQueryString (); xmlHttp.open ("POST", url, true); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded;"); xmlHttp.send (queryString) } / / callback function function handleStateChange () {if (xmlHttp.readyState = = 4) {if (xmlHttp.status = = 200) {parseResults ();} / / process server response content function parseResults () {var responseDiv = document.getElementById ("serverResponse"); if (responseDiv.hasChildNodes ()) {responseDiv.removeChild (responseDiv.childNodes [0]);} var responseText = document.createTextNode (xmlHttp.responseText) ResponseDiv.appendChild (responseText);} enter your name, gender, birthday: first name: gender: birthday: server response content:

The functions of each JS function are described in detail below.

CreateXMLHttpRequest () is used to create a XMLHttpRequest object.

Because IE implements XMLHttpRequest as an ActiveX object, other browsers (FF/Safari/Opera) implement it as a native JavaScript object. Because of these differences, the relevant logic must be included in the JavaScript code.

CreateQueryString () is used to collate the parameters and format the parameters to be passed by the Ajax request.

If URL encoding is required for passing Chinese or non-ASCII characters, this example uses the encodeURIComponent () function of JS for parameter URL encoding.

DoRequestUsingGET () sends the request to the server in HTTP GET mode, passing parameters.

The open () method of the XMLHttpRequest object specifies the request to be made. The open () method takes three parameters: a string indicating the method being used (usually GET or POST); a string representing the target resource URL; and a Boolean value that simply requests whether it is asynchronous.

When a GET request is made, the passed parameter is written to the url parameter of the open method, and the parameter of the send method is null.

In some cases, some browsers cache the results of multiple XMLHttpRequest requests in the same URL. If the response to each request is different, this will lead to bad results, and appending the current timestamp to the end of the URL ensures the uniqueness of the URL, thus preventing the browser from caching the results.

The server-side code in this example uses asp.net (c #).

DoRequestUsingPOST () sends the request to the server in HTTP POST mode, passing parameters.

To make sure that the method specified in open () is POST, you need to set the Content-Type header information and simulate the HTTP POST method to send a form so that the server knows how to handle the uploaded content. The open method must be called before setting the header information.

Parameters must be passed using the send method. Parameters are submitted in the same format as url in the GET method.

The handleStateChange () Ajax callback function.

For the XMLHttpRequest object, the onreadystatechange property stores a pointer to the callback function. This callback function is called when the internal state of the XMLHttpRequest object changes.

ParseResults () processes the response result.

The above is all the content of the article "how to implement Ajax request". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.