Share your knowledge: Little Ajax exercise

Tuesday, April 15, 2014

view raw gistfile1.txt hosted with ❤ by GitHub

	<!DOCTYPE html>
	<html>
	<head>
	<title>Ajax demo</title>
	<script data-main="scripts/ajax" src="scripts/require.js"></script>
	</head>
	<body>
	<h1>This is a demo showing making an AJAX call<h1>
	<div id="result"/>
	</body>
	</html>

view raw gistfile1.html hosted with ❤ by GitHub

	require.config({
	baseUrl: 'scripts',
	paths: {
	jquery: 'jquery-2.1.0.min'
	}
	});

	requirejs(["jquery"], function($) {
	/**
	0 -> UNSENT
	1 -> OPENED
	2 -> HEADERS_RECEIVED
	3 -> LOADING
	4 -> DONE
	**/
	function handleStateChange() {
	var readyState = request.readyState;
	console.log(readyState);
	switch(readyState) {
	case 4:
	processResponse(request.responseText);
	break;
	default:
	break;
	}
	}

	function nonEmptyString(value) {
	return value !== "";
	}

	function processResponse(responseText) {
	console.log("Processing responseText");
	var lines = responseText.split('\n');
	lines.filter(nonEmptyString).forEach(function(line) {
	console.log("Processing line: " + line);
	/**
	* TODO: dynamically build a table for each line from the CSV file with JQuery
	* appended as child within <div id="result"/>
	**/
	});
	}

	console.log("About to make Ajax request");

	var request = new XMLHttpRequest();
	request.open("GET", "data/persons.csv", true);
	request.onreadystatechange = handleStateChange;
	request.send();

	console.log("Ajax request has been sent");
	});

view raw gistfile1.js hosted with ❤ by GitHub

Share your knowledge