Ajax Hacks Sample

Embed Size (px)

Citation preview

01

chapter

Ajax Hacks #1~#11

(world wide wait) . . , , , , , , , ... . ( ) . , . . . . . ?

Ajax Hacks :

. . Ajax . Ajax Asynchronous JavaScript and XML . Ajax , . Ajax . : . ( ). .

XMLHttpRequest : API HTTP (connect) . Ajax ,

( , 6, 1.3, 2.0, 7.6) . Ajax (asynchronous) .* XML(eXtensible Markup Language) : (Language) . XMLHttpRequest XML . HTML CSS(Cascading Style Sheets) : . HTML CSS . DOM(Document Object Model) : DOM XML . , , , . HTML ( ). DOM . XSLT(eXtensible Stylesheet Language and Transformation) : XML .

[*] XMLHttpquest . , . XMLHttpquest .

24

1. Ajax

Ajax . , 5.0 HTTP (XMLHTTP ) ( IE 6, 7 ).

Ajax Web 2.0 Ajax Rich Internet Application( . RIA )

, , (Zimbra), (Rollyo, http://www.rollyo.com), (http://map.search.ch/index.en.html) Web 2.0 . Ajax

. .http://en.wiki pedia.org/wiki/List_of_websites_using_Ajax.

Ajax . Ajax . URL . [Hack #68] RSH < Ajax , ( [Hack > #69] ).

Ajax (Form) select , textarea, text , ( ) . Ajax , .

XMLHttpRequest XMLHttpRequest .

25

Ajax Hacks :

. API , API .[Hack #1] .

, .

. XMLHttpRequest open( ), send( ), abort( ) .

XMLHttpRequest (property) (IE 5.0 , 1.3, 2.0, 7, 7.6 ) .

* .onreadystatechange :

readyState .readyState :

0 : uninitialized(open( ) ) 1 : loading(send( ) ) 2 : loaded(send( ) . header status ) 3 : interactive(reponseText ) 4 : completedresponseText :

[*] XMLHttpRequest onload, onprogress, onerror . addEventListener( ), dispatchEvent( ), overrideMimeType( ), removeEventListenner( ) . http://www.xulplanet.com/references/objref/XMLHttpRequest. html .

26

HACK

1. Ajax

#1

responseXML : DOM

XMLstatus :

200(Okay), 404(Not Found) statusText :

HTTP

.abort() : void

HTTP .getAllResponseHeaders() : [Hack #9] ). ( HTTP

getResponseHeader(string header) :

.open(string method,string url,boolean asynch) : void

HTTP / .send(string) : void

HTTP .setRequestHeader(string header,string value) : void

. open( ) .

HACK

#1

. Ajax

27

HACK

#1

Ajax Hacks :

, . HTTP Ajax . (, ) XMLHttpRequest. IE . IE 5.0 IE Microsoft.XMLHTTP( Msxml2.XMLHTTP) ActiveX .

Microsoft.XMLHTTP Msxml2.XMLHTTP MSXML . IE . Microsoft.XMLHTTP , ActiveX Object Prog.ID . MSXML 1.0. IE 6 MSXML 1.0 . MSXML 1.0 . MSXML2.XMLHTTP , MSXML 2.0 . - MSXML2.XMLHTTP.4.0 MSXML2.XMLHTTP.5.0 - .

IE , (request object) . Ajax ( ,ActiveX ) .

HTTP . 7.1 1.5

28

HACK

1. Ajax

#1

Window . window.XMLHttpRequest. .if(window.XMLHttpRequest){ request = new XMLHttpRequest(); request.onreadystatechange=handleResponse; request.open("GET",theURL,true); request.send(null); }

request .

Prototype Ajax.Request (6 ).

XMLHttpRequest if(widows.XMLHttpRequest) : XMLHttpRequest null undefined true . new . onreadystatechange handleResponse( ) ( XMLHttpRequest ).

open( ), send( ) .

?

, IE 7 XMLHttpRequest .

29

HACK

#1

Ajax Hacks :

windows.XMLHttpRequest . .else if (window.ActiveXObject){ request=new ActiveXObject("Microsoft.XMLHTTP"); if (! request){ request=new ActiveXObject("Msxml2.XMLHTTP"); } if(request){ request.onreadystatechange=handleResponse; request.open(reqType,url,true); request.send(null); } }

window ActiveXObject . program ID(Microsoft.XMLHTTP Msxml2.XMLHTTP) .

IE , Msxml2.XMLHTTP.4.0 . MSXML . . (if (request) {...}) . request null undefined Ajax . ./* : reqType: HTTP . GET POST url: URL asynch: */ function httpRequest(reqType,url,asynch){ // if(window.XMLHttpRequest){30

HACK

1. Ajax

#2

request = new XMLHttpRequest(); } else if (window.ActiveXObject){ request=new ActiveXObject("Msxml2.XMLHTTP"); if (! request){ request=new ActiveXObject("Microsoft.XMLHTTP"); } } // ActiveXObject request null if(request){ initReq(reqType,url,asynch); } else { alert( "Your browser does not permit the use of all "+ "of this application's features!"); } } /* */ function initReq(reqType,url,bool){ /* HTTP */ request.onreadystatechange=handleResponse; request.open(reqType,url,bool); request.send(null); }[Hack #2] XMLHttpRequest POST

POST .

HACK

POST POST

#2

, POST HTTP . Ajax POST .

31

HACK

#2

Ajax Hacks :

. . POST , POST . ( ) . . , , POST . [ 1-1] .

[ 1-1] POST

HTML . Send a data tidbit A Few Facts About Yourself...

32

HACK

1. Ajax

#2

First name: Last name: Gender: Country of origin: Send Data

action= javascript:void%200 . action . URL javascritp:void 0 . void 0 %20 . ? action URL , . action= .

(hack2.js ) . onsubmit sentData( ) . POST (setQueryString( ) ) . [Hack text textarea #22] ). (

. hack2.js . setQueryString( ) .function setQueryString(){ queryString=" "; var frm = document.forms[0]; var numberElements = frm.elements.length; for(var i = 0; i < numberElements; i++) { if(i < numberElements-1) { queryString += frm.elements[i].name+"="+

33

HACK

#2

Ajax Hacks :

encodeURIComponent(frm.elements[i].value)+"&"; } else { queryString += frm.elements[i].name+"="+ encodeURIComponent(frm.elements[i].value); } } }

POST . = & . .firstname=Bruce&lastname=Perry&gender=M&country=USA

POST HTTP HTTP . onsubmit sendData( ) .var request; var queryString; // POST . function sendData(){ setQueryString(); var url="http://www.parkerriver.com/s/sender"; httpRequest("POST",url,true); } /* : reqType: HTTP . GET POST url: URL isAsynch: , */ function initReq(reqType,url,isAsynch){ /* HTTP */ request.onreadystatechange=handleResponse; request.open(reqType,url,isAsynch); /* POST Content-Type */ request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); request.send(queryString); }

34

HACK

1. Ajax

#2

/* Parameters: reqType: HTTP . GET POST url: URL asynch: , */ function httpRequest(reqType,url,asynch){ // if(window.XMLHttpRequest){ request = new XMLHttpRequest(); } else if (window.ActiveXObject){ request=new ActiveXObject("Msxml2.XMLHTTP"); if (! request){ request=new ActiveXObject("Microsoft.XMLHTTP"); } } // ActiveXObject request null if(request){ initReq(reqType,url,asynch); } else { alert("Your browser does not permit the use of all "+ alert("of this application's features!"); } }

httpRequest( ) ([Hack #1] ). initReq( ) .

. request.onreadystatechange=handleResponse; . . open( ) .

open( ) . , POST Content-Type .

35

HACK

#2

Ajax Hacks :

Content-Type , 1.3 ( 1.02 ). , POST .

POST .request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); request.send(queryString);

queryString .send("firstname=Bruce&lastname=Perry&gender=M&country=USA");

. handleResponse( ) . initReq( ) .request.onreadystatechange=handleResponse;

readyState 4, , HTTP 200 . 200 HTTP . responsText . , . .//XMLHttpRequest function handleResponse(){

36

HACK

1. Ajax

#2

if(request.readyState == 4){ if(request.status == 200){ alert(request.responseText); } else { alert("A problem occurred with communicating between "+ alert("the XMLHttpRequest object and the server program."); } }// if }

[ 1-2] .

[ 1-2] !

POST XML . . POST param . . .protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { Map reqMap = httpServletRequest.getParameterMap(); String val=null; String tag = null; StringBuffer body = new StringBuffer("\n"); boolean wellFormed = true; Map.Entry me = null; for(Iterator iter= reqMap.entrySet().iterator();iter.hasNext();) { me=(Map.Entry) iter.next();

37

HACK

#3

Ajax Hacks :

val= ((String[])me.getValue())[0]; tag = (String) me.getKey(); if (! XMLUtils.isWellFormedXMLName(tag)){ wellFormed=false; break; } body.append(""). append(XMLUtils.escapeBodyValue(val)). append("\n"); } if(wellFormed) { body.append(""); sendXML(httpServletResponse,body.toString()); } else { sendXML(httpServletResponse,""); } }

Jakarta Commons Betwixt XMLUtils . , XML . POST (name na< >me ) , XML .

HACK

#3

XMLHttpRequest

Ajax , XMLHttpRequest . , . http_request.js , XML

38

HACK

1. Ajax

#3

HttpRequest .

http_request.js .var request = null; /* : reqType: HTTP . GET POST url: URL asynch: respHandle: (arguments[4]) POST */ function httpRequest(reqType,url,asynch,respHandle){ // if(window.XMLHttpRequest){ request = new XMLHttpRequest(); } else if (window.ActiveXObject){ request=new ActiveXObject("Msxml2.XMLHTTP"); if (! request){ request=new ActiveXObject("Microsoft.XMLHTTP"); } } // if(request) { //reqType POST 5 if(reqType.toLowerCase() != "post") { initReq(reqType,url,asynch,respHandle); } else { //POST var args = arguments[4]; if(args != null && args.length > 0){ initReq(reqType,url,asynch,respHandle,args); } } } else { alert("Your browser does not permit the use of all "+ alert("of this application's features!"); } }39

HACK

#3

Ajax Hacks :

/* */ function initReq(reqType,url,bool,respHandle){ try{ /* HTTP */ request.onreadystatechange=respHandle; request.open(reqType,url,bool); //reqType POST 5 if(reqType.toLowerCase() == "post") { request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); request.send(arguments[4]); } else { request.send(null); } } catch (errv) { alert( "The application cannot contact "+ "the server at the moment.\n"+ "Please try again in a few seconds.\n"+ "Error detail: "+errv.message); } }

4~5 httpRequest( ) . . .var _url = "http://www.parkerriver.com/s/sender"; var _data="first=Bruce&last=Perry&middle=W"; httpRequest("POST",_url,true,handleResponse,_data);

. POST .

POST HTTP POST . GET / URL .

40

HACK

1. Ajax

#3

POST , 4 . (, http_request.js ) . . HTTP .var _url = "http://www.parkerriver.com/s/sender"; // httpRequest("POST",_url,true,function(){alert(request.responseText);});[Hack httpRequest( ) #1] ,

XMLHttpRequest . initReq( ) onreadystatechange open( ), send( ) HTTP . try/catch . , URL open( ) , try/catch . http_request.js , request .

var request request . request .function handleResponse(){ var request = null; try{ if(request.readyState == 4){ if(request.status == 200){...

41

HACK

#4

Ajax Hacks :

HACK

XML Ajax DOM Document .

#4

XML , XML . XML . ( ) GPS (GlobalPositioning System) . GPS

USB . GPS XML. XML GPS . XML , . XML . XML XML ( (meta))

. . Garmin Forerunner 301

gps gpsMaker gpsDevice . Ajax XML . XML (WebService) . HTTP ,

responseXML . Ajax DOM

42

HACK

1. Ajax

#4

. .function handleResponse(){ if(request.readyState == 4){ if(request.status == 200){ var doc = request.responseXML; ... }

doc DOM . API . XML XML DOM .

XML , request.responseText .

[Hack #2] HTML POST

. XML div . HTML . Receive XML response A Few Facts About Yourself... First name: Last name: Gender: Country of origin:

43

HACK

#4

Ajax Hacks :

Send Data

[ 1-3] .

[ 1-3] XML

hack3.js POST . XML . [Hack#22]

.

. , Bruce / [Hack POST #2] .

. Ajax XML .var request; var queryString; //POST

function sendData(){

44

HACK

1. Ajax

#4

setQueryString(); var url="http://www.parkerriver.com/s/sender"; httpRequest("POST",url,true); } //XMLHttpRequest function handleResponse(){ if(request.readyState == 4){ if(request.status == 200){ var doc = request.responseXML; var info = getDocInfo(doc); stylizeDiv(info,document.getElementById(""docDisplay"")); } else { alert( ""A problem occurred with communicating between ""+ alert( ""the XMLHttpRequest object and the server program.""); } }// if } /* */ function initReq(reqType,url,bool){ /*HTTP */ request.onreadystatechange=handleResponse; request.open(reqType,url,bool); request.setRequestHeader(""Content-Type"", ""application/x-www-form-urlencoded; charset=UTF-8""); /* */ //request.overrideMimeType(""text/xml""); request.send(queryString); } /* : reqType:HTTP . GET POST url: URL asynch: */ function httpRequest(reqType,url,asynch){ // Hack #1 } function setQueryString(){ queryString=""; var frm = document.forms[0];45

HACK

#4

Ajax Hacks :

var numberElements = frm.elements.length; for(var i = 0; i < numberElements; i++) { if(i < numberElements-1) { queryString += frm.elements[i].name+"="+ encodeURIComponent(frm.elements[i].value)+"&"; } else { queryString += frm.elements[i].name+"="+ encodeURIComponent(frm.elements[i].value); } } } /* div . */ function stylizeDiv(bdyTxt,div){ //DIV div.innerHTML=""; div.style.backgroundColor="yellow"; div.innerHTML=bdyTxt; } /*DOM Document XML document */ function getDocInfo(doc){ var root = doc.documentElement; var info = "Document root element name: "+ root.nodeName; var nds; if(root.hasChildNodes()) { nds=root.childNodes; info+= "Root node's child node names/values:"; for (var i = 0; i < nds.length; i++){ info+= nds[i].nodeName; if(nds[i].hasChildNodes()){ info+= " : \"+nds[i].firstChild.nodeValue+"\"
"; } else { info+= " : Empty
"; } } } return info; }

46

HACK

1. Ajax

#4

request.overrideMimeType( text/xml request. ) overrideMimeType( ) mime . 1.3 .

POST , getDocInfo( ) . XML .var doc = request.responseXML; var info = getDocInfo(doc);

getDocInfo( ) XML (var root = doc.documentElement;). / .

stylizeDiv( ) sytlizeDiv( ) HTML div .function stylizeDiv(bdyTxt,div){ //div div.innerHTML=""; div.style.backgroundColor="yellow"; div.innerHTML=bdyTxt; }

[ 1-4] XML .

text XML .

47

HACK

#5

Ajax Hacks :

[ 1-4] XML

DOM API XML .

HACK

, , XML

#5

XML , request.responseText . . .

48

HACK

1. Ajax

#5

. HTML . XMLHttp[Hack #39] . Request

HTML. hack9.js . Choose a stock Stock prices Enter stock symbol: Get Stock Price

[ 1-5] . GRMN . span . getStockPrice( ). stSymbol ( ). .

49

HACK

#5

Ajax Hacks :

[ 1-5]

var request; var symbol;

//

function getStockPrice(sym){ symbol=sym; if(sym){ var url="http://localhost:8080/parkerriver/s/stocks?symbol="+sym; httpRequest("GET",url,true); } } // XMLHttpRequest function handleResponse(){ if(request.readyState == 4){ if(request.status == 200){ /* */ var stockPrice = request.responseText; var info = "The price is: $"+stockPrice+""; document.getElementById("stPrice").style.fontSize="0.9em"; document.getElementById("stPrice").style. backgroundColor="yellow"; document.getElementById("stPrice").innerHTML=info; } else { alert("A problem occurred with communicating between "+ alert("the XMLHttpRequest object and the server program."); } }// if }

50

HACK

1. Ajax

#6

/* httpRequest() Hack #1 . . */

getStockPrice( ) httpRequest( ) . handle Res ponse( ) .

[Hack #1] XMLHttpRequest [Hack #3]

httpRequest( ) .

(request.readyState 4) HTTP 200( ) , request.responseText . DOM . CSS .document.getElementById("stPrice").style.fontSize="0.9em"; document.getElementById("stPrice").style.backgroundColor="yellow"; document.getElementById("stPrice").innerHTML =info;

, . span innerHtml .

HACK

#6

, . .51

HACK

#6

Ajax Hacks :

Ajax . . . undefined . . . . [ 1-6] .

[ 1-6]

HTML . Tally your stocks Your total Stock Holdings

52

HACK

1. Ajax

#6

Enter stock symbol: Enter share amount: Get Total Value

, onsubmit . getStockPrice( ) false (submit) .

, HTML hack4.js .var request; var symbol; // var numberOfShares; function getStockPrice(sym,shs){ if(sym && shs){ symbol=sym; numberOfShares=shs; var url="http://localhost:8080/parkerriver/s/stocks?symbol="+sym; httpRequest("GET",url,true); } } //XMLHttpRequest function handleResponse(){ if(request.readyState == 4){ alert(request.status); if(request.status == 200){ /* . */ var stockPrice = request.responseText;

53

HACK

#6

Ajax Hacks :

try{ if(isNaN(stockPrice)) { throw new Error( "The returned price is an invalid number.");} if(isNaN(numberOfShares)) { throw new Error( "The share amount is an invalid number.");} var info = "Total stock value:"+ calcTotal(stockPrice); displayMsg(document. getElementById("msgDisplay"),info,"black"); document.getElementById("stPrice").style.fontSize="0.9em"; document.getElementById("stPrice").innerHTML ="price: "+stockPrice; } catch (err) { displayMsg(document.getElementById("msgDisplay"), "An error occurred: "+ err.message,"red"); } } else { alert( "A problem occurred with communicating between the "+ "XMLHttpRequest object and the server program."); } }// if } /* httpRequest() initReq() Hack #1 #2 . . */ function calcTotal(price){ return stripExtraNumbers(numberOfShares * price); } /* 4 */ function stripExtraNumbers(num){ // var n2 = num.toString(); if(n2.indexOf(".") == -1) { return num; } // 4 parseFloat if(typeof num == "string"){ num = parseFloat(num).toFixed(4); } else { num = num.toFixed(4); }54

HACK

1. Ajax

#6

// 0 return parseFloat(num.toString().replace(/0*$/,"")); } function displayMsg(div,bdyText,txtColor){ //DIV div.innerHTML=""; div.style.backgroundColor="yellow"; div.style.color=txtColor; div.innerHTML=bdyText; }

handleResponse( ). var stockPrice = request.responseText stockPrice . API isNaN( )(Not a Number) stockPrice , goodbye . ,( ) isNaNgoodbye true .

. true ( ) . . ! . .

[Hack #8] . Ajax

. calcTotal( ) . stripExtraNumbers( )

55

HACK

#6

Ajax Hacks :

.

10.9876 , .

DOM DOM(Document Object Model) . . handleResponse( ) displayMsg( ) . . id stPrice div innerHTML .displayMsg(document.getElementById("msgDisplay"),info,"black"); document.getElementById("stPrice").style.fontSize="0.9em"; document.getElementById("stPrice").innerHTML ="price: "+stockPrice;

displayMsg( ) . , .function displayMsg(div,bdyText,txtColor){ //DIV div.innerHTML=""; div.style.backgroundColor="yellow"; div.style.color=txtColor; div.innerHTML=bdyText; }

[ 1-7] .

56

HACK

1. Ajax

#7

[ 1-7]

[ 1-8] , .

[ 1-8]

HACK

JSON Ajax JSON(JavaScript Object Notation)

#7

Ajax ? JSON(JavaScript Object Notation) . , JSON .57

HACK

#7

Ajax Hacks :

JSON . JSON . JSON . JSON . ({ ) (:) , : (,) ( })

.hello [1,2,3,4] true, false, null .

http://www.json.org .

JSON . [Hack #2] JSON POST

.{ firstname:"Bruce", lastname:"Perry", gender:"M", country:"USA" }

58

HACK

1. Ajax

#7

JSON [Hack #2] POST

HTML , . Ajax JSON . div JSON . HTML . Receive JSON response A Few Facts About Yourself... First name: Last name: Gender: Country of origin: Send Data

[ 1-9] .

59

HACK

#7

Ajax Hacks :

[ 1-9] JSON

hack5.js . POST . [Hack #2] .

XSS(cross-site scripting) . eval( ) . , eval( ) responseText (http://www. perl.com/pub/a/2002/02/20/css.html ).

. .var request; var queryString; //POST

60

HACK

1. Ajax

#7

function sendData(){ setQueryString(); url="http://localhost:8080/parkerriver/s/json"; httpRequest("POST",url,true); } // XMLHttpRequest function handleJson(){ if(request.readyState == 4){ if(request.status == 200){ var resp = request.responseText; var func = new Function("return "+resp); var objt = func(); var div = document.getElementById("json"); stylizeDiv(resp,div); div = document.getElementById("props"); div.innerHTML="In object form..."+ div.innerHTML="Propertiesfirstname= "+ div.innerHTML=objt.firstname +"
lastname="+ div.innerHTML=objt.lastname+ "
gender="+ div.innerHTML=objt.gender+ "
country="+ div.innerHTML=objt.country; } else { alert("A problem occurred with communicating between "+ alert("the XMLHttpRequest object and the server program."); } }// if } /* */ function initReq(reqType,url,bool){ /* HTTP */ request.onreadystatechange=handleJson; request.open(reqType,url,bool); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); request.send(queryString); } /* : reqType: HTTP . GET POST61

HACK

#7

Ajax Hacks :

url: URL asynch: */ function httpRequest(reqType,url,asynch){ // Hack #1, #2 } function setQueryString(){ queryString=""; var frm = document.forms[0]; var numberElements = frm.elements.length; for(var i = 0; i < numberElements; i++){ if(i < numberElements-1){ queryString += frm.elements[i].name+"="+ encodeURIComponent(frm.elements[i].value)+"&"; } else { queryString += frm.elements[i].name+"="+ encodeURIComponent(frm.elements[i].value); } } } function stylizeDiv(bdyTxt,div){ //DIV div.innerHTML=" "; div.style.fontSize="1.2em"; div.style.backgroundColor="yellow"; div.appendChild(document.createTextNode(bdyTxt)); }

, initReq( ) HTTP . handleJson( ). XML JSON . . ( HTTP / JSON ).

62

HACK

1. Ajax

#7

[Hack #8]

.

( )handleJson( ) , resp HTTP

request.responseText . . Functio .var func = new Function("return"+resp);

func . . . Function .

http://www.jibbering.com/2002/4/httprequest.html . JSON .var resp = request.responseText; var obj = eval( "(" + resp + ")" );

resp .var resp = request.responseText; // resp "[1,2,3,4]" var arrObject = eval(resp);

. ( ) DOM

63

HACK

#7

Ajax Hacks :

( (serialization) ).var objt = func(); var div = document.getElementById("json"); stylizeDiv(resp,div); div = document.getElementById("props"); div.innerHTML="In object form...Properties firstname= "+ objt.firstname +"
lastname="+ objt.lastname+ "
gender="+ objt.gender+ "
country="+ objt.country;

objt . objt.firstname . [ 1-10] .

[ 1-10]

64

HACK

1. Ajax

#7

Java . doPost( ) .protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { Map valMap = httpServletRequest.getParameterMap(); StringBuffer body = new StringBuffer("{\n"); if(valMap != null) { String val=null; String key = null; Map.Entry me = null; Set entries = valMap.entrySet(); int size = entries.size(); int counter=0; for(Iterator iter= entries.iterator();iter.hasNext();) { counter++; me=(Map.Entry) iter.next(); val= ((String[])me.getValue())[0]; key = (String) me.getKey(); if(counter < size) { body.append(key).append(":\"").append(val).append("\",\n"); } else { //remove comma for last entry body.append(key).append(":\"").append(val).append("\"\n"); } } } body.append("}"); AjaxUtil.sendText(httpServletResponse,body.toString()); }

AjaxUtil Content-Type text/plain; charset=UTF-8 HTTP . JSON Contetn-Type application/x-json .

65

HACK

#8

Ajax Hacks :

. AjaxUtil . .response.setHeader("Cache-Control", "no-cache");

HACK

Ajax

#8

Ajax . ( ,, ) ( ).

. (backend) . Ajax , .

, ... , . , URL open( ) . .

66

HACK

1. Ajax

#8

. [Hack #6]

. hack6.js HTML . Tally your stocks Your total Stock Holdings Enter stock symbol: Enter share amount: Get Total Value

, [ 1-11] . URL , , , . handelResponse( ) request.onreadystatechange= handle Response . [Hack try/catch/finally #6]

.

67

HACK

#8

Ajax Hacks :

[ 1-11]

function handleResponse(){ var statusMsg=""; try{ if(request.readyState == 4){ if(request.status == 200){ /* */ var stockPrice = request.responseText; try{ if(isNaN(stockPrice)) { throw new Error( "The returned price is an invalid number.");} if(isNaN(numberOfShares)) { throw new Error( "The share amount is an invalid number.");} var info = "Total stock value: "+ calcTotal(stockPrice); displayMsg(document. getElementById("msgDisplay"),info,"black"); document.getElementById("stPrice").style.fontSize="0. 9em"; document.getElementById("stPrice").innerHTML ="price: "+ stockPrice; } catch (err) { displayMsg(document.getElementById("msgDisplay"), "An error occurred: "+ err.message,"red"); }

68

HACK

1. Ajax

#8

} else { // request.status 503 // 500 alert( "A problem occurred with communicating between the " "XMLHttpRequest object and the server program. "+ "Please try again very soon"); } }// if } catch (err) { alert("It does not appear that the server "+ alert("is available for this application. Please "+ alert("try again very soon.\nError: "+err.message); } }

.

try . catch . try [Hack #6]

. . ? , status , request.status . catch . [ 1-12] . . .

69

HACK

#8

Ajax Hacks :

[ 1-12] !

err . message ( err.message) .

try/catch/finally , . .

(Backend) , Service Unavailable ) . request.status 503(

. status 200 else .} else { // 503; // 500 alert( "A problem occurred with communicating between the " "XMLHttpRequest object and the server program. "+ "Please try again very soon"); }

, .

70

HACK

1. Ajax

#8

. 500( Internal Server Error. 404 URL )

.

try/catch/finally 1.4 . catch finally . finally { ... } .

URLAjax request.open( ) URL ? request.open( ) . try/ catch/finally . .[Hack #1] initReq( ) .function httpRequest(reqType,url,asynch){ // if(window.XMLHttpRequest){ request = new XMLHttpRequest(); } else if (window.ActiveXObject){ request=new ActiveXObject("Msxml2.XMLHTTP"); if (! request){ request=new ActiveXObject("Microsoft.XMLHTTP"); } } //ActiveXObject request null // if(request){ initReq(reqType,url,asynch); } else { alert("Your browser does not permit the use of all "+ alert("of this application's features!");

71

HACK

#9

Ajax Hacks :

} } /* */ function initReq(reqType,url,bool){ try{ /*HTTP */ request.onreadystatechange=handleResponse; request.open(reqType,url,bool); request.send(null); } catch (err) { alert( "The application cannot contact the server at the moment. "+ "Please try again in a few seconds."); } }

URL request.open( ) . http://www.myorg.com/app open ( ) URL http://www. yourorg.com . try/catch/finally .

catch request.abort( ) [Hack #70] . HTTP

. [Hack #70] .

HACK

HTTP HTTP

#9

HTTP HTTP 1.1 (descriptive)

72

HACK

1. Ajax

#9

. XMLHttpRequest , request.status HTTP . HTTP .

200( ), 404( URL ), 500( ) .

(Server ), (Content-Type ) HTTP . URL . HTTP . Ajax

Content-Type, Date, Server, Content-Length .

HTML . view response headers

73

HACK

#9

Ajax Hacks :

Find out the HTTP response headers when you "GET" a Web page Enter a URL: ::press tab when finished editing the field::

[ 1-13] .

[ 1-13] ]

. ( ) . URL text , text

onblur . getAllHeaders( ) URL URL . hack7.js . . [Hack #1] [Hack #8] .

74

HACK

1. Ajax

#9

var request; var urlFragment="http://localhost:8080/"; function getAllHeaders(url){ httpRequest("GET",url,true); } //XMLHttpRequest onreadystatechange function handleResponse(){ try{ if(request.readyState == 4){ if(request.status == 200){ /* */ var headers = request.getAllResponseHeaders(); var div = document.getElementById("msgDisplay"); div.className="header"; div.innerHTML=""+headers+""; } else { // 503 // 500 alert(request.status); alert("A problem occurred with communicating between "+ alert("the XMLHttpRequest object and the server program."); } }// if } catch (err) { alert("It does not appear that the server is "+ alert("available for this application. Please "+ alert("try again very soon. \nError: "+err.message); } } /* / function initReq(reqType,url,bool){ try{ /* HTTP */ request.onreadystatechange=handleResponse; request.open(reqType,url,bool); request.send(null); } catch (errv) { alert(75

HACK

#9

Ajax Hacks :

"The application cannot contact the server at the moment."+ "Please try again in a few seconds." } } /* : reqType:HTTP . GET POST url: URL asynch: , */ function httpRequest(reqType,url,asynch){ // if(window.XMLHttpRequest){ request = new XMLHttpRequest(); } else if (window.ActiveXObject){ request=new ActiveXObject("Msxml2.XMLHTTP"); if (! request){ request=new ActiveXObject("Microsoft.XMLHTTP"); } } //ActiveXObject request null // if(request){ initReq(reqType,url,asynch); } else { alert("Your browser does not permit the use of all "+ alert("of this application features!"); s } }

handleResponse( ) . getAllResponseHeaders( ) . , JSON .

request.getResponseHeader( ) . request. get ResponseHeader( Contetn-Type . )

76

HACK

1. Ajax

#9

div .if(request.status == 200){ /* */ var headers = request.getAllResponseHeaders(); var div = document.getElementById("msgDisplay"); div.className="header"; div.innerHTML=""+headers+""; }...

( header div className ) CSS . .div.header{ border: thin solid black; padding: 10%; font-size: 0.9em; background-color: yellow} span.message { font-size: 0.8em; }

CSS div . . div innerHTML . pre .

.

[ 1-14] URL .

77

HACK

#10

Ajax Hacks :

[ 1-14]

HACK

CSS

#10

. . HTML select URL , URL text . .[Hack #9] . HTML . function setSpan(){ document.getElementById("instr").onmouseover=function(){ this.style.backgroundColor='yellow';};

78

HACK

1. Ajax

#10

document.getElementById("instr").onmouseout=function(){ this.style.backgroundColor='white';}; } view response headers Find out the HTTP response headers when you "GET" a Web page Choose the style for your message Loud Fancy Cosmopolitan Plain Enter a URL: press tab or click outside the field when finished editing

setSpan( ) (

. )

79

HACK

#10

Ajax Hacks :

, [ 1-15] .

[ 1-15]

CSS hack.css . select text . hacks.css .div.header{ border: thin solid black; padding: 10%; font-size: 0.9em; background-color: yellow; max-width: 80%} span.message { font-size: 0.8em; } div { max-width: 80% } .plain { border: thin solid black; padding: 10%; font: Arial, serif font-size: 0.9em; background-color: yellow; } .fancy { border: thin solid black; padding: 5%; font-family: Herculanum, Verdana, serif; font-size: 1.2em; text-shadow: 0.2em 0.2em grey; font-style: oblique; color: rgb(21,49,110); background-color: rgb(234,197,49)} .loud { border: thin solid black; padding: 5%; font-family: Impact, serif; font-size: 1.4em; text-shadow: 0 0 2.0em black; color: black; background-color: rgb(181,77,79)} .cosmo { border: thin solid black; padding: 1%; font-family: Papyrus, serif;

text

, (id msgDisplay div)

80

HACK

1. Ajax

#10

font-size: 0.9em; text-shadow: 0 0 0.5em black; color: aqua; background-color: teal}

(plain, fancy, louc, cosmo) . CSS ( .fancy), , . . . . . Ajax . . onblur getAllHeaders( ) . text select .onblur="getAllHeaders(this.value,this.form._style.value)"

this.form._style.value select this.value text . hack8.js . .var request; var urlFragment="http://localhost:8080/"; var st; function getAllHeaders(url,styl){ if(url){ st=styl; httpRequest("GET",url,true); } } //XMLHttpRequest function handleResponse(){

81

HACK

#10

Ajax Hacks :

try{ if(request.readyState == 4){ if(request.status == 200){ /* */ var headers = request.getAllResponseHeaders(); var div = document.getElementById("msgDisplay"); div.className= st == "" ? "header" : st; div.innerHTML=""+headers+""; } else { // 503 // 500 alert(request.status); alert("A problem occurred with communicating between "+ alert("the XMLHttpRequest object and the server program."); } }// if } catch (err) { alert("It does not appear that the server"+ "is available for this application. Please"+ " try again very soon. \nError: "+err.message); } } /* httpRequest() initReq() Hack #1, #2 . . */

getAllHeaders( ) st CSS (plain, fancy, loud, cosmo) . div className (st) . .if(request.status == 200){ /* */ var headers = request.getAllResponseHeaders(); var div = document.getElementById("msgDisplay"); div.className= st == "" ? "header" : st; div.innerHTML=""+headers+""; }

82

HACK

1. Ajax

#10

CSS ( select ), header

.

, .

hacks.css header . . [ 1Cosmopolitan . 16]

[ 1-16] Cosmopolitan

[ 1-17] .

83

HACK

#11

Ajax Hacks :

[ 1-17] Plain

HACK

CSS

#11

DOM CSS . (iki) .

. .

. HTML . . .var request;

84

HACK

1. Ajax

#11

var urlFragment="http://localhost:8080/"; var st; function getAllHeaders(url,styl){ if(url){ st=styl; httpRequest("GET",url,true); } } /* DOM CSS2Properties : stType ('plain', 'fancy', 'loud', 'cosmo') stylObj div.style HTML .stylObj div.style HTML .*/ function setStyle(stType,stylObj){ switch(stType){ case 'plain' : stylObj.maxWidth="80%"; stylObj.border="thin solid black"; stylObj.padding="5%"; stylObj.textShadow="none"; stylObj.fontFamily="Arial, serif"; stylObj.fontSize="0.9em"; stylObj.backgroundColor="yellow"; break; case 'loud' : stylObj.maxWidth="80%"; stylObj.border="thin solid black"; stylObj.padding="5%"; stylObj.fontFamily="Impact, serif"; stylObj.fontSize="1.4em"; stylObj.textShadow="0 0 2.0em black"; stylObj.backgroundColor="rgb(181,77,79)"; break; case 'fancy' : stylObj.maxWidth="80%"; stylObj.border="thin solid black"; stylObj.padding="5%"; stylObj.fontFamily="Herculanum, Verdana, serif"; stylObj.fontSize="1.2em"; stylObj.fontStyle="oblique";85

HACK

#11

Ajax Hacks :

stylObj.textShadow="0.2em 0.2em grey"; stylObj.color="rgb(21,49,110)"; stylObj.backgroundColor="rgb(234,197,49)"; break; case 'cosmo' : stylObj.maxWidth="80%"; stylObj.border="thin solid black"; stylObj.padding="1%"; stylObj.fontFamily="Papyrus, serif"; stylObj.fontSize="0.9em"; stylObj.textShadow="0 0 0.5em black"; stylObj.color="aqua"; stylObj.backgroundColor="teal"; break; default : alert('default'); } } //XMLHttpRequest function handleResponse(){ try{ if(request.readyState == 4){ if(request.status == 200){ /* */ var headers = request.getAllResponseHeaders(); var div = document.getElementById("msgDisplay"); if(st){ setStyle(st,div.style); } else { setStyle("plain",div.style); } div.innerHTML=""+headers+""; } else { // 503 // 500 alert(request.status); alert("A problem occurred with communicating between "+ "the XMLHttpRequest object and the server program."); } }// if } catch (err) { alert(alert("It does not appear that the server "+86

HACK

1. Ajax

#11

"is available for this application. Please "+ "try again very soon. \nError: "+err.message); } } /* */ function initReq(reqType,url,bool){ try{ /* HTTP */ request.onreadystatechange=handleResponse; request.open(reqType,url,bool); request.send(null); } catch (errv) { alert( "Your browser does not permit the use of all "+ "of this application features!"); s } } /* : reqType: HTTP . GET POST url: URL asynch: , */ function httpRequest(reqType,url,asynch){ // if(window.XMLHttpRequest){ request = new XMLHttpRequest(); } else if (window.ActiveXObject){ request=new ActiveXObject("Msxml2.XMLHTTP"); if (! request){ request=new ActiveXObject("Microsoft.XMLHTTP"); } } //ActiveXObject request null // if(request){ initReq(reqType,url,asynch); } else { alert("Your browser does not permit the use of all "+87

HACK

#11

Ajax Hacks :

"of this application's features!"); } }

CSS , HTML style . div div.style . div ). (:div.style.fornFamily= Arial setStyle( ) . div . Fancy div . ( ) . , URL text onblur . CSS . HTML CSS [Hack #10] . .

hack10.js . HTML . function setSpan(){ document.getElementById("instr").onmouseover=function(){ this.style.backgroundColor='yellow';}; document.getElementById("instr").onmouseout=function(){ this.style.backgroundColor='white';}; }

88

HACK

1. Ajax

#11

view response headers Find out the HTTP response headers when you "GET" a Web page Choose the style for your message Loud Fancy Cosmopolitan Plain Enter a URL: press tab or click outside the field when finished editing

onblur getAllHeader( ) select cosmo ) URL . (

. Ajax .

setSpan( ) (

text . )

89

HACK

#11

Ajax Hacks :

[ 1-18] HTTP .

[ 1-18]

[ 1-19] URL .

[ 1-19]

. , . Ajax!

90