Maar uiteraard zijn reacties/aanvullingen/opmerkingen/... welkom.
jQuery is handig en leuk ... maar meestal nogal overkill.
Er is echter wel functionaliteit die je constant nodig hebt; op zich niet zo moeilijk, maar je moet het toch altijd zoeken en copy/pasten
Ik dacht een kleine file te maken die een paar dingen groepeert. Hiermee kan ik jQuery (en andere frameworks) meestal achterwege laten.
Ik focus me op twee dingen: Ajax en events binden.
utils.js
/**
* @file baic utilities.
* If you don't feel like using a js framework, there is still a few utilities you constantly need.
* I thought of two functionalities: binding events & Ajax
* Feel free to expand/extend
*/
/**
* Ajax.
* made to look like jQuery's $.ajax(options);
* Not too many fancy options (You make a request; you expect a success callback to be executed. That's it); feel free to extend
* required options: url & success
* optional options (documentation: look at jQuery) : type ('get' or 'post'), dataType ('text', 'json', 'xml'), data
// Example of Usage
ajax({
url: 'ajax.htm',
success: display
});
function display(data) {
document.getElementById('result').innerHTML = data;
}
*/
var xmlhttp;
var ajax = function(options) {
if (typeof xmlhttp == 'undefined') {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
// merge options with defaults
options = {
url: options.url,
success: options.success,
type: typeof options.type != 'undefined' ? options.type : 'get',
data: typeof options.data != 'undefined' ? options.data : null,
dataType: typeof options.dataType != 'undefined' ? options.dataType : 'text'
}
// Ajax call
xmlhttp.open(options.type, options.url, true);
switch (options.dataType) {
default:
if (options.type == 'post') {
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
else {
xmlhttp.setRequestHeader('Content-type', 'text/plain;charset=UTF-8');
}
break;
case 'json':
xmlhttp.setRequestHeader('Content-type', 'application/json; charset=utf-8');
break;
case 'xml':
xmlhttp.setRequestHeader('Content-type', 'text/xml; charset=utf-8');
break;
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
switch (options.dataType) {
default:
options.success(xmlhttp.responseText);
break;
case 'json':
// @see http://en.wikipedia.org/wiki/JSON
var my_JSON_object = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(
xmlhttp.responseText.replace(/"(\\.|[^"\\])*"/g, ''))) &&
eval('(' + xmlhttp.responseText + ')');
options.success(my_JSON_object);
break;
case 'xml':
options.success(xmlhttp.responseXML);
break;
}
}
}
xmlhttp.send(options.data);
return true;
}
/*
* Add event
* @see http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/
* @author: Jeffrey Way
// Example of Usage
var lis = document.getElementsByTagName('li');
addEvent( lis, 'click', function() {
this.style.border = '1px solid red';
});
*/
var addEvent = (function( window, document ) {
if ( document.addEventListener ) {
return function( elem, type, cb ) {
if ( (elem && !elem.length) || elem === window ) {
elem.addEventListener(type, cb, false );
}
else if ( elem && elem.length ) {
var len = elem.length;
for ( var i = 0; i < len; i++ ) {
addEvent( elem[i], type, cb );
}
}
};
}
else if ( document.attachEvent ) {
return function ( elem, type, cb ) {
if ( (elem && !elem.length) || elem === window ) {
elem.attachEvent( 'on' + type, function() { return cb.call(elem, window.event) } );
}
else if ( elem.length ) {
var len = elem.length;
for ( var i = 0; i < len; i++ ) {
addEvent( elem[i], type, cb );
}
}
};
}
})( this, document );
Simpel voorbeeldje van hoe het te gebruiken
<!doctype HTML>
<html>
<head>
<script src="utils.js"></script>
<style>
#click {
cursor: pointer;
}
</style>
</head>
<body>
<div id="click">click</div>
<script>
// simpel voorbeeld: we testen 1 event + 1 ajax call
// als op de <div></div> gedrukt wordt, wordt een ajax call gemaakt; de respons wordt als innerHTML van die div gezet
var click = document.getElementById('click');
// event binden
addEvent( click, 'click', function() {
// ajax call
var a = ajax({
url: 'ajax.htm',
success: display
});
});
// callback voor de ajax respons
function display(data) {
click.innerHTML = data;
}
</script>
</body>
</html>
