Ajax steps

最新推荐文章于 2021-08-07 01:43:20 发布

Double_Check

最新推荐文章于 2021-08-07 01:43:20 发布

阅读量493

点赞数

分类专栏： Web编程

本文链接：https://blog.csdn.net/ganggang112800/article/details/17038437

版权

Web编程专栏收录该内容

39 篇文章 0 订阅

订阅专栏

1. step:

create the object: XMLHttpRequest;

Maybe Remember the following forms should be a good way.

var xrt;

if(window.XMLHttpRequest)

{

xrt=new XMLHttpRequest();

}

else

{

xrt=new ActiveXObject("Microsoft.XMLHttp");

}

Then we have created the object already.

2. step

send a request to the server:

we usually use open and send methods to implement this function.

The Object of XMLHttpRequest has two methods: open and send;

open:

there parameters:

1)methods: two types of request: post and get;

2) URL: the location of the file on the server;

3) ASYN: true (asynchronous异步) or false (synchronous同步)

URL：Yeah， we should initialize the file on the server, it is like the address of the file;

3. step:

Server response

We use the object of XMLHttpResponse's two properties. responseText or responseXML;

responseText: response the data as a string

while responseXML: response the data as XML data;

4. Ajax the onreadystatechange event:

The onreadystatechange event is always triggered by the readyState changing. The readyState holds the status of the XMLHttpRequest;

1) readyState and status

200 Ok

404 not found;

The following is an example:

<html>
<head>
<title>Show Hint</title>
<script type="text/javascript">
function showHint(str){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHttp");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("suggestion").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getCityState.php?q="+str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Start typeing a name in the input field below:</h3>
<label>First Name:</label>
<input type="text" name="firstname" οnkeyup="showHint(this.value)" />
<div>
<label>Suggestion:</label>
<span id="suggestion"></span>
</div>
</body>
</html>

//The following one is the GetCityState.php file

<?php
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

$q=$_GET["q"];
if(strlen($q)>0){
$hint="";
for($i=0;$i<count($a);$i++){
if(strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
if($hint=="")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
echo $response;
?>

//One important thing is that please use the correct capital letter: