Scribd
Upload
93 views36 pages

Ajax

The document describes several Ajax patterns: 1. Multi Stage Download breaks content loading into multiple stages by priority to initially load a skeleton page and then load placeholders independently. 2. Periodic Refresh checks for new server information at regular intervals to update content like scores or notifications without reloading the page. 3. Predictive Fetch guesses what content the user will need next and prefetches it to reduce delays, like preloading the next pages of an online article. 4. Fallback Patterns provide alternatives if requests fail, like canceling pending requests and alerting the user if the server returns an error status.

Uploaded by

Sivaraman Eswaran
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
93 views36 pages

Ajax

The document describes several Ajax patterns: 1. Multi Stage Download breaks content loading into multiple stages by priority to initially load a skeleton page and then load placeholders independently. 2. Periodic Refresh checks for new server information at regular intervals to update content like scores or notifications without reloading the page. 3. Predictive Fetch guesses what content the user will need next and prefetches it to reduce delays, like preloading the next pages of an online article. 4. Fallback Patterns provide alternatives if requests fail, like canceling pending requests and alerting the user if the server returns an error status.

Uploaded by

Sivaraman Eswaran
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 36

Ajax Patterns

Patterns
 Multi Stage Download
 Periodic Refresh
 Predictive Fetch
 Fallback Patterns
 Submission Throttling
Multi Stage Download
http://netvibes.com

Introduction https://www.kayak.co.in/

 Content – Time-consuming to load (rich images).


 Users rarely need to read all the content.
 Users click several times – to locate a particular item.
 Users browse around by exploring links between
pages.
 Application – download a lot of content from the
server

 How can you optimize downloading performance?


Solution
 Break content download into multiple stages
 Prioritize content
 Initial download – very small (skeleton)
 Content for each placeholder (eg., div) downloaded
independently
 XMLHttpRequest Calls – issued simultaneously or in a
serial sequence
<body onload = "startIt()">
<header>
<img id = "logo" height = "75" width = "75" src = "loading.gif"/>
<h1 class = "h_1"> WELCOME TO LMS <h1>
</header>

<div id = "search">
<img id = "search" height = "100" width = "100" src =
"loading.gif"/>
</div>

<div>
<h2> Individual departments are here </h2>
<ul id = "links">
<img height = "200" width = "200" src = "loading.gif"/>
</ul>
</div>

<div id = "search_res">
</div>
<script type="text/javascript">

xhr_1 = new XMLHttpRequest();


xhr_2 = new XMLHttpRequest();
xhr_3 = new XMLHttpRequest();
function startIt() {
setTimeout(loadLogo, 2000);
setTimeout(loadSearchBox, 4000);
setTimeout(loadLinks, 6000);
}

function loadLogo()
{
document.getElementById("logo").src = "PES.bmp"
}

function loadSearchBox()
{
xhr_2.onreadystatechange = showSearchBox;
xhr_2.open("GET",
"http://localhost/get_search_box.php", true);
xhr_2.send();
}
function showSearchBox()
{
if (xhr_2.readyState == 4 && xhr_2.status == 200)
{
document.getElementById("search").innerHTML =
xhr_2.responseText;
}
}

function searchISBN() {
var isbn = document.getElementById("isbn");
xhr_3.onreadystatechange = showSearchResults;
xhr_3.open("GET",
"http://localhost/search.php?isbn=" + isbn.value,
true);
xhr_3.send();
}
function showSearchResults()
{
if (xhr_3.readyState == 4 && xhr_3.status == 200)
{
document.getElementById("search_res").innerHTML
= xhr_3.responseText;
}
}

function loadLinks()
{
xhr_1.onreadystatechange = showLinks;
xhr_1.open("GET", "http://localhost/links.txt", true);
xhr_1.send();
}
get_search_box.php
<?php

header("Content-type : text/html");
extract($_GET);
echo "<label>";
echo "ISBN Number : <input type = 'text' id =
'isbn'/><p/>" ;
echo "</label>";
echo "<input type = 'submit' value = 'SEARCH'
onclick = 'searchISBN()' />" ;
?>
search.php
<?php

extract($_GET);
$file = fopen("book_db.txt", "r");
$found = false;
while($line = fgets($file)) {
$line = trim($line);
$l_arr = explode(",", $line);
if ($isbn == $l_arr[0]) {
echo "<h2> Book Info. </h2>";
echo "<h3>";
Contd…
echo "ISBN : $l_arr[0] <br>";
echo "Author : $l_arr[1] <br>";
echo "Publication : $l_arr[2] <br>";
echo "Price : $l_arr[3] <br>";
echo "Title : $l_arr[4] <br>";
echo "</h3>";
$found = true;
break;
}}
if(!$found) {
echo "<h2> No matching book found in database !!
</h2>"; }
?>
function showLinks()
{
if (xhr_1.readyState == 4 && xhr_1.status == 200)
{
var link_placeholder =
document.getElementById("links");
link_placeholder.innerHTML = "";

var links = xhr_1.responseText;


var lines = links.split("\n");

for(var i = 0; i < lines.length; ++i)


{
var line = lines[i];
var link = line.split(",");
var a = document.createElement("a");

a.setAttribute("href", link[1]);
a.innerHTML = link[0];

var li = document.createElement("li");
li.appendChild(a);

link_placeholder.appendChild(li);
}}
}
Periodic Refresh
Introduction
 It is a design pattern
 Process of checking for new server
information in specific intervals
 Used to increase user experience
 Notify users of updated information
 also called polling
Contd…
 location.reload() and setTimeout() –
methods for refresh
Real World Examples
 ESPN : Update online scoreboards
automatically
 Gmail : Notify users of the new mail
 Live Chat
Auto Refresh - Example
<html lang="en">
<head>
<title> Auto refresh current page with JS</title>
<script>
setTimeout(function(){
location.reload();
},3000); // 3000 milliseconds means 3 seconds.
</script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
<script>
$(document).ready(
function() {
setInterval(function() {
var randomnumber =
Math.floor(Math.random() * 100);
$('#show').text(
'I am getting refreshed every 3
seconds..! Random Number => '
+ randomnumber);
}, 3000);
});
</script>
Predictive Fetch
Introduction
 Fetch on demand - the user’s action tells
the server what data should be retrieved
 Guesses what the user is going to do next
and retrieves the appropriate data
 Eg: Reading an online article – 3 pages
 attempts to remove the delay
 requires a browser-side cache
 Google Maps
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang=" en" lang=" en">
<head>
<title>Article Example</title>
<script type=" text/javascript" src="
zxml.js"></script>
<script type=" text/javascript" src="
Article.js"></script>
<link rel=" stylesheet" type=" text/css" href="
Article.css" />
</head>
<body>
<h1>Article Title</h1>
<div id=" divLoadArea" style=" display:none"></div>
<?php
$output = "<p>Page ";
for ($i=1; $i < 4; $i++) {
$output .= "<a href=\" ArticleExample.php?page=$i\"
id=\"aPage$i\"";
if ($i==$page) {
$output .= "class=\" current\"";
}
$output .= ">$i</a> ";
}
echo $output;
}
if ($page==1) {
echo $page1Text;
} else if ($page == 2) {
echo $page2Text;
} else if ($page == 3) {
echo $page3Text;
}
if (!$dataOnly) {
?>
</body>
</html>
<?php
}
?>
ArticleExample.php
<?php
$page = 1;]
$dataOnly = false;
if (isset($_GET["page"]))
{
$page = (int) $_GET["page"];
}
if (isset($_GET["data"]) && $_GET["dataonly"] ==
"true") {
$dataOnly = true; }
if (!$dataOnly) {
?>
Fallback Patterns
Introduction
 If there's an error on the server?
 If the request never makes it to the server?
 Status other than 200
 If a file is not found (404) or
 An internal server error occurred (302)
 Periodic refresh?
 Sol: simply cancel all pending requests.
 Alert: don't send any more requests
Submission Throttling
Introduction
 Solves - when to send user data to the
server.
 Traditional - each click – request to the
server - aware of what the client is doing
 Consider user typing a letter..
 Create a large number of requests in a
short time – also UI may slow down
Solution
 Buffer the data to be sent to the server on
the client
 Send the data at predetermined times
 A client-side function is called to begin the
buffering of data.
 User's status is checked to see if user is
idle or not
 If the user is still active, data continues to
be collected
Dynamic Script Loading
Dynamically create script tag and inject
into the DOM

<script type="text/javascript"> (function() {


var script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.src = "min.js";
(document.getElementsByTagName('head')[0] ||
document.getElementsByTagName('body')[0]).appe
ndChild(script);
})();
</script>

You might also like