Tài liệu AJAX Discussion part 1 ppt

Javascipt Cheatsheet



AJAX Cheatsheet

Khởi tạo đối tượng XMLHttpRequest (XHR)
PHP Code:
[b]function [/b][b]createXHRobj()[/b] {
if (window.XMLHttpRequest)
req = new XMLHttpRequest() // browsers besides IE
else if (window.ActiveXObject)
req = new ActiveXObject("Microsoft.XMLHTTP") // IE
else
alert ("Could not create XHR obj!")
return req
}



Asynchronous GET request
PHP Code:
var req=createXHRobj()

function request(url) {
req.onreadystatechange = callbackFunction
req.open("GET", url, true)
// 3rd param specifies asynchronous request (browser does not wait/block)
req.send(""
)

}

function callbackFunction() {
if (req.readyState == 4) // request completed
if (req.status == 200) // HTTP response code (200 == OK)
response = req.responseText
// and anything else you might need to do
else {
// error reporting code
}
}



Synchronous GET request
PHP Code:
function request(url) {
req=createXHRobj()
req.open("GET", url, false)
req.send(null)
alert(req.responseText)
}



Sending via POST - req.send()
PHP Code:
function submitform(url) {
req=createXHRobj()

// DO NOT EVER use the same names for javascript variables and
// HTML element ids, they share the same namespace under IE and
// may also cause problems in other browsers.
namevar=encodeURIComponent(document.getElementById('Sender_Name').value)
emailvar=encodeURIComponent(document.getElementById('Sender_Email').value)

req.open("POST", url, false)
// req.setRequestHeader() must come AFTER req.open()
req.setRequestHeader
("Content-Type","application/x-www-form-urlencoded")

req.send("name="+namevar+"&email="+emailvar)
alert(req.responseText)
}


// we do away with HTML form submit to simplify things
<form>
<input type="text" id="Sender_Name" /> // long descriptive names that will not be use
d as
<input type="text" id="Sender_Email" /> // javascript variable names are a good habit
here
<input type="button" value="send" onclick="javascript:submitform('processform.php')"
/>
</form>



Wrapper code for Asynchronous requests
PHP Code:

var req1=createXHRobj()
var req2=createXHRobj()

function asynXHR(url, reqobj, action) {
reqobj.onreadystatechange=action
reqobj.open("GET", url, true)
reqobj.send("")
}

function responseIsReady(reqobj) {
if (reqobj.readyState==4)
if (reqobj.status==200) return true
else {
alert("ERROR: STATUS RESPONSE "+reqobj.status)
return true // let the call proceed so we know which
// call the status error occurred in
}
else return false
}


// each callback function must use its own request object
var req1, req2

function showstock() {
if (responseIsReady(req1
)) alert("stock price: $"+req1.responseText)

/* IE can't reuse the XHR object, you are required to clean up and create a new one */
req1=null

req1=createXHRobj()
}

function showtemp() {
if (responseIsReady(req2)) alert("It's "+req2.responseText+" celsius")

/* IE can't reuse the XHR object, you are required to clean up and create a new one */
req2=null
req2=createXHRobj()
}

asynXHR("price.php?stock=GOOG",req1,showstock)
asynXHR("temperature.php?city=Singapore",req2,showtemp)

One.N(UDS)