- jQuery Tutorial
- jQuery Home
- jQuery Intro
- What is jQuery
- jQuery History
- jQuery Example
- jQuery Selectors
- jQuery Get Started
- jQuery Syntax
- jQuery Selectors Manipulate
- jQuery Events
- jQuery Effects
- jQuery Effects
- jQuery Hide/Show
- jQuery Fade
- jQuery Slide
- jQuery Animate
- jQuery stop()
- jQuery Callback
- jQuery Chaining
- jQuery hide()
- jQuery show()
- jQuery toggle()
- jQuery fadeIn()
- jQuery fadeOut()
- jQuery fadeToggle()
- jQuery fadeTo()
- jQuery slideDown()
- jQuery slideUp()
- jQuery slideToggle()
- jQuery animate() Custom
- jQuery delay()
- jQuery HTML
- jQuery html()
- jQuery Get
- jQuery Set
- jQuery Add
- jQuery Remove
- jQuery CSS Classes
- jQuery css()
- jQuery Dimensions
- jQuery text()
- jQuery val()
- jQuery css() Custom
- jQuery before()
- jQuery prepend()
- jQuery after()
- jQuery insertAfter()
- jQuery append()
- jQuery appendTo()
- jQuery clone()
- jQuery remove()
- jQuery empty()
- jQuery detach()
- jQuery scrollTop()
- jQuery attr()
- jQuery prop()
- jQuery offset()
- jQuery position()
- jQuery addClass()
- jQuery hasClass()
- jQuery toggleClass()
- jQuery width()
- jQuery height()
- jQuery innerWidth()
- jQuery innerHeight()
- jQuery outerWidth()
- jQuery outerHeight()
- jQuery wrap()
- jQuery wrapInner()
- jQuery wrapAll()
- jQuery unwrap()
- jQuery Traversing
- jQuery Traversing
- jQuery Ancestors
- jQuery Descendants
- jQuery Siblings
- jQuery Filtering
- jQuery AJAX
- jQuery AJAX Intro
- jQuery Load
- jQuery Get/Post
- jQuery Misc
- jQuery closest() method
- jQuery noConflict()
- jQuery Filters
- jQuery ajax() method
- jQuery children() method
- jQuery data() method
- jQuery each() method
- jQuery eq() method
- jQuery extend() method
- jQuery filter() method
- jQuery find() method
- jQuery get() method
- jQuery grep() method
- jQuery length property
- jQuery is() method
- jQuery not() method
- jQuery param() method
- jQuery radio button
- jQuery read more/read less
- jQuery star rating
- :enabled selector
- :disabled selector
- noConflict() method
- :nth-child selector
- parent() method
- post() method
- ready() function
- removeAttr() method
- replaceWith() method
- resize() method
- siblings() method
- stop() method
- trigger() method
- trim() method
- jQuery getJSON() method
- jQuery replaceAll() method
- jQuery on() method
- jQuery off() method
- jQuery first() method
- jQuery last() method
- jQuery isNumeric() method
- jQuery :reset selector
- jQuery size() method
- jQuery contains() method
- jQuery ajaxSend() method
- jQuery ajaxError() method
- jQuery :lang() selector
- jQuery :lt() selector
- jQuery :gt() selector
- jQuery map() function
- jQuery next() method
- jQuery nextUntil() method
- jQuery error() method
- jQuery now() method
- jQuery parseJSON() method
- jQuery inArray() method
- jQuery dblclick() method
- jQuery $.proxy() method
- jQuery has() method
- jQuery index() method
- jQuery insertBefore() method
- jQuery merge() method
- jQuery nth-of-type() selector
- jQuery prev() method
- jQuery prevAll() method
- jQuery scroll() method
- jQuery scrollLeft() method
- jQuery slice() method
- jQuery contents() method
- jQuery nextAll() method
- jQuery offsetParent() method
- jQuery parents() method
- jQuery parentsUntil() method
- globalEval() method
- undelegate() method
- triggerHandler() method
- toArray() method
- removeProp() method
- removeData() method
- queue() method
- prependTo() method
- noop() method
- makeArray() method
- keypress() method
- isPlainObject() method
- isFunction() method
- isEmptyObject() method
- isArray() method
- focusout() method
- focusin() method
- event.preventDefault() method
- clearQueue() method
- andSelf() method
- andBack() method
- jQuery dequeue() method
- jQuery end() method
- jQuery even() method
- jQuery :file selector
- jQuery :hidden selector
- jQuery isWindow() method
- jQuery odd() method
- jQuery parseXML() method
- jQuery :password selector
- jQuery.unique() method
- jQuery.uniqueSort() method
- jQuery :visible selector
- jQuery.isXMLDoc() method
- jQuery add() method
- jQuery Examples
- jQuery Examples
- jQuery Editor
- jQuery Quiz
- jQuery Exercises
- jQuery Certificate
- jQuery Form
- jQuery serialize()
- jQuery serializeArray()
- jQuery References
- jQuery Overview
- jQuery Selectors
- jQuery Events
- jQuery Events
- jQuery click()
- jQuery bind()
- jQuery unbind() method
- jQuery blur()
- jQuery focus()
- jQuery select()
- jQuery change()
- jQuery submit()
- jQuery keydown()
- jQuery keypress()
- jQuery keyup()
- jQuery mouseenter()
- jQuery mouseleave()
- jQuery hover()
- jQuery mousedown()
- jQuery mouseup()
- jQuery mouseover()
- jQuery mouseout()
- jQuery load()
- jQuery unload()
- jQuery delegate()
- jQuery Effects
- jQuery HTML/CSS
- jQuery Traversing
- jQuery AJAX
- jQuery Misc
- jQuery Properties
- Selected Reading
- How to change the background image using jQuery
- How to Detect a Mobile Device
- offset vs position in jQuery
- Checkbox validation in jQuery
- Use of moment JS to change date format in jquery
- jQuery Redirect to Another Page After 5 Seconds
- JQuery Validation
- jQuery get Difference between two Dates in days
- Dynamic Drag and Drop table rows using JQuery Ajax
- Add Edit Delete Table Row in JQuery
- Add remove input fields dynamically using jQuery with Bootstrap
- JQuery photo gallery with thumbnail
- Dynamically Add Remove input fields using JQuery Ajax
- Barcode jQuery example
- jQuery Timepicker
- Read more functionality using jQuery
- jQuery CDN
- JQuery Pagination
- Get Selected Value in Drop-down in jQuery
- JQuery Input Mask Phone Number Validation
- Integrate jQuery Fullcalendar using Bootstrap, PHP and MySQL
- Allow only 10 numbers in textbox using Jquery
- JQuery left side menu
- Automatically Refresh or Reload a Page using jQuery
- Lazy load images using jQuery
- Create a Tic TAC Toe Game using jQuery
- How to Convert an HTML Table into Excel Spreadsheet using jQuery
- Import Excel data into HTML table using JQuery
- Create a To-Do list using JQuery
- JQuery Page Pilling
- QR Code Generator using HTML, CSS, and jQuery
- Phone Number Keyboard using HTML and jQuery
- JQuery UI Checkboxradio
- How to Create a Custom Image Magnifier using jQuery
- JQuery UI Control groups
- How to create a simple map using jQuery
- JQuery Blockrain/ Tetris game
- How to display a digital clock using HTML, CSS, and JavaScript
- JQuery Multiscroll.js
- JQuery Sort
- JQuery Calendar
- JQuery menu-aim plugin
- JQuery Typewriter
- JQuery Product Tour
- Upload image with progress bar using jQuery
- How to add options to a select element using jQuery
- How to remove close button from jQuery UI dialog using jQuery and css
- JQuery Crop Plugin
- Vertical Dot Navigation Plugin
- jQuery jTippy Tooltip Plugin
- Create a 3D Text Effect using HTML and CSS and jQuery
- Jquery Flickerplate Plugin
- jQuery bootstrapSelect Plugin
- Froala editor plugin
- Gauge chart plugin using jQuery
- Horizontal Scrollable Timeline Plugin - jTimeline
- Skype Chat jQuery Plugin
- Whatsapp Chat Widget
- Twenty Twenty jQuery Plugin to Compare Images
- jQuery Filter Table
- Language Translation with JavaScript
- jQuery Animated Border Plugin
- jQuery Palette Color Picker
- jQuery Excel Export Plugin Library
- jquery social counter plugin
- jQuery Page Flip
- How to create an online radio using jQuery and jPlayer
- jQuery File manager for web
- Automatically Format your Numbers and Currencies using jquery
- jquery cookie consent plugin
- jQuery Coverflow widget
- jQuery PayPal HTML Shop
- Full Screen video Background using jquery
- jQuery Push Notification Plugin
- Create a menu item animation on hover
- Jquery Countdown Timer
- Jquery dragStart Event
- Jquery dragStop event
- Picture Puzzle Game using Jquery
- Jquery Captcha Widget
- Jquery Search Slide out Plugin
- How to Get the Textbox Value in jQuery
- Planetarium Jquery Plugin
- jQuery on-place Confirm Boxes
- Carousel with Drag and Wheel using Jquery
- Before and After Slider using jQuery
- Round Slider jQuery Plugin
- Jquery sticky header
- jQuery Age Verification plugin
- Pietimer jQuery Plugin
- DoubleScroll using Jquery
- Day Night Toggle using Jquery
- Q&A
jQuery ajax() method:
AJAX is an acronym for Asynchronous JavaScript and XML. It is a group of inter-related technologies like JavaScript, DOM, XML, HTML/XHTML, CSS, XMLHttpRequest etc. It allows us to send and receive data asynchronously without reloading the web page. So it is fast.
The ajax() method in jQuery performs an AJAX request. It sends an asynchronous HTTP request to the server. JQuery provides a rich set of AJAX methods for developing web applications. It is widely used for the requests.
The syntax of using the ajax() method is given as follows.
Syntax
Parameter values
This method can have several name/value pairs for the AJAX requests. The names and values are defined in the following table.
Name | Value |
---|---|
async | It is a Boolean value. Its default value is true, which means that by default, the request is handled asynchronously. For synchronous requests, we can set it to false. |
beforeSend(xhr) | It is a callback function that executes before a request is sent. |
cache | It is a Boolean value. Its default value is true. It represents whether the browser cache the requested pages. On setting it to false, it forces the pages not to be cached by the browser. |
complete(xhr, status) | It is a callback function executed when the request is finished. It has two arguments that are xhr (XMLHttpRequest) and a status. The status can be "success", "notmodified", "nocontent", "error", etc.It is a callback function executed when the request is finished. It has two arguments that are xhr (XMLHttpRequest) and a status. The status can be "success", "notmodified", "nocontent", "error", etc. |
contentType | It is used when sending the data to the server. Its default value is "application/x-www-form-urlencoded". |
data | It is data sent to the server. It could be a string, an array, or a JSON object. |
dataFilter(data, type) | It is a function that handles the raw response data of the XMLHttpRequest. It accepts two parameters. |
dataType | It is the type of data we are expecting from the server. |
error(xhr, status, error) | It is a callback function that gets executed when a request fails. It accepts three arguments. |
global | It is a Boolean value. Its default value is true. It represents whether to trigger a global AJAX event handler or not. |
ifModified | It is a Boolean value. Its default value is false. It specifies a request to be successful if the response has changed since the last header. |
jsonp | It is a string that overrides the callback function name in a jsonp request. |
jsonpCallback | It is a string that contains the name of the callback function for a jsonp request. |
password | It is used to specify a password that is to be used in an HTTP access authentication request. |
processData | It is a Boolean value. Its default value is true. It is used to specify whether or not the data sent with the request should be converted into a query string. |
scriptCharset | It specifies the charset for the request. It applies only when the "script" transport is used. |
success(result, status, xhr) | As its name implies, this callback function executes when the request succeeds. It accepts three arguments. |
timeout | It is the timeout for the request in terms of milliseconds. If it is set to the value 0, it means that there is no timeout. |
traditional | It is a Boolean value. We can set it to true if we want to use the traditional style of param serialization. |
type | It specifies the type of http request, such as POST, PUT, and GET. Its default value is GET. |
url | It is the URL to which the request is sent. Its default value is the current page. |
username | It is a username that is to be used in an HTTP access authentication request. |
xhr | It is a callback function that is used for creating the XMLHttpRequest object. |
Let's understand the use of ajax() method by using some illustrations.
Example1
There are some steps given below. Follow these steps to understand the use of ajax() method more clearly.
- First, we have to either download a jQuery library or find a link of jQuery's latest version by going to its official website.
- Second, we need to create an HTML document, including the jQuery library.
- Then, within the <script> tag write jQuery's ready() function, and write the ajax() method in its body. Now, we can pass the parameters to the ajax() function. We must have to include the URL to send the request as the first property. After URL, we can set any optional properties such as type, async, cache, success, error, complete, etc. to the ajax() function.
Now, let's see the code of using the ajax() method. In this example, we are including the URL parameter and the optional type parameter. In this example, the ajax() method is used to add the content using ajax request.
Here, we are passing the test.html to the URL parameter of the ajax() method.
test.html
Example2.html
Test it NowOutput
After the execution of the above code, the output will be -
![jQuery ajax() method](https://static.javatpoint.com/jquerypages/images/jquery-ajax-method.png)
On clicking the given button, the output will be -
![jQuery ajax() method](https://static.javatpoint.com/jquerypages/images/jquery-ajax-method2.png)
Example2
It is another example of using the ajax() method. Here, we are using the optional async attribute and set it to false for an asynchronous request.
test.html
Example2.html
Test it NowOutput
After the execution of the above code, the output will be -
![jQuery ajax() method](https://static.javatpoint.com/jquerypages/images/jquery-ajax-method3.png)
On clicking the given button, the output will be -
![jQuery ajax() method](https://static.javatpoint.com/jquerypages/images/jquery-ajax-method4.png)
Example3
This is another example of using the ajax() method. Here, we are passing a .js file to the URL parameter of the ajax() method. We are also using the optional dataType parameter and set it to script value.
test.js
Example2.html
Output
Test it NowAfter the execution of the above code, the output will be -
![jQuery ajax() method](https://static.javatpoint.com/jquerypages/images/jquery-ajax-method5.png)
On clicking the given button, the output will be -
![jQuery ajax() method](https://static.javatpoint.com/jquerypages/images/jquery-ajax-method6.png)
The above examples will help you to understand the concept of ajax() method.