Docsity
Docsity
Prepare for your exams
Prepare for your exams

Study with the several resources on Docsity

Earn points to download
Earn points to download

Earn points by helping other students or get them with a premium plan

Guidelines and tips
Guidelines and tips
Sell on Docsity
Sell on Docsity
Docsity AI
Docsity AI
Log inSign up

Prepare for your exams

Study with the several resources on Docsity

Find documents

Prepare for your exams with the study notes shared by other students like you on Docsity

Search for your university

Find the specific documents for your university's exams

Docsity AINEW

Summarize your documents, ask them questions, convert them into quizzes and concept maps

Explore questions

Clear up your doubts by reading the answers to questions asked by your fellow students

Earn points to download

Earn points by helping other students or get them with a premium plan

Share documents
download point icon20 Points

For each uploaded document

Answer questions
download point icon5 Points

For each given answer (max 1 per day)

All the ways to get free points
Get points immediately

Choose a premium plan with all the points you need

Study Opportunities

Choose your next study program

Get in touch with the best universities in the world. Search through thousands of universities and official partners

Community

Ask the community

Ask the community for help and clear up your study doubts

Free resources

Our save-the-student-ebooks!

Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors

PHP class notes-unit 5, Lecture notes of Programming Languages

Bharathidasan UniversityProgramming Languages

PHP class notes-unit 5 syllabus: AJAX - Advanced AJAX.

Typology: Lecture notes

2018/2019

Uploaded on 08/12/2019

krishnavalli-singaravelan
krishnavalli-singaravelan 🇮🇳

5

(1)

5 documents

1 / 42

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
Contents
AJAX..................................................................................................................................................... 1
AJAX with PHP..................................................................................................................................................... 3
Passing data to server with GET............................................................................................................................... 3
Passing data to the Server with Post..........................................................................................................................3
Handling XML..................................................................................................................................................... 5
Handling XML with PHP..........................................................................................................................................8
ADVANCED AJAX..................................................................................................................................................... 10
Handling Concurrent AJAX Request...................................................................................................................... 10
Downloading image in AJAX..................................................................................................................................... 12
Downloading JavaScript with AJAX...........................................................................................................................12
Connecting to Google Suggest [Real Time Application with AJAX].....................................................................13
Connecting to other domain using AJAX................................................................................................................15
Logging in with AJAX & PHP....................................................................................................................................15
Getting Data with Head Requests and AJAX..........................................................................................................16
DRAWING IMAGES ON THE SERVER...................................................................................................................... 17
Creating an Image..................................................................................................................................................... 18
Destroying Image Files................................................................................................................................................18
Displaying Images in HTML Pages........................................................................................................................ 19
Drawing Lines..................................................................................................................................................... 19
Setting Line Thickness............................................................................................................................................ 20
Drawing Rectangles.....................................................................................................................................................20
Drawing ellipses..................................................................................................................................................... 20
Drawing ARCS..................................................................................................................................................... 21
Drawing Polygons..................................................................................................................................................... 21
Filling in figures..................................................................................................................................................... 22
Drawing Individual Pixels...........................................................................................................................................22
Drawing Text..................................................................................................................................................... 22
Drawing Vertical Text..................................................................................................................................................23
Working with Image Files...........................................................................................................................................23
Tilling Images..................................................................................................................................................... 25
Copying Images..................................................................................................................................................... 25
UNIT 5
UNIT 5 | Page 1
pf3
pf4
pf5
pf8
pf9
pfa
pfd
pfe
pff
pf12
pf13
pf14
pf15
pf16
pf17
pf18
pf19
pf1a
pf1b
pf1c
pf1d
pf1e
pf1f
pf20
pf21
pf22
pf23
pf24
pf25
pf26
pf27
pf28
pf29
pf2a

Partial preview of the text

Download PHP class notes-unit 5 and more Lecture notes Programming Languages in PDF only on Docsity!

Contents

  • AJAX.....................................................................................................................................................
    • AJAX with PHP.....................................................................................................................................................
      • Passing data to server with GET...............................................................................................................................
      • Passing data to the Server with Post..........................................................................................................................
    • Handling XML.....................................................................................................................................................
      • Handling XML with PHP..........................................................................................................................................
  • ADVANCED AJAX..................................................................................................................................................... - Handling Concurrent AJAX Request......................................................................................................................
    • Downloading image in AJAX.....................................................................................................................................
    • Downloading JavaScript with AJAX...........................................................................................................................
      • Connecting to Google Suggest [Real Time Application with AJAX].....................................................................
      • Connecting to other domain using AJAX................................................................................................................
    • Logging in with AJAX & PHP....................................................................................................................................
      • Getting Data with Head Requests and AJAX..........................................................................................................
  • DRAWING IMAGES ON THE SERVER......................................................................................................................
    • Creating an Image.....................................................................................................................................................
    • Destroying Image Files................................................................................................................................................
      • Displaying Images in HTML Pages........................................................................................................................
    • Drawing Lines.....................................................................................................................................................
      • Setting Line Thickness............................................................................................................................................
    • Drawing Rectangles.....................................................................................................................................................
    • Drawing ellipses.....................................................................................................................................................
    • Drawing ARCS.....................................................................................................................................................
    • Drawing Polygons.....................................................................................................................................................
    • Filling in figures.....................................................................................................................................................
    • Drawing Individual Pixels...........................................................................................................................................
    • Drawing Text.....................................................................................................................................................
    • Drawing Vertical Text..................................................................................................................................................
    • Working with Image Files...........................................................................................................................................
    • Tilling Images.....................................................................................................................................................
    • Copying Images.....................................................................................................................................................
  • UNIT

AJAX

  • AJAX stands for Asynchronous JAvascript Xml.
  • AJAX is the basics for Web 2.0.
  • Implementing AJAX will give a web application the look and feel of desktop application.
  • AJAX applications do not refresh the entire browser display every time the user does something.
  • AJAX can communicate with server download data and display the data in some part of the web page without having to reload the web page.
  • AJAX is implemented using Java Script and XML.
  • PHP is used with AJAX to communicate with the server.

Writing AJAX program: Program 5- Index.html

An Ajax demo

  • In Netscape, Apple Safari & Firefox, it is checked through window.XMLHttpRequest, if it exist, it is created and is stored in the object variable like XMLHttpRequestObject = new XMLHttpRequest ();
  • To check in Microsoft explorer, XMLHttpRequest is created as Active X object. If (window. AcriveXobject) XMLHttpRequestObject = new ActuiveXobject (”Microsoft. XMLHTTP”);
  • After creating the object, the connections should be opened.
  • Syntax to open connection: Open (“method”, “URL” [, asynflat [, “unm” [, “pass”]]]) Where, Method - HTTP method to open the connection such as GET, POST, PUT, HEAD, or PROPFIND URL - the requested URL. asynFlag - A Boolean value indicating the call in asynchronous, default is TRUE.
  • Since AJAX doesn’t wait for the data to return from server, a call back function has to be created.
  • The call back function is connected to XMLHttpRequest.
  • Object by using the object’s on Ready State Change property.
  • Ready state property of XMLHttpRequestObject is the property that has a value on how the download is coming. 0 – download uninitialized. 1 – Loading 2 – Loaded 3 – Interactive 4 - Complete
  • The status property has the actual status of the download; it has the normal HTTP code that is received when a download is activated. 200 – OK 201 – Created 400 – Bad Request 401 – Unauthorized.

403 – Forbidden. 404 – Not found. 502 – Bad Gateway. 503 – Service Unavailable.

  • In the program, it is checked that ready state is 4 and status = 200.
  • If the data has been received successfully from the server, it is displayed in the targetDiv element in the webpage.
  • The JavaScript object for the corresponding tag is got with the method and property. Var obj = document.getElementById (divID);
  • The downloaded text is stored in response Text property.
  • After initializing all properties and methods, the download is initiated by sending a Request Object with send property. XMLHttpRequestObject. Send (null);

AJAX with PHP.....................................................................................................................................................

  • The php code: datas.php

  • In the AJAX program index.html,

    • In the onclick event, send the php file name in the server.
    • The php file will be parsed and output is displayed in the element. In the index.html change the following code:

On running the index.html file, the onclick event of the button will call the php file and the output is displayed.

Passing data to server with GET...............................................................................................................................

  • When data’s are sent through GET method, they are URL encoded.
  • Added after the question mark, spaces in the text are filed by a + sign the name = data items are separated by a & sign. E.g.: http://www.ispname.com/user.scriptname? a = 5 & b = 6 & c = Now + is + the + time.

Sending Ajax data with POST

Sending Ajax data with POST

_ _

The fetched message will appear here.

In the above program,

  • As the data’s are not sent through ?URL encoded moe, the coding for two buttons are written as follow: _

_

  • The data’s are sent to the getData function as its 3rd^ argument,
  • The getData function definition is changed to take 3 arguments
  • Set the method to open object to post.
  • Additional code is included to indicate to the server-side code that the data’s are encoded as POST encoding format through this line: XMLHttpRequestObject.setRequestHeader (‘Content-Type’, ‘application/x- www- form-urlencoded’);
  • Finally the encoded data is sent to the server through the send method as follow: Function getData (dataSource, divID, data) { If (XMLHttpRequestObject) {

Soda Cheese Salami

Store.html

Using Ajax with XML

XMLHttpRequestObject.send(null); } }

function getproducts2() { if(XMLHttpRequestObject) { XMLHttpRequestObject.open("GET", "products2.xml?b=t");

XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { var xmlDocument = XMLHttpRequestObject.responseXML; products = xmlDocument.getElementsByTagName("item"); listproducts(); } }

XMLHttpRequestObject.send(null); } }

function listproducts () { var loopIndex; var selectControl = document.getElementById('productsList');

onclick = "getproducts1()">

Your selection will appear here.

▲ In the above program,

  • There are 2 XML files that store the items for sale on a shopping website.
  • The program store.html will display the entries in a combo box. When selected information regarding the item is displayed.
  • The form element has 2 buttons one for products1 and another for products2. On clicking either of these buttons, the corresponding items are loaded in combo box through JavaScript functions getproducts1 & getproducts2.
  • In the combo box on change event, JavaScript function Setproducts () is called.
  • To communicate with server, a XMLHttpRequestObject is created,
  • The function fetproducts1 fetches the individual elements from the products1.xml and loads them in the control.
  • To download xml data, response XML property is used instead of responseText property of XMLHttpRequestObject.
  • Individual elements are extracted using getElementsByTagName method which returns an array of elements.
  • The array is passed to list products () function to load to the control.
  • A NULL value is passed in the send function to initiate the download.
  • To load the items in controls, the any items are accessed as products [0], products [1], products [2].
  • To access the text inside each XML element, then the expression products [0].firstChild is used. This returns the first text node of the element.
  • To access the text inside the text node, the expression. products [0].firstChild.data is used.
  • In the Setproducts function, the item selected by the user is displayed in a element named targetDiv.

document.getElementById (‘targetDiv’).inner HTML = “You Selected” + Products [document.getElementByID (‘ProductsList’). SelectedIndex]. firstChild.data;

Handling XML with PHP..........................................................................................................................................

  • The below example store2.html will read XML from a php script, products.php
  • Program: products.php '; echo ''; foreach ($items as $value) { echo ''; echo $value; echo ''; } echo ''; ?> In the above program,
  • The header has the return type for a XML document; content-type is set to “text/xml”.
  • The XML coding is written in echo statements to send it to the browser.
  • Both products1.xmland products2.xml is loaded in the same php page.
  • To loop over the items for sale, a foreach loop is added.

Using Ajax with XML

XMLHttpRequestObject.open("GET", "products.php?items=2&t=4");

XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { var xmlDocument = XMLHttpRequestObject.responseXML; products = xmlDocument.getElementsByTagName("item"); listproducts(); } }

XMLHttpRequestObject.send(null); } } function listproducts () { var loopIndex; var selectControl = document.getElementById('productsList');

for (loopIndex = 0; loopIndex < products.length; loopIndex++ ) { selectControl.options[loopIndex] = new Option(products[loopIndex].firstChild.data); } }

function setproducts() { document.getElementById('targetDiv').innerHTML =

"You selected " + products[document.getElementById ('productsList').selectedIndex].firstChild.data; }

Using Ajax with XML

your selection will appear here.

In the above program,

  • The open function of XMLHttpRequestObject will have “products.php? Items = 1” as its target parameter.
  • A value of 1 for items will return the products1 entries and 2 will return the second list of products.

ADVANCED AJAX

  • AJAX accepts multiple XMLHttpRequest from client to server.
  • AJAX allows downloading from multiple servers.
  • JavaScript files can be downloaded through AJAX and can be executed from the browser.

if (XMLHttpRequestObjects[index].readyState == 4 && XMLHttpRequestObjects[index].status == 200) { var xmlDocument = XMLHttpRequestObjects[index].responseXML; products = xmlDocument.getElementsByTagName("item"); listproducts(); } } XMLHttpRequestObjects[index].send(null); } }

In the above code,

  • Each button uses separate object from the array. Solution 3: using JavaScript inner function.
  • An inner function is a function that’s contained inside another function. format: function Outer(data) { var var1 = data; function inner (var2) { alert (var1 + var2); } }
  • Every time there is a call to outer function, a new copy of that function is created, means a new value is stored as var1.
  • The inner function will have access to that value.
  • Similarly in each call, a new XML Http Request Objects is created and that object is available to any inner function.
  • Therefore, the code to create and fill the variable XML Http Request Objects is placed inside the function getproducts1 and getproducts2. Then when there is a call to the function, a new XML Http Request Object is created and the anonymous inner function will use the new object automatically.

Downloading image in AJAX.....................................................................................................................................

  • When downloading images, the name of the image is downloaded. To actually download the image, AJAX depends on Dynamic HTML in the browser.

Downloading JavaScript with AJAX...........................................................................................................................

  • When there is a request to external website, the return data can be in JavaScript.
  • Any kind of JavaScript can be sent back from the server to the AJAX-enabled JavaScript.
  • E.g.:
Downloading JavaScript with Ajax