Web Development

jQuery AJAX
What is AJAX?

AJAX stands for Asynchronous Javascript. It was first mentioned by Jesse James Garret in 2005.

It is not a new technology but it is several technologies:

• Standard based presentation: XHTML and CSS

• Dynamic display and interaction: DOM
• Data interchange and manipulation: XML and XSLT
• Asynchonous data retrieval: XML HttpRequest
• Binding eveything together: Javascript

AJAX engine is an XMLHttpRequest object and jQuery makes it a lot more easier for us because

of its AJAX development API. It allows asynchonous communication so instead of freezing up until the

completeness, the browser can communicate with server and continue as normal.

When we use AJAX, there is no noticeable difference because AJAX request does no appear in

the address bar. We can pass and retrive data without refreshing the page or go to a specific URL.

In this chapter, we’re going to learn how to make AJAX request in CodeIgniter

Let’s create a controller named Ajax_tutorial at application/controllers/Ajax_tutorial.php

Module 14 – JQuery Ajax 1

Web Development

In this controller we have the index method and the content method, both having different
views.

Create the ajax_tutorial view for the index method at application/views/ajax_tutorial.php

The view contains the button btnloadcontent and a div container content-container. When the

button is clicked, it will load the content from another page (content method of Ajax_tutorial controller)

and display it on the div element.

Output:

Also, the ajax_content view at application/views/ajax_content.php

Output:

Module 14 – JQuery Ajax 2

Web Development

To load the content on the content-container asynchronously on the index method, we’re gonna

use jQuery AJAX. Include the jQuery library and the AJAX request script. Add the following code above

the </body> tag:

Output:

Before button click:

After button click:

Module 14 – JQuery Ajax 3

Web Development

Module 14 – JQuery Ajax 4

Web Development

The jQuery AJAX code

Let’s take a look of jQuery AJAX request code:

type (optional)
-this can be post or get method
POST vs GET call in AJAX
-GET puts the parameters in the query string, but POST does not

-GET variables in AJAX requests has still the size limitation on the amount of the data that can be
passed.

Rule of the thumb:

GET method is used to retrieved data to display in the page and the data is not expected
to be manipulated with the server while POST method is used to store and/or
manipulate the information on the server

url
-the url to be AJAX requested. it can be a static string or a dynamic string returned by
CodeIgniter’s base_url() method

dataType (optional)
-the most used are html and json. It defines what is the data type of the data retrieved

data (optional)
-this contains the parameters or the data that will be passed
In the above figure, we have used serialize() function that will get all inputs on the form
selected.
We can also use the example below just like get method URLs or query string format:
“txtfname=” + var_fname + “&txtlname=” + var_lname

Module 14 – JQuery Ajax 5

Web Development

beforeSend (optional)
-this will be triggered before performing the AJAX communication/request

success
-this will be triggered upon the AJAX request and usually accepts the parameter response
response contains the loaded content from the URL requested.
It can be a string or an object (json object)

error
-this will be triggered if the AJAX request did not meet the URL requested or had no response

Module 14 – JQuery Ajax 6