AJAX Programming
Moderator: General Moderators
-
php.newbie
- Forum Newbie
- Posts: 16
- Joined: Wed Sep 20, 2006 3:28 am
AJAX Programming
Dear all,
I want to do something like answers.com.
When I type something into the text box on the top, there is a text selection area retrieved from database for us to select. I find it very usefull for user to search something and I really wish to implement it into my site.
I know it uses Ajax programming.
Anyone know exactly how they do it?
Any help is greated appreciated.
Thanks in advance.
I want to do something like answers.com.
When I type something into the text box on the top, there is a text selection area retrieved from database for us to select. I find it very usefull for user to search something and I really wish to implement it into my site.
I know it uses Ajax programming.
Anyone know exactly how they do it?
Any help is greated appreciated.
Thanks in advance.
-
php.newbie
- Forum Newbie
- Posts: 16
- Joined: Wed Sep 20, 2006 3:28 am
-
php.newbie
- Forum Newbie
- Posts: 16
- Joined: Wed Sep 20, 2006 3:28 am
index.php
search.php
I got bored...
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style>
#text{
width:300px;
height:200px;
border:1px solid black;
}
</style>
<body>
<script language="javascript">
function getHTTPObject() {
var req;
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
} else if(window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
}
}
}
return req;
}
var http = getHTTPObject();
function handleHttpResponse() {
if (http.readyState == 4) {
// Gets Results as a Javascript Array but spliting the data by commas
var results = http.responseText.split(',');
document.getElementById('text').innerHTML = results;
}
}
//
function getdata(){
var that = document.test.text.value;
http.open("GET", 'http://www.zoxive.com/tests/search.php?search=' + that, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
</script>
<form name="test">
<input type="text" name="text" onkeyup="getdata();" />
</form>
<div id="text">
</div>
</body>
</html>Code: Select all
<?php
if(isset($_GET['search'])){
print $_GET['search'] . ',' . $_GET['search'] . ',' . $_GET['search'];
}else{
print 'Error';
}
?>-
php.newbie
- Forum Newbie
- Posts: 16
- Joined: Wed Sep 20, 2006 3:28 am
-
php.newbie
- Forum Newbie
- Posts: 16
- Joined: Wed Sep 20, 2006 3:28 am
I guess i should of tested it with Internet Explorer also
index.php
index.php
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style>
#textover{
width:300px;
height:200px;
border:1px solid black;
}
</style>
<body>
<script language="javascript">
function getHTTPObject() {
var req;
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
} else if(window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
}
}
}
return req;
}
var http = getHTTPObject();
function handleHttpResponse() {
if (http.readyState == 4) {
// Gets Results as a Javascript Array but spliting the data by commas
var results = http.responseText.split(',');
// Get Browser Info
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer"){
textover.innerHTML = results;
}else{
document.getElementById('textover').innerHTML = results;
}
}
}
//
function getdata(){
var that = document.test.text.value;
http.open("GET", 'http://www.zoxive.com/tests/search.php?search=' + that, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
</script>
<form name="test">
<input type="text" name="text" onkeyup="getdata();" />
</form>
<div id="textover">
</div>
</body>
</html>