Javascript,

JQuery, and AJAX

CITS3403 Agile Web Develpopment

Unit Coordinator: Tim French 2022 Semester 2

 Regular Expressions

• Regular expressions are used to specify patterns in strings

• JavaScript provides two methods to use regular expressions in pattern
matching
– String methods
– RegExp objects (not covered in the text)
• A regular expression pattern is indicated by enclosing the pattern in slashes
• The search method returns the position of a match, if found, or -1 if no
match was found
• The replace method can replace a pattern with a different string.
 Example Using search

var str = "Rabbits are furry";

var position = str.search(/bits/);
if (position > 0)
console.log("'bits' appears in position",
position, "<br />");
else
console.log(
"'bits' does not appear in str <br />");

• This uses a pattern that matches the string ‘bits’

• /bits/ is a javascript object the describes a regular expression
• The output of this code is as follows:
– 'bits' appears in position 3
 Characters and Character-Classes

• Metacharacters have special meaning in regular expressions

• \ | ( ) [ ] { } ^ $ * + ? .
– May be used literally by escaping them with \
• Other characters represent themselves
• A period matches any single character
– /f.r/ matches for and far and fir but not fr

• A character class matches one of a specified set of characters

– [character set]
– List characters individually: [abcdef]
– Give a range of characters: [a-z]
– Beware of [A-z]
– ^ at the beginning negates the class
Predefined character classes
 Repeated Matches

• A pattern can be repeated a fixed number of times by following it with

a pair of curly braces enclosing a count
• A pattern can be repeated by following it with one of the following
special characters
– * indicates zero or more repetitions of the previous pattern
– + indicates one or more of the previous pattern
– ? indicates zero or one of the previous pattern
• Examples
• /\(\d{3}\) *\d{4} *\d{4}/ might represent a telephone number
• /[$_a-zA-Z][$_a-zA-Z0-9]*/ matches identifiers
 Anchors

• Match positions rather than characters

– Anchors are 0 width and may not take multiplicity modifiers
• Anchoring to the ends of a string
– ^ at the beginning of a pattern matches the beginning of a string
– $ at the end of a pattern matches the end of a string
• The $ in /a$b/ matches a $ character
• Anchoring at a word boundary
– \b matches the position between a word character and a non-word
character or the beginning or the end of a string
– /\bthe\b/ will match ‘the’ but not ‘theatre’ and will also match ‘the’
in the string ‘one of the best’
 Pattern Modifiers

• Pattern modifiers are specified by characters that follow the closing / of a

pattern
• Modifiers modify the way a pattern is interpreted or used
• The x modifier causes whitespace in the pattern to be ignored
– This allows better formatting of the pattern
– \s still retains its meaning
– (but only in perl…. I’m not sure why this is here?)
• The javascript modifers are
– i, match case insensitive
– g, global match, find all matches
– m, multiline macthing.
• eg
var str = "Rabbits are furry";
var position = str.search(/rab*/i);
 Other Pattern Matching Methods

• The replace method takes a pattern parameter and a string parameter

– replaces a match of the pattern in the target string with the second parameter
– A g modifier on the pattern causes multiple replacements

var str = “low, lower, lowest”;

str.replace(/low/g, “high”);

• Parentheses can be used in patterns to mark sub-patterns

– The pattern matching machinery will remember the parts of a matched string that
correspond to sub-patterns
• The match method takes one pattern parameter
– With a g modifier, the return is an array of all matches
– Without a g modifier, the return is an array of the match and parameterized
(parenthesised) sub-matches

var str=”CITS3403 is the best in 2019”;

var matches = str.match(/\d/g); // [3,4,0,3,2,0,1,7]
matches = str.match(/(\d+)([^\d+])(\d+)/);
// [“3403 is the best in 2019”]

9
 jQuery

• jQuery is the most popular javascript library in the world.

• It was built by John Resig in 2006, and is available on the MIT license.
• The jQuery library has features for
l HTML/DOM manipulation

l CSS manipulation

l HTML event handling

l Effects and animations

l AJAX message handling

l Some utilities

• jQuery, like Bootstrap, is most commonly accessed through a CDN:

 jQuery Syntax

• Basic jQuery syntax is $(selector).action(), where:

l $ is an abbreviation for jQuery. It can be changed using $.noConflict()

l selector is a query to find HTML elements, much like in CSS

l action is a jQuery function to be applied to the selected elements.

 jQuery Events
• jQuery event notation assigns a javascript
function to DOM events.
• For example to assign a click event to all
paragraphs, we would use:
• $(“p”).click(function(){//code});
• jQuery events also include
$(document).ready()to force jQuery to
wait until the document is fully loaded.
• The on() method allows multiple events to be
assigned to a given selector.
 jQuery Effects

• jQuery implements some useful effects, including hide, show, fade, slide
and animate.

These methods work by

changing the display attribute
of an element.
 jQuery DOM
• jQuery can select elements and classes in the DOM, traverse the DOM, get
and set elements and attributes of the DOM, and add or remove elements.
• You can get the text, raw html, or value of a field with the methods text(),
html() and val().
• You can access the attributes of an element with the method attr(label)
• You can modify elements with text(newText), html(newHTML) and
val(newVal)
• You can modify the attributes of an element with the method
attr(label,new value)
• You can append, prepend, insert before and after with the functions
append, prepend before and after.
 jQuery Filters
• Using selectors, ids, names, and the DOM structure you can selector a
number of elements.

• jQuery can also filter results, tables, lists and paragraphs:

 Message Passing in Javascript

• So far the javascript we have seen responds to local events in the browser,
such as users clicking buttons, pages loading, mouse movements etc.
• However, we often want to respond to to remote events, such as someone
sending you a message, liking a post etc.
• We also may want to dynamicallystrespond to a local event using global
information: if a user enters the 1 of April as a prefered appointment date,
then we would like to immediately show them the available appointments.
• We could send the date to the server, have the server rebuild the page and
send the entire page back, but we only required a few bytes of data.
 AJAX vs WebSockets
• There are several technologies to solve these problems
• AJAX stands for Asynchronous Javascript And XML (eXtensible Markup
Language), and is really an approach rather than a technology.
• AJAX was coined in 2005 by Jesse James Garrett, using asynchrous http
requests to a remote server and receiving XML data which could be parsed
using javascript and dyanmically update a webpage, using the DOM.
• Each AJAX request is a single http protocol exchange, and is done
asynchronously, so that waiting for a response does not freeze the
environment.
• The server will send the response as a data object (XML or JSON), which
can then be factored into the current page.
• Websockets (2011) maintain an open two way connection between a
program running on a broswer, and a server, allowing the continual
exchange of data.
• We will focus on AJAX for now, as it is the more fundamental technology.
 Asynchrony

• When we make a request to a service in javascript, we do not know when, if

ever the server will respond.
• Javascript is single threaded, so it must execute each statement in order.
• The environment Javascript runs in is not single threaded, so we can write a
function, with a function as a parameter, which will be executed when and if
the server responds.
• Object.asyncFn(parameters, callbackFunction)
• The callback function takes parameters, for errors or the response
generated, and executes them.
 XML vs JSON
• For a javascript function to communicate directly with a server, we require a
universal format to transmit data. The two most common forms are XML and
JSON.
• XML is eXtensible Markup Langauage and is similar in form to HTML. All
data is contained in a tree of named tags. It is designed to be as general as
possible, it only contains data and does not execute, and is favoured by
academics.
• JSON is JavaScript Object Notation and stores data in the syntax of
javascript: specifically the structural object declaration required to create the
object instance representing the data
• JSON is more succinct and can contain arrays, but should not include
functions. Both XML and JSON are interpretted by parsers (JSON.parse)
 Client Server Architecture
• When Javascript running in the browser requires a service running on a
server, we are using a client-server-architecture.
•
• The client sends a request to the server, the server recieves the request,
formulates and sends a response, and then forgets every thing about the
exchange (stateless).

l In the HTTP protocol, requests

have a specific form , specifying
the method (GET, POST,
UPDATE, DELETE) and URL,
come with a header and a
message body.

l A response reports the status (200

OK, 404 file not found), has a
header and a message body.
 XMLHTTP requests
• Modern browsers have an XMLHTTP request object to handle requests to,
and responses from a remote server.
• The object is initialised, and then opens a connection to a server. The send
method sends the request to the server, and when the server responds, the
status and response can be accessed as properties.
• Browsers only handle GET and POST requests.
 HTTP requests continued

• Requests maybe either GET or POST. Http allows other request methods
(DELETE, PUT) but these are not implemented by most browsers.
• A GET request is used to retrieve data from a server, such as loading a
webpage, and a POST request is used to send data to a server, such as
submitting a form.
• All requests should be done asynchronously so they do not block other
scripts running.
• An asynchronous request has a readystate property describing the progress
of the request, and an onreadystatechange callback function, that is
executed when the readystate changes.
 HTTP responses

• The request changes state when the server responds, and the response is
accessibile as a property of the request (responseText or responseXML)

l As with the request, the

response has a status, the
status text, and a header,
which is a set of value key
pairs.
l The header can be used to
set parameters and cookies
etc.
l It is accessible via the
getResponseHeader
function
HTTP response codes
 jQuery and AJAX
• We can build XMLRequest objects directly, but jQuery provides some basic
functionality for us, and pairs it directly with the DOM.
• The load function will send a GET request to a url, and load the data directly
into an HTML element
• The get function will send a GET request to a url, and passes the data to a
callback function.
• The post function will send a POST request, with data to a url and passes
the response to a callback function.
 AJAX Callbacks

• The following is a sequence diagram for an AJAX request

Example
 Single Page Applications
• Single Page Applications have the browser/client do the heavy lifting in a
web application: The server just provides the data while the client does the
logic and rendering
Application Architectures
 Pros and Cons
Pros
• Less load on the server, able to respond to more clients.
• A more responsive client. No need to wait for server responses.
• Genuine separation between content and presentation.

Cons
• Longer load time, first up. A lot of JS has to be transferred.
• SEO can be a problem. Robots won’t crawl js.
• Navigation can be an issue.

To use AJAX or build single

page applications, we need to
be able to configure the server
to handle different requests.
So next lecture we’ll move on
to looking at the back end.