AJAX

1
AJAX in PHPby Ms.V. SANTHIDept. of Computer
Applications,Bon Secours College for
Women,Thanjavur.
2
What is PHP?

• PHP is an open-source server-side scripting
  language. 
• It is used for a wide range of different tasks,
  including generating dynamic page content.
• PHP scripts are executed on the web server.
• PHP files contain HTML, CSS, JavaScript, and PHP
  code. 
• Once PHP code is executed on the server, it
  returns to the web browser as HTML code.
• PHP is very popular with web developers because
  it runs on almost all servers and most operating
  systems.

3

• PHP is used for
• Creating and editing files on the server 
• Collecting data from web forms 
• Sending and receiving cookies 
• Adding, deleting, and modifying data in your
  database 
• Encrypting data 
• Controlling user-access 
• Furthermore, PHP code outputting HTML, XML, Flash
  movies, PDFs, images, and XHTML. 

4
What is AJAX?

• AJAX Asynchronous JavaScript and XML.
• AJAX is not a new programming language, but a
  newway to use existing standards.
• AJAX is a technique for creating fast and
  dynamicweb pages.
• AJAX is a new technique for creating better,
  faster, and more interactive web applications
  with the help of XML, HTML, CSS and Java Script.

5

• AJAX allows web pages to be updatedasynchronously
  by exchanging small amounts ofdata with the
  server behind the scenes. Thismeans that it is
  possible to update parts of aweb page, without
  reloading the whole page.
• Classic web pages, (which do not use AJAX)
  mustreload the entire page if the content
  shouldchange.

6
Examples of applications using AJAX

• Google Maps,
• Gmail,
• Youtube,
• and Facebook tabs.

7
Google Suggest

• AJAX was made popular in 2005 by Google, with
  Google Suggest.
• Google Suggest is using AJAX to create a very
  dynamic web interface When you start typing in
  Google's search box, a JavaScript sends the
  letters off to a server and the server returns a
  list of suggestions.
• AJAX is browser and platform-independent.
• However, as previously mentioned, AJAX is used on
  the client-side and will still require
  server-side communication. This is where PHP
  enters the conversation. 

8
How AJAX Works?
9
AJAX Working Procedure

• 1. An event occurs in a web page (the page is
  loaded, a button is clicked)
• 2. An XMLHttpRequest object is created by
  JavaScript
• 3. The XMLHttpRequest object sends a request to a
  web server
• 4. The server processes the request
• 5. The server sends a response back to the web
  page
• 6. The response is read by JavaScript
• 7. Proper action (like page update) is performed
  by JavaScript

10
AJAX is Based on Internet Standards

• AJAX is based on internet standards, and uses a
  combination of
• XMLHttpRequest object (to exchange data
  asynchronously with a server/to request data from
  a web server)
• JavaScript/DOM (to display/interact with the
  information)
• CSS (to style the data)
• XML (often used as the format for transferring
  data)

11
AJAX - The XMLHttpRequest Object

• To exchange data with a server behind the
  scenes. 
• Create an XMLHttpRequest Object
• All modern browsers (Chrome, Firefox, Edge (and
  IE7), Safari, Opera) have a built-in
  XMLHttpRequest object.
• Syntax for creating an XMLHttpRequest object
• variable  new XMLHttpRequest()
• Example
• var xhttp  new XMLHttpRequest()

12
XMLHttpRequest Object Methods
Method Description
new XMLHttpRequest() Creates a new XMLHttpRequest object
abort() Cancels the current request
getAllResponseHeaders() Returns header information
getResponseHeader() Returns specific header information
open(method,url,async,user,psw) Specifies the request
send() Sends the request to the serverUsed for GET requests
send(string) Sends the request to the server.Used for POST requests
setRequestHeader() Adds a label/value pair to the header to be sent
13
AJAX - Send a Request To a Server

• The XMLHttpRequest object is used to exchange
  data with a server.
• Send a Request To a Server
• To send a request to a server, the open() and
  send() methods of the XMLHttpRequest object is
  used
• xhttp.open("GET", "ajax_info.txt", true) xhttp
  .send()

14
Methods to Send a Request To a Server
Method Description
open(method, url, async) Specifies the type of requestmethod the type of request GET or POSTurl the server (file) locationasync true (asynchronous) or false (synchronous)
send() Sends the request to the server (used for GET)
send(string) Sends the request to the server (used for POST)
15
GET Request

• GET is basically used for just getting
  (retrieving) some data from the server.
• Example
• xhttp.open("GET", "demo_get.php", true)xhttp.se
  nd()
• Note The GET method may return cached data.

16
POST Request

• 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.
• Example
• xhttp.open("POST", "demo_post.php", true)xhttp.
  send()
• To POST data like an HTML form, add an HTTP
  header with setRequestHeader(). 

17
How AJAX and PHP Works Together 

• Example - Google Search bar
• When you begin typing into an auto-complete bar,
  AJAX techniques send this information to the web
  server.
• This information is then collected and processed
  on the server-side by PHP code.
• Once the appropriate data has been collected,
  edited, etc., it is sent back to the client-side
  as XML data.
• Finally, after the information returns from the
  server, it is dynamically displayed to the user
  by AJAX standards. 

18
General Break

• Conventional web applications transmit
  information to and from the server using
  synchronous requests.
• It means you fill out a form, hit submit, and get
  directed to a new page with new information from
  the server.
• With AJAX, when submit is pressed, JavaScript
  will make a request to the server, interpret the
  results and update the current screen.
• In the purest sense, the user would never know
  that anything was even transmitted to the server.

19
AJAX PHP Example

• The following example will demonstrate how a web
  page can communicate with a web server while a
  user type characters in an input field
• https//www.w3schools.com/php/php_ajax_php.asp
• Start typing a name in the input field below
• First name 
• Suggestions

20

• lthtmlgtltheadgtltscriptgtfunction showHint(str)
    if (str.length  0)     document.getElement
  ById("txtHint").innerHTML  ""    return   el
  se     var xmlhttp  new XMLHttpRequest()   
  xmlhttp.onreadystatechange  function()    
    if (this.readyState  4  this.status  200)
          document.getElementById("txtHint").inner
  HTML  this.responseText             
  xmlhttp.open("GET", "gethint.php?q" 
  str, true)    xmlhttp.send()  lt/scriptgtlt/
  headgtltbodygt

21

• ltpgtltbgtStart typing a name in the input field
  belowlt/bgtlt/pgtltform action""gt  ltlabel for"fnam
  e"gtFirst namelt/labelgt  ltinput type"text" id"fn
  ame" name"fname" onkeyup"showHint(this.value)"gt
  lt/formgtltpgtSuggestions ltspan id"txtHint"gtlt/spangt
  lt/pgtlt/bodygtlt/htmlgt

22
Code explanation

• First, check if the input field is empty
  (str.length 0). If it is, clear the content of
  the txtHint placeholder and exit the function.
• However, if the input field is not empty, do the
  following
• Create an XMLHttpRequest object
• Create the function to be executed when the
  server response is ready
• Send the request off to a PHP file (gethint.php)
  on the server
• Notice that q parameter is added to the url
  (gethint.php?q"str)
• And the str variable holds the content of the
  input field

23
The PHP File - "gethint.php"

• The PHP file checks an array of names, and
  returns the corresponding name(s) to the browser
• lt?php// Array with namesa  "Anna"a
   "Brittany"a  "Cinderella"a
   "Diana"a  "Eva"a  "Fiona"a
   "Gunda"a  "Hege"a  "Inga"a
   "Johanna"a  "Kitty"a  "Linda"a
   "Nina"a  "Ophelia"a
   "Petunia"a  "Amanda"a
   "Raquel"a  "Cindy"a  "Doris"

24

• a  "Eve"a  "Evita"a
   "Sunniva"a  "Tove"a  "Unni"a
   "Violet"a  "Liza"a
   "Elizabeth"a  "Ellen"a
   "Wenche"a  "Vicky"// get the q
  parameter from URLq  _REQUEST"q"hint
   ""
• // lookup all hints from array if q is different
  from ""if (q ! "")   q
  strtolower(q)  lenstrlen(q)  foreach(a as
   name)

25

•  if (stristr(q, substr(name, 0, len)))
        if (hint  "")         hint
  name       else         hint . ",
  name"            // Output "no
  suggestion" if no hint was found or output
  correct valuesecho hint  "" ? "no
  suggestion"  hint?gt
• Start typing a name in the input field below
• First name 
• Suggestions Anna, Amanda

a
26

• Reference
• https//www.w3schools.com/php/php_ajax_database.a
  sp

27
Thank You