//<![CDATA[
// external.js
var post, doc, bod, htm, C, E, T; // for use on other loads
addEventListener('load', function(){ // load
// used in post function below to create String from Object
function phpEncode(obj){
var r = [];
if(obj instanceof Array){
for(var i=0,l=obj.length; i<l; i++){
r.push(phpEncode(obj[i]));
}
return '%5B'+r.join(',')+'%5D';
}
else if(typeof obj === 'object' && obj){
for(var i in obj){
if(obj.hasOwnProperty(i)){
var v = obj[i], s;
if(typeof v === 'object' && v){
s = encodeURIComponent('"'+i.replace('"', '\\"')+'":')+phpEncode(v);
}
else{
v = typeof v === 'string' ? '"'+v.replace('"', '\"')+'"' : v;
s = encodeURIComponent('"'+i.replace('"', '\\"')+'":'+v);
}
r.push(s);
}
}
return '%7B'+r.join(',')+'%7D';
}
else{
r = typeof obj === 'string' ? '"'+obj.replace('"', '\\"')+'"' : obj;
return ''+r;
}
}
// used in post function below to evaluate (make into code) JSON String that comes back from PHP
function phpAccept(url){
return eval('('+decodeURIComponent(url)+')');
}
// here is an example of a post AJAX function
post = function(send, where, success, context){
var x = new XMLHttpRequest;
var c = context || this;
x.open('POST', where); x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
x.onreadystatechange = function(){
if(x.readyState === 4 && x.status === 200){
if(success)success.call(c, phpAccept(x.responseText));
}
}
if(typeof send === 'object' && send && !(send instanceof Array)){
var r = [];
for(var p in send){
r.push(encodeURIComponent(p)+'='+phpEncode(send[p]));
}
x.send(r.join('&'));
}
else{
throw new Error('send must be an Object');
}
return x;
}
// yes, you can do this - just remember that non-primitive values are the actual Object through assingment
doc = document; bod = doc.body; htm = doc.documentElement;
// simple way to create an Element by tag
C = function(tag){
return doc.createElement(tag);
}
// simple way to document.getElementById()
E = function(id){
return doc.getElementById(id);
}
T = function(tag){
return doc.getElementsByTagName(tag);
}
var form = E('form'), sub = E('sub'), i1 = E('i1'), i2 = E('i2');
// prevent old school submission
form.addEventListener('submit', function(ev){
ev.preventDefault(); // prevents submission
});
// just for testing remove below
var tS = E('test_out').style;
// remove above
// ajax submisson
sub.addEventListener('click', function(){
/* note that if the Elements are not removed from or added
to the DOM you don't need to get them again Element.value
will probably be different so you'll want to get them
on every click
*/
post({phpProp1:i1.value, phpProp2:i2.value}, 'yourPHPajaxResponsePage.php', function(data){
/* before data comes back yourPHPajaxResponsePage.php may look like this:
<?php
session_start(); // super common - read up on it - not needed here - but won't hurt
if(isset($_POST['phpProp1'], $_POST['phpProp2'])){
// usually you affect MySQL using PHP at this point
// we'll just send them back in this lame example
$res = array('jsProp1' => $_POST['phpProp1'], 'jsProp2' => $_POST['phpProp2']);
// makes results come back as JSON
echo json_encode($res);
}
?>
*/
if(data){ // may want more conditions
E('out').innerHTML = data.jsProp1+'<br />'+data.jsProp2;
}
}, this);
// just for testing - remove below
tS.display = 'block';
E('temp_res').innerHTML = i1.value+'<br />'+i2.value;
// remove above
});
// testing only remove below
var ins = doc.querySelectorAll('input[type=text]');
for(var i=0,l=ins.length; i<l; i++){
ins[i].addEventListener('focus', function(){
tS.display = 'none';
});
}
// remove above
form.addEventListener('keydown', function(ev){
// if user hits enter
if(ev.keyCode === 13)sub.click();
});
}); // end load
//]]>
/* external.css */
html,body{
padding:0; margin:0;
}
.main{
width:980px; margin:0 auto;
}
#form{
width:266px; color:#fff; background:green; padding:10px;
}
#form>div>label{
display:block; float:left; width:57px;
}
#form>div>input{
width:203px;
}
#form>div{
margin-bottom:10px;
}
#form>#sub{
display:block; margin:0 auto;
}
/* remove below - testing only */
#test_out{
display:none;
}
#test_out>div:first-child{
color:red;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<title>AJAX Example</title>
<link type='text/css' rel='stylesheet' href='external.css' />
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<div class='main'>
<form id='form'>
<div><label for='i1'>Input 1</label><input id='i1' name='i1' type='text' value='' /></div>
<div><label for='i2'>Input 2</label><input id='i2' name='i2' type='text' value='' /></div>
<input id='sub' type='button' value='submit' />
</form>
<div id='out'></div>
<!-- for testing remove below -->
<div id='test_out'><div>Must have PHPServer code in JavaScript Comments to get real results</div><div id='temp_res'></div></div>
<!-- remove above -->
</div>
</body>
</html>