1 / 31

AJAX

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

cecile
Download Presentation

AJAX

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AJAX

  2. 보통 page request Page Reload

  3. AJAX – Asynchronous Javascript & XML XMLHttpRequest object

  4. XMLHttpRequest object • Properties: • readyState • responseXML • Methods: • open • send • Event: • onreadystatechange

  5. XMLHttpRequest • Properties: • readyState • responseXML • Methods: • open • send • Event: • onreadystatechange readyState values: 0 – uninitialized 1 – loading 2 – loaded 3 – interactive 4 - complete

  6. 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!

  7. XMLHttpRequest • Initialize: var xmlHttp; function sendAjax(){ xmlHttp=new XMLHttpRequest(); xmlHttp.onreadystatechange = respAjax; … readyState values: 0 – uninitialized 1 – loading 2 – loaded 3 – interactive 4 - complete

  8. XMLHttpRequest • Initialize: function respAjax(){ if(xmlHttp.readyState == 4{ 결과를 처리} readyState values: 0 – uninitialized 1 – loading 2 – loaded 3 – interactive 4 - complete

  9. XMLHttpRequest • Initialize: var url = “http://localhost:8080/CalculatorWS/CalculatorWS”; readyState values: 0 – uninitialized 1 – loading 2 – loaded 3 – interactive 4 - complete

  10. XMLHttpRequest • Initialize: xmlHttp.open("POST",url,true); readyState values: 0 – uninitialized 1 – loading 2 – loaded 3 – interactive 4 - complete

  11. 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

  12. XMLHttpRequest • Send to the server: xmlHttp.send(soapReq); readyState values: 0 – uninitialized 1 – loading 2 – loaded 3 – interactive 4 - complete

  13. 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

  14. 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

  15. 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>

  16. 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>

  17. 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>”;

  18. 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>”;

  19. 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>

  20. XMLHttpRequest • Receive from server: function respAjax(){ if(xmlHttp.readyState == 4{ document.getElementById(“result”).innerHTML = ... }

  21. bob.innerHTML = xmlHttp.responseText <html> <body> <div id=‘bob’> <img src=‘fish.jpg’ /> </div> </body> </html> responseText <img src=‘dog.jpg’ />

  22. bob.innerHTML = xmlHttp.responseText <html> <body> <div id=‘bob’> </div> </body> </html> responseText <img src=‘dog.jpg’ />

  23. 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>

  24. 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>

  25. XMLHttpRequest • xmlHttp.responseXML document.getElementById(“result”).innerHTML = ... xmlHttp.responseXML.getElementsByTagName(“return”)

  26. XMLHttpRequest • xmlHttp.responseXML document.getElementById(“result”).innerHTML = ... xmlHttp.responseXML.getElementsByTagName(“return”)[0]

  27. XMLHttpRequest • xmlHttp.responseXML document.getElementById(“result”).innerHTML = ... xmlHttp.responseXML.getElementsByTagName(“return”)[0].childNodes[0]

  28. XMLHttpRequest • xmlHttp.responseXML document.getElementById(“result”).innerHTML = ... xmlHttp.responseXML.getElementsByTagName(“return”)[0].childNodes[0].nodeValue

  29. XMLHttpRequest function respAjax(){ if(xmlHttp.readyState == 4){ document.getElementById("result").innerHTML = "<h3>Result is: " + xmlHttp.responseXML.getElementsByTagName("return")[0].childNodes[0].nodeValue + "</h3>"; }

  30. Finally! • Script tag in the head section <head> <script type=“text/javascript”> var xmlHttp; function sendAjax(){... function respAjax(){... </script> </head>

  31. Do it!

More Related