We will learn how to send and receive data from the server through Ajax via HTTP GET or POST methods using jQuery.
there are Two methods commonly used for a request-response between a client and server are: GET and POST.
GET is basically used for just getting (retrieving) some data from the server. Note: The GET method may return cached data.
POST can also be used to get some data from the server. However, the POST method NEVER caches data, and is often used to send data along with the request.
Both the methods are pretty much identical, apart from one major difference — the $.get() makes Ajax requests using the HTTP GET method, whereas the $.post() makes Ajax requests using the HTTP POST method.
$.get(URL, data, success);
—Or—
$.post(URL, data, success);
The parameters in the above syntax have the following meaning:
Let's see some overview on HTTP Methods
The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers. HTTP works as a request-response protocol between a client and server.
Note: A client (browser) sends an HTTP request to the server; then the server returns a response to the client. The response contains status information about the request and may also contain the requested content.
The two most common HTTP methods are: GET and POST.
GET is used to request data from a specified resource. the query string (name/value pairs) is sent in the URL of a GET request
Some notes on GET requests:
POST is used to send data to a server to create/update a resource. The data sent to the server with POST is stored in the request body of the HTTP request.
Some notes on POST requests
The following table compares the two HTTP methods: GET and POST.
| GET | POST | |
|---|---|---|
| BACK button/Reload | Harmless | Data will be re-submitted (the browser should alert the user that the data are about to be re-submitted) |
| Bookmarked | Can be bookmarked | Cannot be bookmarked |
| Cached | Can be cached | Not cached |
| Encoding type | application/x-www-form-urlencoded | application/x-www-form-urlencoded or multipart/form-data. Use multipart encoding for binary data |
| History | Parameters remain in browser history | Parameters are not saved in browser history |
| Restrictions on data length | Yes, when sending data, the GET method adds the data to the URL; and the length of a URL is limited (maximum URL length is 2048 characters) | No restrictions |
| Restrictions on data type | Only ASCII characters allowed | No restrictions. Binary data is also allowed |
| Security | GET is less secure compared to POST because data sent is part of the URL Never use GET when sending passwords or other sensitive information! |
POST is a little safer than GET because the parameters are not stored in browser history or in web server logs |
| Visibility | Data is visible to everyone in the URL | Data is not displayed in the URL |
The $.get() method requests data from the server with an HTTP GET request.
$.get(URL,callback);
the jQuery $.get() method to make an Ajax request to the "demo_test.asp" file using HTTP GET method. It simply retrieves and returned from the server and displays it in the browser without refreshing the page.
The first parameter of $.get() is the URL we wish to request ("demo_test.asp").
The second parameter is a callback function. The first callback parameter holds the content of the page requested, and the second callback parameter holds the status of the request.
Here is how the ASP file looks like ("demo_test.asp"):
<%
response.write("This is some text from an external ASP file.")
%>
The $.post() method requests data from the server using an HTTP POST request.
$.post(URL,data,callback);
The required URL parameter specifies the URL you wish to request.
The optional data parameter specifies some data to send along with the request.
The optional callback parameter is the name of a function to be executed if the request succeeds.
The example to uses the $.post() method to send some data along with the request:
The first parameter of $.post() is the URL we wish to request ("demo_test_post.asp").
Then we pass in some data to send along with the request (name and city).
The ASP script in "demo_test_post.asp" reads the parameters, processes them, and returns a result.
The third parameter is a callback function. The first callback parameter holds the content of the page requested, and the second callback parameter holds the status of the request.
Here is how the ASP file looks like ("demo_test_post.asp"):
<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & " . ")
Response.Write("Hope you live well in " & city & " . ")
%>
We will learn about jquery no conflict method in next chapter. Click
