AJAX Joining JavaScript and PHP 1. Asynchronous Javascript and XML (without having to refresh) 2.
AJAX Asynchronous JavaScript and XML 1. AJAX Outline What is AJAX? Benefits Real world examples How...
18
AJAX Asynchronous JavaScript and XML 1
-
Upload
lynette-small -
Category
Documents
-
view
215 -
download
0
Transcript of AJAX Asynchronous JavaScript and XML 1. AJAX Outline What is AJAX? Benefits Real world examples How...
1
AJAX Asynchronous JavaScript and XML
2
AJAX Outline
• What is AJAX?• Benefits• Real world examples• How it works
3
What is AJAX?
• Asynchronous JavaScript and XML (AJAX)• Web development technique for creating web
applications• Makes web pages more responsive by
exchanging small amounts of data• Allows the web page to change its content
without refreshing the whole page• A web browser technology independent of web
server software
4
Benefits
• Improves the user experience– Analyzing information typed into browser in real
time– Provide a richer experience– Increases responsiveness of web pages
• Improve bandwidth utilization– Only data which is required is retrieved from the
server
5
Real World Examples
• Google Maps (http://maps.google.com/) (slidable maps)
• My Yahoo! (http://my.yahoo.com/) (shuffling windows)
6
How it works
• AJAX runs in your browser
• Works with asynchronous data transfers(HTTP requests) between the browser and the web server
• Http requests are sent by JavaScript calls without having to submit a form
• XML is commonly used as the format for receiving server data but plain text may be used as well
7
1 – XMLHttpRequest object
• A page element must make a JavaScript call
• The JavaScript function must create an XMLHttpRequest object which is used to contact the server
• JavaScript must determine whether the client is IE or Firefox
http = new ActiveXObject("Microsoft.XMLHTTP"); (IE)http = new XMLHttpRequest(); (Mozilla)
8
1 – XMLHttpRequest object• Custom function to return XMLHttpRequest object for all possible types of
browser
function create_ajax() { var xmlhttp = null; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp;}
9
2 - Sending the request• Once the XMLHttpRequest object has been created it must be set up
to call the server
var ajax = create_ajax();ajax.onreadystatechange = function() { response(ajax); }ajax.open(method, url, async);ajax.send(str);
• The code above utilizes the XMLHttpRequest object to contact the server and retrieve server data
• When the response returns result the JavaScript function response(ajax) will be invoked and then can update the page
10
3 - Handling the Response• Implementation of the JavaScript function which will be used to
handle the response (Event Handler):
function response(ajax){ /* Debug ajax state and status */ //alert(ajax.readyState + " - " + ajax.status); if (ajax.readyState == 4 && ajax.status == 200) { var str = ajax.responseText; document.getElementById("result").innerHTML = str; }}
• Now the page has communicated with the server without having to refresh the entire page
11
readyState & status property
• The readyState property defines the current state of the XMLHttpRequest object
• Possible values for the readyState
• For the status it can either 200 (“OK”) , 404 (Page not found), or 0 (cross domain request restriction)
State Description
0 The request is not initialized
1 The request has been setup
2 The request has been submitted
3 The request is in process
4 The request is completed
12
Example
Server
Client
plus2num.html
plus2num.php
count();
<span id="result"> ???</span>
echo $_REQUEST["num1"] + $_REQUEST["num2"];
<form ...> ...</form>
AJAX (POST/GET)
AJAX(text/plain)
[1][2]
[3]
[4][5]
13
Exampleplus2num.html (body section)<body><form name="f">Num1: <input type="text" name="num1" size=3>+Num2: <input type="text" name="num2" size=3>=<span id="result">???</span><input type="button" value="Count" onclick="count();"></form></body>
[1]
14
Exampleplus2num.html (head section)<head><script>. . . ? ? ?function count() { var str = "num1=" + document.f.num1.value + "&" + "num2=" + document.f.num2.value;
var ajax = create_ajax(); ajax.onreadystatechange = function() { response(ajax); }
/* GET method */ ajax.open("GET", "http://.../plus2num.php?" + str, true); ajax.send();
/* POST method */ //ajax.open("POST", "http://.../ajax/plus2num.php", true); //ajax.setRequestHeader("Content-type", // "application/x-www-form-urlencoded"); //ajax.send(str);}</script></head>
[2]
[3]
[4] / [5]
Refer to slide #10
15
Exampleplus2num.php
<?phpheader("Content-type:text/plain");header("Access-Control-Allow-Origin: *");echo $_REQUEST["num1"] + $_REQUEST["num2"];?>
Disable cross domain request restriction
Change the default “text/html” PHP header
16
Example (AJAX using jQuery)plus2num_jquery.html (head section)<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js></script>
<script>$(document).ready(function(){ $("input#clkbtn").click(function(){ var str = $("form").serialize();
/* POST/GET method */ $("span").load("http://.../plus2num.php", str); });});</script></head>
[2]
[3] / [4] / [5]
[1]
17
Example (AJAX using jQuery)plus2num_jquery.html (body section)<body><form name="f">Num1: <input type="text" name="num1" size=3>+Num2: <input type="text" name="num2" size=3>=<span id="result">???</span><input type="button" value="Count" id="clkbtn"></form></body>
18
Example (AJAX using jQuery)plus2num_jquery.html (head section)
Other options for get/post requests but need extra setResult function.
<script>$(document).ready(function(){ $("input#clkbtn").click(function(){ var str = $("form").serialize();
/* GET method */ //$.get("http://.../plus2num.php?" + str, // function(data, status){ setResult(data, status); });
/* POST method */ //$.post("http://.../plus2num.php", str, // function(data, status){ setResult(data, status); }); });});
function setResult(data, status) { $("span").text(data);}</script>
