Ajax Tutorial
- What is Ajax
- How Ajax Work
- ajax() and load() Function
- AJAX get() and post() Methods
- AJAX Function
- Ajax Success
- Ajax Button Click
- Ajax div load on button click
- Insert Data
- Delete Data
- User Registration
- ContactUs Form
- Check existing Password in Ajax and change the Password
- Ajax Search
- Ajax Serialize Insert
- Ajax without Searialize Insert
- Ajax User Check Availability
- Ajax OptionBox
- Ajax Dropdown Session
- dynamic text box Add/Remove
- Star Rating
- Pin Check Available
- Ajax Programs
- Clear Form Field after submitting form
- Loader load show / hide
- Multiple Functions
Customer Say
Ajax Function
The jQuery's $.ajax() function is used to perform an asynchronous HTTP request.
$.ajax(url[, options])
$.ajax([options])
The url parameter is a string containing the URL you want to reach with the Ajax call.
while options is an object literal containing the configuration for the Ajax request.
this function performs an Ajax request using the url parameter and the options specified in options. In the second form, the URL is specified in the options parameter, or can be omitted in which case the request is made to the current page.
The option Parameter
There are a lot of different options you can specify to bend $.ajax() to your need
| Parameter | description |
|---|---|
| accepts : | The content type sent in the request header that tells the server what kind of response it will accept in return |
| url : | A string containing the URL to which the request is sent |
| data : | The data to send to the server when performing the Ajax request |
| type : | The type of request to make, which can be either "POST" or "GET" |
| dataType : | The type of data expected back from the server |
| success : | A function to be called if the request succeeds |
| timeout | A number that specifies a timeout (in milliseconds) for the request |
| mimeType : | A string that specifies the mime type to override the XHR mime type |
| isLocal | Set this option to true if you want to force jQuery to recognize the current. |
| headers : | An object of additional headers to send to the server |
| error : | A function to be called if the request fails |
| context : | An object to use as the context (this) of all Ajax-related callbacks |
| contents : | An object that determines how the library will parse the response |
| contentType : | The content type of the data sent to the server |
| cache : | Set this options to false to force requested pages not to be cached by the browser |
| beforeSend : | A pre-request callback function that can be used to modify the jqXHR object before it is sent |
| async : | Set this options to false to perform a synchronous request |
| statusCode : | An object of numeric HTTP codes and functions to be called when the response. |
| traditional : | Set this to true if you wish to use the traditional style of param serialization |
jQuery.getScript() Method
The jQuery.getScript( url, [callback] ) method loads and executes a JavaScript file using an HTTP GET request.
The method returns XMLHttpRequest object.
Syntax
Here is the simple syntax to use this method −
$.getScript( url, [callback] )
Parameters
Here is the description of all the parameters used by this method −
url − A string containing the URL to which the request is sent
callback: − This optional parameter represents a function to be executed whenever the data is loaded successfully.
File name : index.php
<html> <head> <title>The jQuery Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript"> $(document).ready(function() { $("#driver").click(function(event){
$.getScript('result.js', function(jd) {
// Call custom function defined in script
CheckJS(); }); }); }); </script>
</head> <body> <p>Click on the button to load result.js file −</p> <div id="stage" style="background-color:cc0;"> STAGE </div>
<input type="button" id="driver" value="Load Data" /> </body>
</html>
File name : result.js
function CheckJS(){
alert("This is JavaScript");
}
Ajax function :-
The ajax() method in jQuery is used to perform an AJAX request or asynchronous HTTP request.
File Name :
$.ajax({name:value, name:value, ... })
File Name :
Parameters: The list of possible values are given below:
type: It is used to specify the type of request.
url: It is used to specify the URL to send the request to.
username: It is used to specify a username to be used in an HTTP access authentication request.
xhr: It is used for creating the XMLHttpRequest object.
async: It’s default value is true. It indicates whether the request should be handled asynchronous or not.
beforeSend(xhr): It is a function which is to be run before the request is being sent.
dataType: The data type expected of the server response.
error(xhr, status, error): It is used to run if the request fails.
global: It’s default value is true. It is used to specify whether or not to trigger global AJAX event handles for the request.
ifModified: It’s default value is false. It is used to specify whether a request is only successful if the response has changed since the last request.
jsonp: A string overriding the callback function in a jsonp request.
jsonpCallback: It is used to specify a name for the callback function in a jsonp request.
cache: It’s default value is true. It indicates whether the browser should cache the requested pages.
complete(xhr, status): It is a function which is to be run when the request is being finished.
contentType: It’s default value is: “application/x-www-form-urlencoded” and it is used when data send to the server.
context: It is used to specify the “this” value for all AJAX related callback functions.
data: It is used to specify data to be sent to the server.
dataFilter(data, type): It is used to handle the raw response data of the XMLHttpRequest.
password: It is used to specify a password to be used in an HTTP access authentication request.
processData: It’s default value is true. It is used to specify whether or not data sent with the request should be transformed into a query string.
scriptCharset: It is used to specify the charset for the request.
success(result, status, xhr): It is to be run when the request succeeds.
timeout: It is the local timeout for the request. It measured in terms of milliseconds.
traditional: It is used to specify whether or not to use the traditional style of param serialization.
File Name :
File Name :
File Name :
File Name :
File Name :
File Name :
File Name :