slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
AJAX PowerPoint Presentation
Download Presentation
AJAX

Loading in 2 Seconds...

play fullscreen
1 / 31

AJAX - PowerPoint PPT Presentation


  • 136 Views
  • Uploaded on

AJAX. 보통 page request. Page Reload. AJAX – A synchronous J avascript & X ML. XMLHttpRequest object. XMLHttpRequest object. Properties: readyState responseXML Methods: open send Event: onreadystatechange. XMLHttpRequest. Properties: readyState responseXML Methods: open

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'AJAX' - cecile


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
xmlhttprequest object
XMLHttpRequest object
  • Properties:
    • readyState
    • responseXML
  • Methods:
    • open
    • send
  • Event:
    • onreadystatechange
xmlhttprequest
XMLHttpRequest
  • Properties:
    • readyState
    • responseXML
  • Methods:
    • open
    • send
  • Event:
    • onreadystatechange

readyState values:

0 – uninitialized

1 – loading

2 – loaded

3 – interactive

4 - complete

xmlhttprequest1
XMLHttpRequest
  • Properties:
    • readyState
    • responseXML
  • Methods:
    • open
    • send
  • Event:
    • onreadystatechange

readyState values:

0 – uninitialized

1 – loading

2 – loaded

3 – interactive

4 - complete

Event fires 4 times!

xmlhttprequest2
XMLHttpRequest
  • Initialize:

var xmlHttp;

function sendAjax(){

xmlHttp=new XMLHttpRequest();

xmlHttp.onreadystatechange = respAjax;

readyState values:

0 – uninitialized

1 – loading

2 – loaded

3 – interactive

4 - complete

xmlhttprequest3
XMLHttpRequest
  • Initialize:

function respAjax(){

if(xmlHttp.readyState == 4{

결과를 처리}

readyState values:

0 – uninitialized

1 – loading

2 – loaded

3 – interactive

4 - complete

xmlhttprequest4
XMLHttpRequest
  • Initialize:

var url = “http://localhost:8080/CalculatorWS/CalculatorWS”;

readyState values:

0 – uninitialized

1 – loading

2 – loaded

3 – interactive

4 - complete

xmlhttprequest5
XMLHttpRequest
  • Initialize:

xmlHttp.open("POST",url,true);

readyState values:

0 – uninitialized

1 – loading

2 – loaded

3 – interactive

4 - complete

xmlhttprequest6
XMLHttpRequest
  • Initialize:

var soapReq = “<?xml version=\"1.0\" encoding=\"UTF-8\"?><S:Envelope xmlns:S=\"http://schemas.xmlsoap.org/soap/envelope/\"><S:Header/><S:Body><ns2:add xmlns:ns2=\"http://calculator.me.org/\"><x>" + document.getElementById("input1").value + "</x><y>" + document.getElementById("input2").value + "</y></ns2:add></S:Body></S:Envelope>”;

readyState values:

0 – uninitialized

1 – loading

2 – loaded

3 – interactive

4 - complete

xmlhttprequest7
XMLHttpRequest
  • Send to the server:

xmlHttp.send(soapReq);

readyState values:

0 – uninitialized

1 – loading

2 – loaded

3 – interactive

4 - complete

xmlhttprequest8
XMLHttpRequest
  • Receive from server:

function stateChanged(){

if (xmlHttp.readyState==4){

document.getElementById("table").innerHTML=xmlHttp.responseText;

}

}

readyState values:

0 – uninitialized

1 – loading

2 – loaded

3 – interactive

4 - complete

xmlhttprequest9
XMLHttpRequest
  • Receive from server:

function respAjax(){

if(xmlHttp.readyState == 4{

document.getElementById(“result”).innerHTML = ...

}

readyState values:

0 – uninitialized

1 – loading

2 – loaded

3 – interactive

4 - complete

xmlhttprequest10
XMLHttpRequest

<body>

<h1>Ajax Web Service</h1>

<input id="input1" size = "5" type="text" />

<input id="input2" size = "5" type="text" />

<input type="button" value="click me" onClick="sendAjax()" />

<div id="result">

</div>

</body>

xmlhttprequest11
XMLHttpRequest

<body>

<h1>Ajax Web Service</h1>

<input id="input1" size = "5" type="text" />

<input id="input2" size = "5" type="text" />

<input type="button" value="click me" onClick="sendAjax()" />

<div id="result">

</div>

</body>

xmlhttprequest12
XMLHttpRequest

<input id="input1" size = "5" type="text" />

<input id="input2" size = "5" type="text" />

var soapReq = “<?xml version=\"1.0\" encoding=\"UTF-8\"?><S:Envelope xmlns:S=\"http://schemas.xmlsoap.org/soap/envelope/\"><S:Header/><S:Body><ns2:add xmlns:ns2=\"http://calculator.me.org/\"><x>" + document.getElementById("input1").value + "</x><y>" + document.getElementById("input2").value + "</y></ns2:add></S:Body></S:Envelope>”;

xmlhttprequest13
XMLHttpRequest

<input id="input1" size = "5" type="text" />

<input id="input2" size = "5" type="text" />

var soapReq = “<?xml version=\"1.0\" encoding=\"UTF-8\"?><S:Envelope xmlns:S=\"http://schemas.xmlsoap.org/soap/envelope/\"><S:Header/><S:Body><ns2:add xmlns:ns2=\"http://calculator.me.org/\"><x>" + document.getElementById("input1").value + "</x><y>" + document.getElementById("input2").value + "</y></ns2:add></S:Body></S:Envelope>”;

xmlhttprequest14
XMLHttpRequest

<body>

<h1>Ajax Web Service</h1>

<input id="input1" size = "5" type="text" />

<input id="input2" size = "5" type="text" />

<input type="button" value="click me" onClick="sendAjax()" />

<div id="result">

</div>

</body>

xmlhttprequest15
XMLHttpRequest
  • Receive from server:

function respAjax(){

if(xmlHttp.readyState == 4{

document.getElementById(“result”).innerHTML = ...

}

bob innerhtml xmlhttp responsetext
bob.innerHTML = xmlHttp.responseText

<html>

<body>

<div id=‘bob’>

<img src=‘fish.jpg’ />

</div>

</body>

</html>

responseText

<img src=‘dog.jpg’ />

bob innerhtml xmlhttp responsetext1
bob.innerHTML = xmlHttp.responseText

<html>

<body>

<div id=‘bob’>

</div>

</body>

</html>

responseText

<img src=‘dog.jpg’ />

xmlhttprequest16
XMLHttpRequest
  • xmlHttp.responseXML

<?xml version='1.0' encoding='UTF-8'?>

<S:Envelope xmlns:S="http://schemas.xmlsoap.org/soap/envelope/">

<S:Body>

<ns2:addResponse xmlns:ns2="http://calculator.me.org/">

<return>10</return>

</ns2:addResponse>

</S:Body>

</S:Envelope>

xmlhttprequest17
XMLHttpRequest
  • xmlHttp.responseXML

<?xml version='1.0' encoding='UTF-8'?>

<S:Envelope xmlns:S="http://schemas.xmlsoap.org/soap/envelope/">

<S:Body>

<ns2:addResponse xmlns:ns2="http://calculator.me.org/">

<return>10</return>

</ns2:addResponse>

</S:Body>

</S:Envelope>

xmlhttprequest18
XMLHttpRequest
  • xmlHttp.responseXML

document.getElementById(“result”).innerHTML = ...

xmlHttp.responseXML.getElementsByTagName(“return”)

xmlhttprequest19
XMLHttpRequest
  • xmlHttp.responseXML

document.getElementById(“result”).innerHTML = ...

xmlHttp.responseXML.getElementsByTagName(“return”)[0]

xmlhttprequest20
XMLHttpRequest
  • xmlHttp.responseXML

document.getElementById(“result”).innerHTML = ...

xmlHttp.responseXML.getElementsByTagName(“return”)[0].childNodes[0]

xmlhttprequest21
XMLHttpRequest
  • xmlHttp.responseXML

document.getElementById(“result”).innerHTML = ...

xmlHttp.responseXML.getElementsByTagName(“return”)[0].childNodes[0].nodeValue

xmlhttprequest22
XMLHttpRequest

function respAjax(){

if(xmlHttp.readyState == 4){

document.getElementById("result").innerHTML = "<h3>Result is: " + xmlHttp.responseXML.getElementsByTagName("return")[0].childNodes[0].nodeValue + "</h3>";

}

finally
Finally!
  • Script tag in the head section

<head>

<script type=“text/javascript”>

var xmlHttp;

function sendAjax(){...

function respAjax(){...

</script>

</head>