Web System & Technology

Slides:



Advertisements
Similar presentations
AJAX asynchronous server-client communication. Test.
Advertisements

Introduction to AJAX AJAX Keywords: JavaScript and XML
Ajax (Asynchronous JavaScript and XML). AJAX  Enable asynchronous communication between a web client and a server.  A client is not blocked when an.
PHP and AJAX ISYS 475. AJAX Asynchronous JavaScript and XML: – JavaScript, Document Object Model, Cascade Style Sheet, XML, server-side script such as.Net,
Lecture 12 – AJAX SFDV3011 – Advanced Web Development Reference: 1.
Ajax - Part II Communicating with the Server. Learning Objectives By the end of this lecture, you should be able to: – Describe the overview of steps.
JavaScript, Fourth Edition Chapter 12 Updating Web Pages with AJAX.
AJAX and Java ISYS 350. AJAX Asynchronous JavaScript and XML: – Related technologies: JavaScript, Document Object Model, XML, server-side script such.
Posting XML Data From the Client to a Server Eugenia Fernandez IUPUI.
06/10/2015AJAX 1. 2 Introduction All material from AJAX – what is it? Traditional web pages and operation Examples of AJAX use Creating.
Lecture 9: AJAX, Javascript review..  AJAX  Synchronous vs. asynchronous browsing.  Refreshing only “part of a page” from a URL.  Frameworks: Prototype,
AJAX محمد احمدی نیا 2 Of 27 What is AJAX?  AJAX = Asynchronous JavaScript and XML.  AJAX is not a new programming language, but.
AJAX Compiled from “AJAX Programming” [Sang Shin] (Asynchronous JavaScript and XML)
Asynchronous Javascript And XML AJAX : an introduction UFCEUS-20-2 : Web Programming.
AJAX stands for Asynchronous JavaScript And XML. AJAX is a type of programming made popular in 2005 by Google (with Google Suggest). AJAX is not a new.
Web Technology Introduction AJAXAJAX. AJAX Outline  What is AJAX?  Benefits  Real world examples  How it works  Code review  Samples.
School of Computing and Information Systems CS 371 Web Application Programming AJAX.
CISC 3140 (CIS 20.2) Design & Implementation of Software Application II Instructor : M. Meyer Address: Course Page:
Creating Dynamic Webpages
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
AJAX Asynchronous JavaScript and XML 1. AJAX Outline What is AJAX? Benefits Real world examples How it works 2.
SE-2840 Dr. Mark L. Hornick 1 Introduction to Ajax Asynchronous Javascript And XML.
Web Programming JAvaScript Ajax Programming Web Programming /38.
CHAPTER 13 COMMUNICATING WITH AJAX. LEARNING OBJECTIVES AJAX, which stands for Asynchronous JavaScript and XMLprovides a way for a browser to send and.
CHAPTER 8 AJAX & JSON WHAT IS AJAX? Ajax lets you…
AJAX and REST. Slide 2 What is AJAX? It’s an acronym for Asynchronous JavaScript and XML Although requests need not be asynchronous It’s not really a.
Dave Salinas. What is XML? XML stands for eXtensible Markup Language Markup language, like HTML HTML was designed to display data, whereas XML was designed.
AJAX AJAX Asynchronous JavaScript and XML --- MADHAVI
What is AJAX ? Asynchronous Javascript and XML. Not a stand-alone language or technology. It is a technique that combines a set of known technologies in.
AJAX – Asynchronous JavaScript And XML By Kranthi Kiran Nuthi CIS 764 Kansas State University.
Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.
 AJAX technology  Rich User Experience  Characteristics  Real live examples  JavaScript and AJAX  Web application workflow model – synchronous vs.
1 AJAX. AJAX – Whatzit? Asynchronous (content loading)‏ Javascript (logic & control)‏ And XML (request handling)‏
JavaScript and Ajax Week 10 Web site:
AJAX. Objectives Understand and apply AJAX Using AJAX in DOJO library.
Ajax SUBMITTED BY NITIN RAMANI C.S.E 3 rd Y 5 th S R.N CS SUBMITTED TO PRO. PUSHPARAJ PATEL SIR.
Introduction to AJAX Pat Morin COMP Outline What is AJAX? – History – Uses – Pros and Cons An XML HTTP Transaction – Creating an XMLHTTPRequest.
What is AJAX ? Asynchronous Javascript and XML.
JavaScript and Ajax (Ajax Tutorial)
Understanding XMLHttpRequest
Not a Language but a series of techniques
AJAX AJAX = Asynchronous JavaScript and XML.
CS 371 Web Application Programming
PHP –MySQL Interview Question And Answer.
AJAX and REST.
Callback Function function passed as a parameter to another function
XMLHttp Object.
Ajax Internet Engineering Fall 2017 Bahador Bakhshi
AJAX.
AJAX (Asynchronous JavaScript and XML.)
AJAX and JSP ISYS 350.
Session V HTML5 APIs - AJAX & JSON
CSE 154 Lecture 22: AJAX.
AJAX Robin Burke ECT 360.
JavaScript & AJAX.
ISC440: Web Programming 2 AJAX
HTML Level II (CyberAdvantage)
HTML5 AJAX & JSON APIs
JavaScript & jQuery AJAX.
Chengyu Sun California State University, Los Angeles
AJAX CS-422 Dick Steflik.
Web Technology Even Sem 2015
Chengyu Sun California State University, Los Angeles
Advanced Concepts and AJAX
Chengyu Sun California State University, Los Angeles
AJAX Chapters 19, 20.
AJAX and JSP ISYS 350.
PHP and JSON Topics Review JSON.
Communicating with the Server
AJAX By Prof. B.A.Khivsara
Presentation transcript:

Web System & Technology Best Professional Development Institute Prepared by Ali Saeed

Include/ Require Statements in PHP include 'filename'; ?> Include generate warning and process continue require 'filename'; Require generate error and process halts

GET/ POST/ REQUEST In previous classes we use $_REQUEST[] to read data from request We can also use $_GET and $_POST to read data from request.

Session & Cookies Session is use to store information on server whereas cookies use to store information on client PC. <?php session_start(); // must be firt statement $_SESSION["favcolor"] = "green"; ?> Output: Echo $_SESSION[favcolor];

Session & Cookies <?php setcookie("user", "John Doe", time() + (86400 * 30), "/"); // 86400 = 1 day ?> Output: Echo $_COOKIE[“user”];

JQuery jQuery is a lightweight, "write less, do more", JavaScript library Google CDN <head> <script src="https://ajax.googleapis.com/ajax/libs /jquery/3.2.1/jquery.min.js"></script> </head>

Jquery Example $("#hide").click(function(){     $("p").hide(); }); $("#show").click(function(){     $("p").show(); }); <button id="hide">Hide</button> <button id="show">Show</button>

AJAX Asynchronous JavaScript and XML. AJAX is not a new programming language, but a new way to use existing standards. AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page. AJAX is a technique for creating fast and dynamic web pages.

How AJAX Works

AJAX Example Explained <!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { .... AJAX script goes here ... } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html>

The XMLHttpRequest Object All modern browsers support the XMLHttpRequest object (IE5 and IE6 use an ActiveXObject). Syntax for creating an XMLHttpRequest object: variable=new XMLHttpRequest(); Or xmlhttp=new XMLHttpRequest();

Send a Request To a Server To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object: xmlhttp.open("GET","ajax_info.php",true); First Parameter Method, page of server, true (asynchronous) or false (synchronous) xmlhttp.send(); E.g xmlhttp.open("GET","demo_get2.php?fname=Henry&lname=Ford",true); xmlhttp.send();

Asynchronous - True or False? AJAX stands for Asynchronous JavaScript and XML, and for the XMLHttpRequest object to behave as AJAX, the async parameter of the open() method has to be set to true. Sending asynchronous requests is a huge improvement for web developers. Many of the tasks performed on the server are very time consuming. Before AJAX, this operation could cause the application to hang or stop.

Asynchronous - True or False? With AJAX, the JavaScript does not have to wait for the server response, but can instead: execute other scripts while waiting for server response deal with the response when the response ready

AJAX - Server Response To get the response from a server, use the responseText or responseXML property of the XMLHttpRequest object. responseTextget-the response data as a string responseXMLget-the response data as XML data

The responseText Property The responseText property returns the response as a string, and you can use it accordingly: document.getElementById("myDiv").innerHTML=xmlh ttp.responseText;

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 readyState changes. The readyState property holds the status of the XMLHttpRequest. xmlhttp.onreadystatechange=function()   {   if (xmlhttp.readyState==4 && xmlhttp.status==200)     {     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;     }   } When readyState is 4 and status is 200, the response is ready.