PHP and AJAX Exchange data interface AJAX What

  • Slides: 31
Download presentation
PHP and AJAX Exchange data interface

PHP and AJAX Exchange data interface

AJAX • What is AJAX ? • AJAX stands for Asynchronous Java. Script and

AJAX • What is AJAX ? • AJAX stands for Asynchronous Java. Script and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS and Java Script. • Conventional web application transmit information to and from the sever using synchronous requests. This 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, Java. Script 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. Bakker 2016 2

AJAX • AJAX example • XMLHttp. Request • Send a Request To a Server

AJAX • AJAX example • XMLHttp. Request • Send a Request To a Server • Server response • The onreadystatechange event • ASP example • PHP example • XML example Bakker 2016 3

AJAX • XMLHttp. Request: • Variabele -> XMLHttp. Request • ajax. Request = new

AJAX • XMLHttp. Request: • Variabele -> XMLHttp. Request • ajax. Request = new Active. XObject( "Microsoft. XMLHTTP“ ) • ajax. Request. open( "GET", "ajax-example. php", true ) • ajax. Request. send() • ajax. Request. onreadystatechange = function() { if(ajax. Request. ready. State == 4) { var ajax. Display = document. get. Element. By. Id('ajax. Div'); ajax. Display. inner. HTML = ajax. Request. response. Text; } Bakker 2016 4

PHP and AJAX Example Bakker 2016 5

PHP and AJAX Example Bakker 2016 5

PHP and AJAX Example Bakker 2016 6

PHP and AJAX Example Bakker 2016 6

PHP and AJAX Example <form name='my. Form'> Max Age: <input type='text' id='age' /> Max

PHP and AJAX Example <form name='my. Form'> Max Age: <input type='text' id='age' /> Max WPM: <input type='text' id='wpm' /> Sex: <select id='sex'> <option value="m">m</option> <option value="f">f</option> </select> <input type='button' onclick='ajax. Function()‘ value='Query My. SQL'/> </form> <div id='ajax. Div'>Your result will display here</div> </body> URL? variable 1=value 1; &variable 2=value 2; Bakker 2016 7

PHP and AJAX Example table CREATE TABLE `ajax_example` ( `name` varchar(50) NOT NULL, `age`

PHP and AJAX Example table CREATE TABLE `ajax_example` ( `name` varchar(50) NOT NULL, `age` int(11) NOT NULL, `sex` varchar(1) NOT NULL, `wpm` int(11) NOT NULL, PRIMARY KEY (`name`) ) Bakker 2016 8

PHP and AJAX Example INSERT INTO `ajax_example` VALUES ('Jerry', 120, 'm', 20); INSERT INTO

PHP and AJAX Example INSERT INTO `ajax_example` VALUES ('Jerry', 120, 'm', 20); INSERT INTO `ajax_example` VALUES ('Regis', 75, 'm', 44); INSERT INTO `ajax_example` VALUES ('Frank', 45, 'm', 87); INSERT INTO `ajax_example` VALUES ('Jill', 22, 'f', 72); INSERT INTO `ajax_example` VALUES ('Tracy', 27, 'f', 0); INSERT INTO `ajax_example` VALUES ('Julie', 35, 'f', 90); Bakker 2016 9

PHP and AJAX Example <script language="javascript" type="text/javascript"> <!-//Browser Support Code function ajax. Function(){ var

PHP and AJAX Example <script language="javascript" type="text/javascript"> <!-//Browser Support Code function ajax. Function(){ var ajax. Request; // The variable that makes Ajax possible! // Internet Explorer Browsers try{ ajax. Request = new Active. XObject("Microsoft. XMLHTTP"); }catch (e){ // Something went wrong alert("Your browser broke!"); return false; } Bakker 2016 10

PHP and AJAX Example <!DOCTYPE html> <!-- Boek php basics hoofdstuk Ajax of XHTML

PHP and AJAX Example <!DOCTYPE html> <!-- Boek php basics hoofdstuk Ajax of XHTML --> <html> <body> <script language="javascript" type="text/javascript"> <!-//Browser Support Code function ajax. Function(){ var ajax. Request; // The variable that makes Ajax possible! try{ // Opera 8. 0+, Firefox, Safari ajax. Request = new XMLHttp. Request(); }catch (e){ // Internet Explorer Browsers try{ ajax. Request = new Active. XObject("Msxml 2. XMLHTTP"); }catch (e) { try{ ajax. Request = new Active. XObject("Microsoft. XMLHTTP"); }catch (e){ // Something went wrong Bakker 2016 alert("Your browser broke!"); return false; 11

PHP and AJAX Example <? php $dbhost = "localhost"; $dbuser = "ajax"; $dbpass =

PHP and AJAX Example <? php $dbhost = "localhost"; $dbuser = "ajax"; $dbpass = "ajax"; $dbname = "ajax"; //Connect to My. SQL Server $dbh = new PDO("mysql: host=$dbhost; dbname=$dbname" , $dbuser, $dbpass); // Retrieve data from Query String $age = $_GET['age']; $sex = $_GET['sex']; $wpm = $_GET['wpm']; //build query $query = "SELECT * FROM ajax_example WHERE sex = '$sex'"; if(is_numeric($age)) $query. = " AND age <= $age"; if(is_numeric($wpm)) $query. = " AND wpm <= $wpm"; Bakker 2016 12

XMLHttp. Request The XMLHttp. Request Object All modern browsers support the XMLHttp. Request object.

XMLHttp. Request The XMLHttp. Request Object All modern browsers support the XMLHttp. Request object. The XMLHttp. Request object is used to exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Bakker 2016 13

XMLHttp. Request var xhttp; if (window. XMLHttp. Request) { xhttp = new XMLHttp. Request();

XMLHttp. Request var xhttp; if (window. XMLHttp. Request) { xhttp = new XMLHttp. Request(); } else { xhttp = new Active. XObject("Microsoft. XMLHTTP"); } Bakker 2016 14

Send a Request To a Server To send a request to a server, we

Send a Request To a Server To send a request to a server, we use the open() and send() methods of the XMLHttp. Request object: xhttp. open("GET", "ajax_info. txt", true); xhttp. send(); Bakker 2016 15

Send a Request To a Server Example GET xhttp. open("GET", "demo_get. asp", true); xhttp.

Send a Request To a Server Example GET xhttp. open("GET", "demo_get. asp", true); xhttp. send(); Example POST xhttp. open("POST", "demo_post. asp", true); xhttp. send(); Bakker 2016 16

Server response To get the response from a server, use the response. Text or

Server response To get the response from a server, use the response. Text or response. XML property of the XMLHttp. Request object. Property Description response. Text response. XML get the response data as a string get the response data as XML data Bakker 2016 17

Server response The response. Text Property document. get. Element. By. Id("demo"). inner. HTML =

Server response The response. Text Property document. get. Element. By. Id("demo"). inner. HTML = xhttp. response. Text; The response. XML Property xml. Doc = xhttp. response. XML; txt = ""; x = xml. Doc. get. Elements. By. Tag. Name("ARTIST"); for (i = 0; i < x. length; i++) { txt += x[i]. child. Nodes[0]. node. Value + " "; } document. get. Element. By. Id("demo"). inner. HTML = txt; Bakker 2016 18

Events : onreadystatechange The onreadystatechange event When a request to a server is sent,

Events : onreadystatechange The onreadystatechange event When a request to a server is sent, we want to perform some actions based on the response. The onreadystatechange event is triggered every time the ready. State changes. The ready. State property holds the status of the XMLHttp. Request. Three important properties of the XMLHttp. Request object: Bakker 2016 19

Events Property Description onreadystatechange Stores a function (or the name of a function) to

Events Property Description onreadystatechange Stores a function (or the name of a function) to be called automatically each time the ready. State property changes ready. State Holds the status of the XMLHttp. Request. Changes from 0 to 4: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready status 200: "OK" 404: Page not found Bakker 2016 20

The onreadystatechange event function load. Doc() { var xhttp = new XMLHttp. Request(); xhttp.

The onreadystatechange event function load. Doc() { var xhttp = new XMLHttp. Request(); xhttp. onreadystatechange = function() { if (xhttp. ready. State == 4 && xhttp. status == 200) { document. get. Element. By. Id("demo"). inner. HTML = xhttp. response. Text; } }; Bakker 2016 21

AJAX Database Example - ASP function show. Customer(str) { var xhttp; if (str ==

AJAX Database Example - ASP function show. Customer(str) { var xhttp; if (str == "") { document. get. Element. By. Id("txt. Hint"). inner. HTML = ""; return; } xhttp = new XMLHttp. Request(); xhttp. onreadystatechange = function() { if (xhttp. ready. State == 4 && xhttp. status == 200) { document. get. Element. By. Id("txt. Hint"). inner. HTML = xhttp. response. Text; } }; xhttp. open("GET", "getcustomer. asp? q="+str, true); xhttp. send(); } Bakker 2016 22

AJAX Database Example - ASP <% response. expires=-1 sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="

AJAX Database Example - ASP <% response. expires=-1 sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID=" sql=sql & "'" & request. querystring("q") & "'" set conn=Server. Create. Object("ADODB. Connection") conn. Provider="Microsoft. Jet. OLEDB. 4. 0" conn. Open(Server. Mappath("/datafolder/northwind. mdb")) set rs=Server. Create. Object("ADODB. recordset") rs. Open sql, conn response. write("<table>") do until rs. EOF for each x in rs. Fields response. write("<tr><td><b>" & x. name & "</b></td>") response. write("<td>" & x. value & "</td></tr>") next rs. Move. Next loop response. write("</table>") %> Bakker 2016 23

AJAX – PHP - text Bakker 2016 24

AJAX – PHP - text Bakker 2016 24

AJAX – PHP - text <html> <head> <script> function show. Hint(str) { if (str.

AJAX – PHP - text <html> <head> <script> function show. Hint(str) { if (str. length == 0) { document. get. Element. By. Id("txt. Hint"). inner. HTML = ""; return; } else { var xmlhttp = new XMLHttp. Request(); xmlhttp. onreadystatechange = function() { if (xmlhttp. ready. State == 4 && xmlhttp. status == 200) { document. get. Element. By. Id("txt. Hint"). inner. HTML = xmlhttp. response. Text; }; xmlhttp. open("GET", "gethint. php? q=" + str, true); xmlhttp. send(); } } </script> </head> <body> <p><b>Start typing a name in the input field below: </b></p> Bakker 2016 <form> First name: <input type="text" onkeyup="show. Hint(this. value)"> 25

AJAX – PHP - text <? php // Array with names $a[] = "Anna";

AJAX – PHP - text <? php // Array with names $a[] = "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"; $a[] = "Eve"; $a[] = "Evita"; Bakker 2016 $a[] = "Sunniva"; $a[] = "Tove"; 26

AJAX – XML Bakker 2016 27

AJAX – XML Bakker 2016 27

AJAX – XML <!DOCTYPE html> <style> table, th, td { border : 1 px

AJAX – XML <!DOCTYPE html> <style> table, th, td { border : 1 px solid black; border-collapse: collapse; } th, td { padding: 5 px; } </style> <body> <button type="button" onclick="load. Doc()">Get my CD collection</button> <table id="demo"></table> <script> function load. Doc() {. . </body> </html> Bakker 2016 28

AJAX – XML function load. Doc() { var xhttp = new XMLHttp. Request(); xhttp.

AJAX – XML function load. Doc() { var xhttp = new XMLHttp. Request(); xhttp. onreadystatechange = function() { if (xhttp. ready. State == 4 && xhttp. status == 200) { my. Function(xhttp); } }; xhttp. open("GET", "cd_catalog. xml", true); xhttp. send(); } function my. Function(xml) { var i; var xml. Doc = xml. response. XML; var table="<tr><th>Artist</th><th>Title</th></tr>"; var x = xml. Doc. get. Elements. By. Tag. Name("CD"); for (i = 0; i <x. length; i++) { table += "<tr><td>" + x[i]. get. Elements. By. Tag. Name("ARTIST")[0]. child. Nodes[0]. node. Value + "</td><td>" + x[i]. get. Elements. By. Tag. Name("TITLE")[0]. child. Nodes[0]. node. Value + "</td></tr>"; } document. get. Element. By. Id("demo"). inner. HTML = table; } Bakker 2016 29

AJAX – XML <? xml version="1. 0" encoding="ISO-8859 -1"? > -<CATALOG> -<CD> <TITLE>Empire Burlesque</TITLE>

AJAX – XML <? xml version="1. 0" encoding="ISO-8859 -1"? > -<CATALOG> -<CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10. 90</PRICE> <YEAR>1985</YEAR> </CD> -<CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9. 90</PRICE> <YEAR>1988</YEAR> </CD> -<CD> </CATALOG> Bakker 2016 30

XMLHttp. Request Level 2 W 3 C Working Group Note 18 November 2014 Abstract

XMLHttp. Request Level 2 W 3 C Working Group Note 18 November 2014 Abstract The XMLHttp. Request specification defines an API that provides scripted client functionality for transferring data between a client and a server. Status of This Document This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W 3 C publications and the latest revision of this technical report can be found in the W 3 C technical reports index at http: //www. w 3. org/TR/. Work on this document has been discontinued and it should not be referenced or used as a basis for implementation. However, the Web Applications Working Group continues to work on XMLHttp. Request Level 1 and the WHATWG continues to work on XMLHttprequest. This is the 18 November 2014 Working Group Note of the XMLHttp. Request Level 2 document. This document is produced by the Web Applications (Web. Apps) Working Group. The Web. Apps Working Group is part of the Rich Web Clients Activity in the W 3 C Interaction Domain. Please send comments to the Web. Apps Working Group's public mailing list public-webapps@w 3. org with [XHRL 2] at the start of the subject line. Archives of this list are available. See also W 3 C mailing list and archive usage guidelines. Publication as a Working Group Note does not imply endorsement by the W 3 C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress. This document was produced by a group operating under the 5 February 2004 W 3 C Patent Policy. W 3 C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W 3 C Patent Policy. This document is governed by the 14 October 2005 W 3 C Process Document. Bakker 2016 31

AJAX and PHP XHTML Javascript AJAX PHP WhatAJAX and PHP XHTML Javascript AJAX PHP What
INTERFACE DESIGN INTERFACE DESIGN INTERFACE INTERFACE DESIGN INTERFACEINTERFACE DESIGN INTERFACE DESIGN INTERFACE INTERFACE DESIGN INTERFACE
index php input php regist php logincheck phpindex php input php regist php logincheck php
PHP Intro PHP Webintegrator PHP Baggrund PHP erPHP Intro PHP Webintegrator PHP Baggrund PHP er
PHP AVAudio Visual PHP PHP 20110910 yoya PHPPHP AVAudio Visual PHP PHP 20110910 yoya PHP
php PHP 4 Internals php Andi Gutmans PHPphp PHP 4 Internals php Andi Gutmans PHP
PHP Apa itu PHP PHP singkatan dari PHPPHP Apa itu PHP PHP singkatan dari PHP
Pemrogaman Web PHP PHP PHP akronim dari PHPPemrogaman Web PHP PHP PHP akronim dari PHP
Introduction to PHP HTML HTML PHP PHP phpIntroduction to PHP HTML HTML PHP PHP php
index php input php regist php logincheck phpindex php input php regist php logincheck php
PHP Overview CS 3520 1 PHP PHP PHPPHP Overview CS 3520 1 PHP PHP PHP
Ajax Prof Jim Briggs WEBP Ajax 1 AjaxAjax Prof Jim Briggs WEBP Ajax 1 Ajax
ASP NET AJAX What is AJAX Ajax whichASP NET AJAX What is AJAX Ajax which
ASP NET AJAX What is AJAX Ajax whichASP NET AJAX What is AJAX Ajax which
ASP NET AJAX What is AJAX Ajax whichASP NET AJAX What is AJAX Ajax which
CHAPTER 8 AJAX JSON WHAT IS AJAX AjaxCHAPTER 8 AJAX JSON WHAT IS AJAX Ajax
Ajax What is AJAX AJAX stands for AsynchronousAjax What is AJAX AJAX stands for Asynchronous
AJAX and PHP What is PHP n nAJAX and PHP What is PHP n n
AJAX and PHP What is PHP comes fromAJAX and PHP What is PHP comes from
AJAX and PHP What is PHP n nAJAX and PHP What is PHP n n
AJAX and PHP What is PHP n nAJAX and PHP What is PHP n n
Columbian Exchange Columbian Exchange Columbian Exchange Widespread exchangeColumbian Exchange Columbian Exchange Columbian Exchange Widespread exchange
PHP AND MYSQL PHP and My SQL PHPPHP AND MYSQL PHP and My SQL PHP
PHP Basics Introduction to PHP a PHP filePHP Basics Introduction to PHP a PHP file