Yes it's up to you!
First of all compliments for using the native XMLHttpRequest, which is supported by all browsers including the mobile ones. Using the jQuery's ajax is just performance loss.
Security
When talking about javascript there is no security. Zero.
I answered a question about How can I obfuscate(protect) JavaScript? some time ago... and there is really nothing you can hide as soon as you put it online. The only thing you can do is to annoying the "hacker". Also just using the native XMLHttpRequest increases the chance that all those jQuery fans don't understandd what you do! ;)
In the above post i used headers to validate the referrer...
Performance
XMLHttpRequest It's native... so it is the fastest approach..
All other libs include many userfriendly checks that simplify everything. Many checks means performance loss.
As you may want to use ajax for more than just one action i suggest you look at the function i wrote some time ago.
How do I return the response from an asynchronous call?
function ajax(a,b,e,d,c){ // Url,callback,method,formdata or {key:val},placeholder
c=new XMLHttpRequest;
c.open(e||'get',a);
c.onload=b;
c.send(d||null)
}
I use it for various REST API's. Mostly you don't need to set the header and other stuff.
You could modify it and add the support for adding header information.
I see a very bad thing in your code.
request.open('GET', 'controllers/get_date.php', true);
True???
Don't do that. that should be never used. Not even with static files. Ajax is meant to be async! You will crash the users browser if the response of the php file is not fast enough. By crash i mean the browser is stuck nothing moves until the ajax content is loaded. So if it takes 5seconds to load the file, for 5 seconds you can't do nothing. the mouse/touch events don't work also every animated elements will be frozen.gifs/videos/cssstyles.
How to send the params
Slightly more security... short params, best performance ?? yep, use the headers the headers are send before anything else. But in reality i think not much changes as the final binary data is probably the same size as if you would send it over GET & POST.
GET or POST?
If at the end the gained security of sending the headers is not enough so you want to do it the "normal" way, then there is only one important thing to consider: how much data you need to send. I prefer post.. it allows to send more data. I use FormData to do so.
var fd=new FormData(form);// this is the whole form including upload files.
ajax(url,callback,'post',fd);
Something that does not seem very obvious is JSON.
I see nowhere JSON mentioned. Ajax withoutJSON is useless. js & php without json is useless. you can't just send strings... so
php
//php array to jsonstring
json_encode($array);
//jsonstring to php array
json_decode($string);
js
//jsonstring to js array
JSON.parse(string);
//js array to jsonstring
JSON.stringify(array);
In both cases (if the server nginx,apache,lighthttp is setup correctly) you don't need to worry about encoding. JSON is automatically encoded in utf8.
PHP
Some ppl would probably suggest to comrpress the php(ajax can handle zipped files) or even add the correct mimetype.
//header('Content-Type: application/json'); // not needed
echo json_encode($data);
but in both cases it takes more time. so don't.
keep the php file as simple as possible. as it's the one that take more time.
don't send elements , style or other html relative stuff. you should do that clients side. to keep the server agile.
mysql to json
https://stackoverflow.com/a/20948686/2450730
Now, looking at the comments, you use NODEJS :).
Use webSockets. use it for everything.
Forget about ajax, and do everything with websockets!!!!! Bidirectional communication. And you send only the data needed. No requests, no headers... no slow stuff.
Support
Both ajax and websockets , but also server sent events are not supported by older browsers.
If that is a problem don't use those technologies. Also using jQuery to allow ajax on ie6 is just a joke....
Btw now ff, ie, opera, android, safari, ios even a 4-5 year old version of those browsers support ajax,websockets & SSE
webSockets
I really like php, mysql nginx apache... but nodejs, websockets & json ..
Thats fun pure.
simple js example.
var ws=new WebSocket('ws://YOURIP:YOURPORT');
ws.onopen=function(){ //those events are also aviable with sse
ws.send('WS open!');//sending data to the server
// server handles each user individually very easely.
};
ws.onclose=function(){
console.log('WS closed!');
};*/
ws.onmessage=function(e){
//USE JSON
var Everythingyouneed=JSON.parse(e.data);
};
@ nodejs side....
https://github.com/websockets/ws
look at the broadcast or send the data to eah user individually.
