Customizing javascript Array.sort() method

In Javascript, Array sort could be parametrized. You could change the behaviour of the Array.sort method by passing the comparison function to it :
var myArray=new Array(2,1,6,4,18,-1);

// Descending sort
alert(myArray.sort(function(x,y) {return y-x}));

// Ascending sort
alert(myArray.sort(function(x,y) {return x-y}));


You can setUp your own sort function for you own objects and needs...

Javascript array sort with custom comparators, Javascript sorting, Custom comparison for the javascript Array.sort method, Array.sort() with custom sorter, Descending Array.sort() in Javascript, Ascending and descending sort in javascript

Absolute position of an element using Javascript

In a web browser window, elements are placed according to their style and the style and the position of their parent elements. Margin, padding, floating, relative position, static position, fixed position, borders,... can affect the position of an element in the browser window. In Javascript, it is possible to get the absolute position of any element. You just need to pass an DOM element (obtain with getElementById or whatever...) and you get the result as a Javascript object.

function findXY(obj) {
if (obj==null) return {x:0,y:0};
var coords=findXY(obj.offsetParent);
return {x:obj.offsetLeft-obj.scrollLeft+coords.x,y:obj.offsetTop-obj.scrollTop+coords.y};
}

var coords=findXY(document.getElementById("myId"));
The values coords.x and coords.y gives you the position of the DOM element from the top left corner of your web page.

This function is used to display sprite in this Ajax/javascript online Game. Check the javascript source code in the web page to see how it works.

How to get the absolute position of an element using javascript, Absolute positionning in javascript, Javascript element coordinates, Absolute screen position in javascript

Ajax/Javascript XMLHttpRequest tutorial

The XMLHttpRequest Javascript object allow you to send and receive data asynchronously from a web server. Depending on the browser, the XMLHttpRequest object is instantiated differently. Here you can see the code for the creation of a XMLHttpRequest object that work on Safari, IE5.5+, Firefox and Opera :

function createXMLHttpRequest() {
if (typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
throw new Error("XMLHttpRequest not supported");
}
}
You can use the XMLHttpRequest as shown bellow to send a GET request to the server :

xmlhttp=createXMLHttpRequest();
xmlhttp.open("GET", "test.html", true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
if (xmlhttp.status==200) {
xmlhttp.responseText;
xmlhttp.responseXML;
} else {
// HTTP error
}
}
}
xmlhttp.send(null);
You can use this code into a function and call it when a HTML event occurs (onload, onchange, onclisk, onmouseover, ...) to send and fetch data asynchronously, and then update you Web page dynamically.

You can also use the XMLHttpRequest as shown bellow to send a POST request to the server :

xmlhttp=createXMLHttpRequest();
xmlhttp.open("POST", "test.html", true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
if (xmlhttp.status==200) {
xmlhttp.responseText;
xmlhttp.responseXML;
} else {
// HTTP error
}
}
}
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("urlencodedstring");
To send a POST request you just need to specify the content-type of the sent data with the setRequestHeader method of the XMLHttpRequest object. The sent data are passed as an argument of the send method. To properly encode the passed data, use the encodeURIComponent(StringToEncode) Javascript function.

XMLHttpRequest object Properties

• onreadystatechange : Define here the callback function for your request / javascript event.
  
• readyState : State of the processing request.
• responseText : Response in text format.Read only.
  
• responseXML : Response in XML format.Read only.
• status : HTTP response status.
  

XMLHttpRequest object Methods

• abort() : abort the processing request.
• getAllResponseHeaders() : Return the array of the HTTP response headers.
• getResponseHeader(headerName) : Return the specified HTTP response header.
• open(method, url[, asynchronously[, user[, password]]]) : Initialise the request for the specified HTTP method, URL (url), asynchronously (true ou false) and with a username and password if provided.
• send(data) : send the HTTP request with the provided data.
• setTimeouts(timeout) : Maximum acceptable time to wait before the server response is received.
• setRequestHeader(headerName, headerValue) : Set a special header.

Commons HTTP response status

• 200 OK
• 301 Moved permanently
• 302 Found
• 303 See Other
• 403 Forbidden
• 404 Not Found