Ajax tutorial not working with my changes

JavaScript
1

I was following this tutorial to create an ajax page (my first one): http://www.tizag.com/ajaxTutorial/ajaxphp.php – this is the last page of the series of tuts.

However, I changed one thing - instead of a php page, I used an HTML page containing only:

<script>
document.write(“Hello World!”);
</script>

I was hoping that the string would appear in the “time” box. But nothing appears there. I had also updated the script to reflect the HTML filename.

I’m not using PHP, ASP or anything like that. I’d just like to stick to HTML, CSS, and JS (but not Jquery). How do I adjust the tutorial code to pull information from a page other than PHP or ASP – preferably a JS page?

My goal eventually is to add a + button to a page that will increase the font size with CSS. This code will go into an Android app. I believe I need to learn Ajax to make this happen. Because it’s going in a device, I can’t use PHP or ASP, which several Ajax tuts I’ve looked at, all use.

Thanks!

2

I think I’m doing this all wrong. I think I can do what I want with LocalStorage.

3

Hi Steven,

First, it makes no difference what technology creates the response, xmlhttprequest only ever returns XML or plain text which is usually HTML, or a JSON string which can be parsed back into a javascript object. Your page can just contain the text “Hello World!” without the script tags.

If you followed along you should have code like this.
log the responseText to make sure the code is working and it should read Hello World!


ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
                console.log(ajaxRequest.responseText);
		document.myForm.time.value = ajaxRequest.responseText;
	}
}

My goal eventually is to add a + button to a page that will increase the font size with CSS. This code will go into an Android app. I believe I need to learn Ajax to make this happen. Because it’s going in a device, I can’t use PHP or ASP, which several Ajax tuts I’ve looked at, all use.

Of course you can :slight_smile:
All browsers understand is HTML, CSS and Javascript, it doesn’t matter how it’s generated.

You don’t need ajax either for a font-size switcher. Just alternate stylesheets and a small script to alternate them.

4

It looks like the font-size switcher above depends on the user changing the font size for each page. I want the user to go to a designated page in the app, tap a 2x or 3x button and see (via Ajax) a sample of the pages’ type changing. The user’s preference is logged in localStorage, then every page will pull the value from localStorage and render itself according to the value previously entered.

<div id=“style”></div>
<input type=“button” onclick=“changeLink1()” value=“Default Size”>
<input type=“button” onclick=“changeLink2()” value=“2x default”>
<input type=“button” onclick=“changeLink3()” value=“3x default”>

<script>
function changeLink1()
{
document.getElementById(‘style’).innerHTML=“”;
}
function changeLink2()
{
document.getElementById(‘style’).innerHTML=“<style type=‘text/css’>p{font-size:1.3em;}</style>”;
}
function changeLink3()
{
document.getElementById(‘style’).innerHTML=“<style type=‘text/css’>p{font-size:1.6em;}</style>”;
}
</script>

Right now, I don’t know how to get the value into localStorage so the other pages can render the styles.

5

You misunderstand what Ajax does. It communicates with the server.

In this case you don’t need to, that script I posted saves the preference as a cookie - which is similar to localstorage but works for everyone.
http://www.alistapart.com/d/relafont/styleswitcher.js


<input type="button" onclick="setActiveStyleSheet('A')" value="Default Size">
<input type="button" onclick="setActiveStyleSheet('A+')" value="2x default">
<input type="button" onclick="setActiveStyleSheet('A++')" value="3x default">

Please try following that tutorial because it does exactly what you want.