Calling Another Domain in Ajax

You’ll find that if you try to access Google Suggest directly from an Ajax-enabled Web page that there’s going to be an issue: your browser will display a warning message in a dialog box. In other words, when an Ajax script tries to access a Web domain that it didn’t come from (such as www.google.com), browsers get suspicious for security reasons. (If it tries to access the domain it came from, there’s no problem.)

However, living with a warning dialog box each time someone uses your script isn’t an option, either. So what can you do? You’ll find all kinds of suggestions in the Ajax community, such as changing the security settings of your browser. Clearly, that’s not a viable option either; how are you going to convince your millions of users to alter their browser’s security settings?

The solution is to use a server-side script to access the sensitive domain for you. Because it’s not your browser that’s accessing that domain, there’s no problem. You already saw this at work with google.php, which is what accessed Google Suggest for you:

<?php $filehandle =

fopen("http://www.google.com/complete/search?hl=en&js=true&qu=" .


$_GET["qu"], "r");

while (!feof($filehandle)){ $download = fgets($filehandle); echo $download; } ?>

That’s the way to get around the problem. If you need to access a domain other than the one that your Ajax page came from, use server-side code to do the actual accessing.

A Login Example

Note that the Google Suggest application discussed earlier indicates a new use of Ajax: you can now check every key as it’s typed. You might not want to do that everywhere in your application; checking every key can be quite a bottleneck, but you might need it in special cases, as when users enter a password or username and you want to tell that what they’re typing has already been used.

Take a look at an example in the downloadable code for this book: username.html and username.php. The username.html document asks users to enter the username they want, as you see in Figure 4.8.

image from book
Figure 4.8: Checking a user ’s suggested username

If users take a username that’s already taken, such as nancy , the application informs them immediately that their username is not available, as you see in Figure 4.9.

image from book
Figure 4.9: Rejecting a user’s suggested username

The username.php script is easy enough; all it does is echo no if the username is nancy , and yes otherwise :

<?php if ($_GET["qu"] == "nancy"){ echo "no"; } else { echo "yes"; } ?>

How does username.html work? It just watches as the user types keystrokes, calling a function named checkUsername for each keystroke:

<body> <H1>Select a username</H1>

Select your username <input id = "username" type = "text"



name

= "username" onkeyup = "checkUsername(event)">

<div id = "targetDiv"><div></div></div> </body>

In the checkUsername function, the user’s entered username is passed on to the username.php function as the parameter named qu :

function checkUsername(keyEvent) { var targetDiv = document.getElementById("targetDiv"); targetDiv.innerHTML = "<div></div>"; var input = document.getElementById("username");

if (input.value) {


getData("username.php?qu=" + input.value);


}

}

All that’s left is to handle the value returned from username.php, yes or no , which is done in the getData function:

function getData(dataSource) { var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } if(XMLHttpRequestObject) { XMLHttpRequestObject.

open

("GET", dataSource);

XMLHttpRequestObject.

onreadystatechange

= function()


{


if (XMLHttpRequestObject.

readyState

== 4 &&


XMLHttpRequestObject.status == 200) {


if(XMLHttpRequestObject.responseText == "no"){


var targetDiv =


document.getElementById("targetDiv");


targetDiv.innerHTML =


"<div>That username is not available.</div>";


}


}


}

XMLHttpRequestObject.send(null); } }

Flylib.com

Category list

Similar pages

Calling Another Domain in Ajax

Calling Another Domain in Ajax

A Login Example

Similar products

Similar products