IT 310 Web Dev

Web Systems and Technologies 2

• The course offers understanding of extensible markup language and document object model.
• The course teaches how to achieve a logical structure of data and how to access and manipulate it.
• XML HTTP request objects are used to communicate with servers and send information in various formats.
• Students learn to use libraries like jQuery and jQuery UI for manipulating web page objects, event handling, and animation.

What is XML?

• XML stores data in plain text.
• XML offers software and hardware independence for storing, transporting, and sharing data.
• XML makes it easier to expand or upgrade to new systems, applications, or browsers without losing data.
• With XML, data is available to all reading machines such as people, computers, voice machines, and news feeds.
• XML applications function as expected even if data is added or removed.
• XML consists of sender and receiver information, heading, and a message body.

XML vs HTML

• XML carries data with a focus on what the data is.
• HTML displays data with focus on how data looks.
• XML tags are not predefined, unlike HTML tags.
• There are no predefined tags in XML, the tags used are not pre defined in any XML standard.
• The author of the XML document invents the tags.
• HTML works with predefined tags such as p, h1 and table.
• With XML, the author defines both the tags and the document structure.
• XML does not carry any display information and seperates data from presentation.

XML Structure

• XML has tree structure
• Root element can contain child and subchild elements

XML Syntax Rules

• XML documents must have a root element.
• The XML prolog is optional.
• All XML elements require a closing tag.
• XML tags are case sensitive.
• XML elements must be properly nested.
• XML attribute values must always be quoted.

Entity References

• Certain characters have a special meaning in XML.
• Placing characters such as "<" inside an XML element generates an error.
• Replace the "<" character with an entity reference to avoid errors.
• The 5 pre-defined entity references in XML are:
  • < for less than (<)
  • > for greater than (>)
  • & for ampersand (&)
  • ' for apostrophe (')
  • " for quotation mark (")

Comments in XML

• XML comments' syntax is similar to HTML: <!-- This is a comment -->

XML Naming Rules

• Element names are case-sensitive.
• Element names must start with a letter or an underscore.
• Element names cannot start with "xml" (or XML, or Xml, etc.).
• Element names can include letters, digits, hyphens, underscores, and periods.
• Element names cannot contain spaces.
• Any name can be used except the reserved word "xml".

XML Naming Conventions

• Naming conventions are:
  • Lower case: <firstname>
  • Upper case: <FIRSTNAME>
  • Snake case: <first_name> (used in SQL databases)
  • Pascal case: <FirstName> (used by C programmers)
  • Camel case: <firstName> (used in JavaScript)

XML Attributes

• Attribute values must always be quoted
• Either single or double quotes can be used

ACT 1 & 2: XML and HTML Tasks

• The XML file must contain a root, child, and sub-child.
• The XML must contain at least 10 children and 3 sub-children.
• Create a website with three pages (Home, Table, About).
• The Homepage contains a preview of the website's content.
• The Table contains data from the XML file.
• About the developer.
• All three pages must be connected.
• The website theme must be connected to the XML file.

The XMLHttpRequest Object

• The XMLHttpRequest object requests data from a web server.
• It is a developer's dream because it allows:
  • Updating a web page without reloading it.
  • Requesting data from a server after the page has loaded.
  • Receiving data from a server after the page has loaded.
  • Sending data to a server in the background.

Sending an XMLHttpRequest

• JavaScript syntax for using the XMLHttpRequest object involves creating a new object, setting up a callback function for when the state changes, opening a request to a file and sending the request.

XML DOM

• The Document Object Model (DOM) defines a standard for accessing and manipulating documents.
• The HTML DOM defines a standard way for accessing and manipulating HTML documents, presenting them as a tree-structure.
• The XML DOM defines a standard way for accessing and manipulating XML documents, presenting them as a tree-structure.

XML Parser

• Major browsers have a built-in XML parser to access and manipulate XML.
• The XML DOM (Document Object Model) defines the properties and methods for accessing and editing XML.
• Before an XML document can be accessed, it must be loaded into an XML DOM object.
• Modern browsers have a built-in XML parser that can convert text into an XML DOM object.

XML and XSLT

• XSLT transforms an XML document into HTML.
• XSLT (eXtensible Stylesheet Language Transformations) is the recommended style sheet language for XML.
• XSLT can add/remove elements and attributes, rearrange and sort elements, perform tests, and make decisions about which elements to hide and display.
• XLST uses XPath to find information in an XML document

XML and XPath

• XPath is a major element in the XSLT standard.
• XPath can be used to navigate through elements and attributes in an XML document.
• XPath uses path expressions to select nodes or node-sets in an XML document.
• XPath is used in JavaScript, Java, XML Schema, PHP, Python, C and C++.

The AJAX Introduction

• AJAX = Asynchronous JavaScript And XML.
• AJAX not a programming language.
• AJAX is combination of:
  • A browser built-in XMLHttpRequest object (to request data from a web server)
  • JavaScript and HTML DOM (to display or use the data)
• AJAX updates web pages asynchronously, updating parts of a web page without reloading the whole page.

How AJAX Works

• AJAX involves an event occuring in a web page.
• An object is created by J avaScript and sends a request to a web server
• The server processes the request, then sends a response back to the web page
• The response is read by J avaScript
• Proper action (like page update) is performed by J avaS cript

AJAX and the XMLHttpRequest Object

• The keystone of AJAX is the XMLHttpRequest object which is supported by all modern browsers.
• The XMLHttpRequest object exchanges data with a server behind the scenes, updating parts of a web page without reloading the whole page.

XMLHttpRequest Object Properties

• The object methods are:
  • new XMLHttpRequest() creates a new XMLHttpRequest object
  • abort() cancels the current request
  • getAllResponseHeaders() and getResponseHeader() return header information
  • open(method, url, async, user,psw) specifies the request
  • send() Sends the request to the server (used for GET requests)
  • send(string) Sends the request to the server (used for POST requests)
  • setRequestHeader() Adds a label/value pair to the header to be sent
• Object properties:
  • Defines a function to be called when the readyState property changes. Also the onreadystatechangeProperty
  • readyState property holds the status of the XMLHttpRequest object and the onreadystatechange property defines a function to be executed when the readyState changes.
  • Returns the response data as a string
  • object.The responseXML property returns the response data as XML data
  • object holds the status-number of a request i.e. OK etc,
  • object thestatusText property holds the status-text (e.g. OK or Not Found)

AJAX Requests

• The object is used to exchange data with a server via the methods:
  • xhttp.open("GET", "ajax_info.txt", true);
  • xhttp.send();
• To specify the type of request use the open(method, url, async)

GET vs POST

• GET is simpler and faster than POST and can be used in most cases.
• POST should be used when:
  • a cached file is not an option
  • you're sending a large amount of data to the server
  • you're sending user input (which can contain unknown characters).

Asynchronous Requests

• Server requests should be sent asynchronously: xhttp.open("GET", "ajax_test.asp", true);
• Asynchronous sending the J avaS cript doesn't have to wait for the server response, it can execute other scripts deal with the response after the response is ready.
• When readyState is 4 and status is 200, the response is ready.

ACT 3 XML Task

• Create an XML file that stores animal names.
• Save some pictures of the animals.
• Save the address of each image file within XML as an element.
• Create a webpage with a textbox and a button.
• Designate the button to trigger and show the image of the animal corresponding to the content of the textbox.
• Show "No Data found" replacing the image content if no animal/data is found.

JSON: JavaScript Object Notation

• JSON is a data format that represents data as a set of JavaScript objects.
• JSON was invented by JS guru Douglas Crockford of Yahoo!.
• It is natively supported by all modern browsers and supported by old ones with libraries.
• JSON is rising in popularity due to its simplicity and ease of use.

XML vs JSON

• XML Pros:
  • standard open format
  • can represent almost any general kind of data
  • easy to read
  • lots of tools exist for working with XML
• XML Cons:
  • bulky syntax/structure makes files large and decreases performance
  • can be hard to shoehorn data into XML format
  • JavaScript code to navigate the XML DOM is bulky
• in JavaScript, you can create a new object without creating a class
• the object can have methods (function properties) that refer to itself as this
• can refer to the fields with .fieldName or ["fieldName"] syntax
• field names can optionally be put in quotes

Equivalent data example

• Compare sample formats:

Browser JSON methods

• Methods for browser compatibility are in the table:
• How to use Ajax to fetch data that is in JSON format.
  • You can then call JSON.parse on it to convert it into an object

ACT 4 XML Task

• Create an XML file that stores product name, category, price, and image location.
• Create a web page similar to Lazada, with a search bar (textbox), and two dropdown boxes:
  • Category = "ALL" -Sort by Price = "Ascending"
• The default page should display all products, filtered when you type text in the search bar.
• The two dropdown boxes should also provide their purpose/function.