ICT1512

Chapter 11
Lesson 6

Working with XML

Creating an
Autocomplete Search
Box
Working with Third-Party
GIF
Exploring Security
Issues with APIs
 Objectives
• You will have mastered the material in this lesson
when you can:
– Retrieve content written in XML.
– Create an autocomplete search box.
– Work with third-party APIs.
– Manage security issues with third-party APIs.
 Working with XML
• XML (Extensible Markup Language): a language
used for structured documents built with markup
tags that are more flexible than those found within
HTML documents
– Widely used in applications such as RSS newsfeeds,
which transmit current news stories to media outlets and
podcasts
• JSON uses nested objects and arrays to
accomplish the same thing more concisely
– More popular for data exchange owing to its smaller file
size and similarity to JavaScript
 Working with XML

Figure 11-22
 Parsing XML Content
• Syntax for parser object used to convert XML text stored
within the body of a server response into an XML DOM
object:
let parser = new DOMParser();
• Syntax to create the XML DOM:
parser.parseFromString(text, mimeType)
– text is the text string to be parsed
– mimeType is the type of structured data, such as text/html,
text/xml, or image/svg+xml
• Sample expression that creates and uses a parser object:
new
DOMParser().parseFromString("headlines.xml",
"text/xml")
 Working with an XML Node Tree
• XML node trees are DOM objects and thus accessible to
the same JavaScript methods used with an HTML DOM,
such as querySelectorAll() and appendChild()
– For the sports blog project, you can use these methods to convert
the XML content from the newsfeed file into an HTML article

• To convert an XML DOM into a text string, you create an

XML serializer object and apply the
serializeToString() method to it:
let serializer = new XMLSerializer();
serializer.serializeToString(dom)
• Sample expression that converts a DOM into a text string:
new XMLSerializer().serializeToString(dom)
 Creating an Autocomplete Search Box

• For the sports blog page, a script that generates a list of

keyword suggestions is invoked using the URL
keywords.pl?suggest=substring, where substring
is a substring of characters used by the script to generate
suggestions
 Working with JSON Data
• The script returns suggested keywords in JSON
format, with individual suggestions stored in the
matches array, e.g.:
{
"matches": ["Seahawks","Senators"]
}
• You apply the json() method to the Fetch
response to parse the JSON text
• You can then handle the parsed JSON data as an
object literal
 Building the Suggestion Box

• You can use the JSON object to write HTML code for a suggestion
box, where json.matches[0], json.matches[1], etc. are the
suggested keywords from the matches array:

<div id="suggestBox">
<div class="suggestion">json.matches[0]</div>
<div class="suggestion">json.matches[1]</div>
…
</div>

• Then, you can add an event handler to insert a suggested word

clicked by the user in the search box, hide the suggestion list, and
run the search function
 GET, POST, PUT, PATCH, and DELETE
• These are the most common HTTP methods used with the Fetch
API
• Each is associated with a specific type of database operation
– GET (the default Fetch option) is used to retrieve data from the server
– POST sends data to the server
– PUT changes existing data in its entirety
– PATCH changes a part of existing data
– DELETE deletes data on the server
• The method name for any HTTP method besides GET must be
included in the message body
• These methods simply instruct a server script to do something that
it knows how to do
 Working with Third-Party APIs
• Websites often incorporate content provided by third parties that
supply APIs that can be accessed via AJAX or Fetch
– Many are freemimum services offered at no cost to the developer if requests
are few
• Requesting a random GIF
– Giphy.com's third-party API provides animated GIFs, but requires an account
and its associated API key to access
• Third-party endpoints
– Third-party services provide several APIs organized by endpoint, a URL
representing the point of contact between the client device and a service
resource
– Requests can be sent to the https://api.giphy.com/v1/gifs/random endpoint
with parameter values enclosed in a template literal
– Information about a random GIF related to a keyword or phrase specified in
the request is returned to the client as a JSON object
 Exploring Security Issues with APIs
• Three approaches are commonly used to manage the same-origin
policy but still allow the transfer of data between websites of
differing origins: CORS, JSONP, and XHR proxies
• Working with CORS
– Cross Origin Resource Sharing (CORS) places information with the HTTP
message header indicating that cross-origin requests are allowed
– The server hosting the resource must include an Access-Control-Allow-
Origin header in the HTTP message it sends to the requesting site, e.g.:
Access-Control-Allow-Origin: https://example.com
– Requests from any domain can be authorized with a * wildcard character, but
if the API client needs to pass authentication headers or cookies, it must
connect as a fully qualified domain (as in the example)
 Using JSONP
• Before CORS, data transfer was managed using JSONP (JSON with
Padding)
• The script element (which is not subject to the same-origin policy)
calls an API running on a server from a different origin, which then
returns request content in JSON format
• The object is treated as the parameter for a callback function
• Syntax for an HTML script element employing the JSONP
approach, where resource is the web address of the resource and
function is the callback function that handles the JSON data
returned:
<script src="resource?callback=function"></script>
• When using this approach you must ensure that the API is not
responding with malicious code
• There is no easy way to determine whether a request failed or for
what reason
 Using XHR with a Proxy
• With this approach, a proxy server is used to handle the
request for your site
• You make the request to another (proxy) server that is a
trusted domain for the resource and that can then pass the
information on to your app
• The app then uses an AJAX request object or Fetch to
make the request of the proxy server and includes
parameters indicating the API that will manage the
response
 Web Developer Job Titles and Roles
• A front-end developer works primarily with HTML, CSSS,
and client-side JavaScript
• A back-end developer works mainly with server-side
languages and libraries such as PHP, Perl, SQL, and
Node.js
• A full stack developer has skills and responsibility for both
client-side and server-side code