Post on 12-Jan-2016
Java Script<html>
<head><title>This is a first JavaScript example</title><script language="javascript">...</script></head>
<body>This is a first JavaScript example.</body>
</html>
Hierarchical ObjectsWindowFrame
LocationHistory
Navigatordocument
imageformtext
XMLHttpRequest ??
Hierarchy Objects
Object Properties Methods Event Handlers Window defaultStatus
framesopenerparentscrollselfstatustopwindow
alertblurcloseconfirmfocusopenpromptclearTimeoutsetTimeout
onLoadonUnloadonBluronFocus
Frame defaultStatusframesopenerparentscrollselfstatustopwindow
alertblurcloseconfirmfocusopenpromptclearTimeoutsetTimeout
none (The onLoad and onUnload event handlers belong to the Window object)
Location hashhosthostnamehrefpathnameporprotocolsearch
reloadreplace
none
History lengthforwardgo
back none
Navigator appCodeNameappNameappVersionmimeTypespluginsuserAgent
javaEnabled none
document alinkColoranchorsappletsareabgColorcookiefgColorformsimageslastModifiedlinkColorlinkslocationreferrertitlevlinkColor
clearcloseopenwritewriteln
none (the onLoad and onUnload event handlers belong to the Window object.
image bordercompleteheighthspacelowsrcnamesrcvspacewidth
none none
form actionelementsencodingFileUploadmethodnametarget
submitreset
onSubmitonReset
text defaultValuenametypevalue
focusblurselect
onBluronChargeonFocusonSelect
Built-in Objects
ArrayData
String
Built-in Objects
Object Properties Methods Event Handlers
Array length joinreversesort xx
none
Date none getDategetDaygetHoursgetMinutesgetMonthgetSecondsgetTimegetTimeZoneoffsetgetYearparseprototypesetDatesetHourssetMinutessetMonthsetSecondssetTimesetYeartoGMTStringtoLocaleStringUTC
none
String lengthprototype
anchorbigblinkboldcharAtfixedfontColorfontSizeindexOfitalicslastIndexOflinksmallsplitstrikesubsubstringsuptoLowerCasetoUpperCase
Window
XMLHttpRequest Object Properties for Mozilla, Firefox, Netscape, Chrome
Property Description
channel Contains the channel used to perform the request. Read-only.
readyState Contains the state of the request. Read-only.
responseText Contains the response body as a string. Read-only.
responseXML Contains the response body as XML. Read-only.
status Contains the HTTP status code returned by a request. Read-only.
statusText Contains the HTTP response status text. Read-only.
XMLHttpRequest Object Methods for Mozilla, Firefox, Netscape, Chrome
MethodoverrideMimeType
Description
abort abort Aborts the HTTP request.
getAllResponseHeaders getAllResponseHeaders
Returns all the HTTP headers.
getResponseHeadergetResponseHeader
Returns the value of an HTTP header.
openRequestOpen / send / setRequestHeader
Native (nonscript) method to open a request.
OverrideMimeType Overrides the MIME type the server returns.
Opening XMLRequest Object
• open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])
• XMLHttpRequestObject.open(“GET”, datasource);
A in ajax stands for asynchronous• handshaking
function getData(dataSource, divID){if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("GET", dataSource);XMLHttpRequestObject.onreadystatechange = callback()
}}
function callback(){...}
Shortcut for callback()function getData(dataSource, divID)
{if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("GET", dataSource);XMLHttpRequestObject.onreadystatechange = function(){
.
.
.}
}}
Ready state property
status
ajax
ajax
–Asynchronous JavaScript and XML–Umbrella term for technologies that often:
•Use client-side scripting for layout and formatting•Use less than full page reloads to change content•Use data formats other than HTML•Interact asynchronously with the server
–Not necessarily JavaScript or XML, but we’ll use the term for convenience
MySpaceTraffic
Request:GET http://profile.myspace.com:80/index.cfm?fuseaction=user.viewprofile&friendid=32732620&MyToken=fcf392cd-2a35-4cc2-86fa-cb24b7a330dd HTTP/1.0
Response:
<!---*** WEBPROFILE045 *** ---><html><head><title>www.myspace.com/oskibear</title><meta name="keywords" content="friends networking sharing photos finding friends blogsjournals bloggingjournaling bands music rate picsjoin groups forums classifieds online social networking" /><meta name="description" content="MySpaceProfile -Oski, 64 years old, Male, Berkeley, CALIFORNIA, US, Grrrrrrah!" /><meta http-equiv="expires" content="0" /><meta http-equiv="Pragma" content="no-cache" /><link rel="STYLESHEET" type="text/css" href="http://x.myspace.com/js/myspace.css" /><script language="JavaScript">randomseed= Date.parse(newDate());</script><script language="JavaScript" type="text/javascript" src="http://x.myspace.com/js/myspaceJS011.js"></script><BASE HREF="http://www.myspace.com/" TARGET="_self"></BASE></head><body bgcolor="e5e5e5" alink="4e607b" link="4e607b" vlink="4e607b" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0" style="visibility:visible; display:block">….…………
Google Maps Traffic
Request:GET http://maps.google.com:80/maps?
spn=0.001247,0.002427&z=19&t=k&vp=37.871279,-122.251825&ev=ziHTTP/1.0
Response:GAddCopyright("k","483",37.4855,-122.6324,38.1363,
-122.2355,12,"");GAddCopyright("k","484",37.4825,-122.2761,38.1346,
-121.8590,12,"");
Ajax in 5 steps
ajax History
•Before there was browser support for asynchronous calls:–There were hidden <IFrame>
•IFramestraditionally used to dynamically •IFrameset to 0px, invisible to the user•Used to GET/POST form fields to the server
•Example:<IFRAME style="DISPLAY: none; LEFT: 0px; POSITION: absolute; TOP: 0px" src="http://www.badguy.com/" frameBorder="0“ scrolling="no"><form action=‘evil.cgi' method='POST'><input type='text' name='field1' value='foo'><input type='text' name='field2' value='bar'> </form></iframe>
Real ajax Started with…–XMLHttpRequestObject (often called XHR)•In Internet Explorer, XMLHttpobject, part of MSXML
–ActiveX object, vsnative object in Firefox–Will be implemented as a native object in IE 71
•Instantiation: if (window.XMLHttpRequest){// If IE7, Mozilla, Safari, etc: Use native objectvarxmlHttp= new XMLHttpRequest()}else {if (window.ActiveXObject){// ...otherwise, use the ActiveX control for IE5.x and IE6varxmlHttp= new ActiveXObject("Microsoft.XMLHTTP"); }}
• XMLHttpRequest (XHR) is a DOM API that can be used inside a web browser scripting language, such as JavaScript, to send an HTTP or an HTTPS request directly to a web server and load the server response data directly back into the scripting language.
• Once the data is within the scripting language, it is available as both an XML document, if the response was valid XML markup, and as plain text.
Example AJAX requestxmlHttp= new XMLHttpRequest();xmlHttp.open("GET", “http://www.example.com”);xmlHttp.onreadystatechange= updatePage;xmlHttp.send(null);
Example AJAX response handlingfunction updatePage() {
if (xmlHttp.readyState== 4) {if (request.status== 200) {varresponse = xmlHttp.responseText;
}}
}
Downstream Options•The real beauty of XHR
–Arbitrary structure of content•Not restricted like HTML Forms
–Asynchronous Communication, including callbacks•XHR can handle many types of downstream (from
server) data–XML–Full JavaScript–JavaScript Arrays–JSON–Custom Serialization Frameworks
•Atlas•Google Web Toolkit
• The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting withobjects in HTML, XHTML and XML documents. Aspects of the DOM (such as its "Elements") may be addressed and manipulated within the syntax of the programming language in use