Lessons XXVI : Javascipt Cheatsheet

Javascipt Cheatsheet

ZZZZZZZZZZZZ
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 used 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)

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: