06 ajax intro
Upcoming SlideShare
Loading in...5

06 ajax intro






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

06 ajax intro 06 ajax intro Presentation Transcript

  • INTRODUCTION TOAJAXMaking Ajax calls at the lowest possible level
  • Remember that the web is a thin-client technology
  • The history of server-sideprocessing is like a yo-yodieter. View slide
  • So we clearly need some way to tell theserver we want to send data to it and away to receive data from it. View slide
  • If only we could send a request while thepage remains loaded and displayed•  Precondition – a page is loaded1.  The page sends a request for some data2.  The page listens for a response while the user continues to work (multithreading)3.  The page receives a response4.  It runs a callback function which usually processes the data and injects it into the DOM•  Postcondition – the same page is loaded but has new data
  • So we use JavaScript to send an XMLrequest asynchronously and process theXML response We call this technology … JXAA! No, wait … Ajax
  • The key to all this is the XMLHttpRequestobject Methods Properties Eventsopen(httpMethod, url, async) readyState onreadystatechangesetRequestHeader(header, value) statussend(string) statusTextgetResponseHeader(header) responseTextabort() responseXML
  • The open() method prepares the Ajax callopen(httpMethod, url, async)!•  where •  httpMethod = GET or POST •  url = address were hitting •  async = true for asynchronous
  • setRequestHeader() can inject values intothe request•  Looks like a form post to the serversetRequestHeader(header, value)!
  • send() instructs the system to make theactual call•  send() usually has no argumentsxh.send();!•  You can pass in form/querystring data using send …xh.send(Artist=CeeLo);!
  • Are we ready? readyState knows!•  readyState holds a number between 0 and 4Value Meaning0 Request not initialized1 We are connected to the server2 The request was received3 The server is processing the request4 Request is finished and the response has been sent back
  • The status is like the http response state•  100 Informational only•  200 OK•  300 Moved•  400 Not found•  500 Server error
  • So, when status is 200and readyState is 4, we knowthat the request is ready
  • onreadystatechangeholds a function thatfires when thereadyState changes•  We can use this to determine when a response comes back from the server.•  Then we test it to see if readyState=4 and status=200
  • The return value is found in responseXMLor responseText•  responseText returns it as plain text •  If were reading JSON, this is the property were interested in•  responseXML must be parsed as XML
  • Lets put it alltogether in asample
  • First, lets create a page with all the hooks built in<html>!<head>! <script type=text/javascript src=SayHello.js>! </script>!</head>!<body>! <div id=HelloDiv>! <p>Hello there!</p>! </div>! <button onclick=GetGreeting()>Click me</button>!</body>!</html>!
  • Next, well create the server-side program<?php!if ($tryingToBeCool) {! echo Sup, dawg?;!} else {! echo Greetings, kind person.;!}!?>!
  • Then we write the call to the servicefunction GetGreeting() {! xh = new XMLHttpRequest();! xh.open(GET,GetGreeting.php, true);! xh.onreadystatechange=ChangeGreeting;! xh.send();!} !
  • And we write the callback functionfunction ChangeGreeting() {! if (xh.readyState==4 && xh.status==200) {! var theDiv = getElementById(HelloDiv);! theDiv.InnerText = xh.responseText;! }!}!
  • Piece of cake,right?
  • $(#theButton).click(function() {! $(#theDiv).load(GetGreeting.php);!});! Really?!? Thats all it takes with jQuery?Now do you see whyjQuery rules?
  • Conclusion•  Ajax allows more efficient and pleasing pages•  It requires several steps•  Instantiate an XmlHttpRequest() object•  Set the location with open()•  Define a callback function with onreadystatechange•  send() the request•  Process the response in your callback•  jQuery simplifies this greatly
  • Lab•  In your labs, youll see the Products page which has a list of products.•  When the user hovers over the description, the user should be presented with the category of the product and its supplier•  Your job is to add the hover event and create a div that will call the Ajax function at /Product/GetProductInfo/ <productId>•  When the JSON is returned, parse it and create a DIV to present this information