Ajax - SPLessons

AJAX Request To Server

Home > Lesson > Chapter 4
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

AJAX Request To Server

AJAX Request To Server

shape Description

To trade the information with server developer require XMLHttpRequest question. The XMLHttpRequest is an API whose techniques exchange information between a web program and a web server. The object is given by the program’s JavaScript surroundings. Especially, recovery of information from XHR with the end goal of consistently adjusting a stacked site page is the basic idea of Ajax outline. Regardless of the name, XHR can be utilized with conventions other than HTTP and information can be as not just XML,but likewise JSON, HTML or plain content. To send any request to the server send() and open() techniques for the XMLHttpRequest protest are utilized. The following is the way of syntax.
xmlhttp.open("GET", "msg.txt", true); xmlhttp.send();

Get Request

shape Description

HTTP works as a request–response convention in the client–server figuring model. A web program, for instance, might be the customer and an application running on a PC facilitating a site might be the server. The customer presents a HTTP ask for message to the server. The following is an example by using GET. [html] <!DOCTYPE html> <html> <body bgcolor="skyblue"> <h1>The XMLHttpRequest Object</h1> <button type="button" onclick="loadDoc()">Request data</button> <p id="splesson5"></p> <script> function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "demo_get.asp", true); xhttp.send(); } </script> </body> </html> [/html] The server, which gives assets, for example, HTML records and other substance, or performs different capacities in the interest of the customer, gives back a reaction message to the customer. The reaction contains fruition status data about the demand and may likewise contain asked for substance in its message body. The getElementById() strategy gives back the component that has the ID quality with the predetermined esteem. This strategy is a standout amongst the most widely recognized strategies in the HTML DOM, and is utilized practically every time user need to control, or get information from, a component on the archive. The readystate essentially implies that the demand has got done with preparing. 200 is the http status for OK. Output:Now compile the code result will be as follows.

Post Request

shape Description

The POST is a strategy bolstered by the HTTP convention utilized by the World Wide Web. By plan, the POST ask for technique asks for that a web server acknowledge and store the information encased in the body of the demand message. It is frequently utilized while transferring a document or while presenting a finished web frame. The following is an example. [html] <!DOCTYPE html> <html> <body bgcolor="skyblue"> <h1>The XMLHttpRequest Object</h1> <button type="button" onclick="loadDoc()">Request data</button> <p id="splesson6"></p> <script> function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("POST", "demo_post2.asp", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("fname=Welcome To&lname=SPlessons"); } </script> </body> </html>[/html] To POST information like a HTML frame, include a HTTP header with setRequestHeader(). Determine the information that need to send in the send() technique. Output:Now compile the code result will be as follows.

Summary

shape Key Points

  • The HTTP stands for Hyper Text Transmission Protocol.
  • The HTTP works as a interface between the client and server.
  • The GET method is not secured that carry data with the URL.