很多在做网站建设的小伙伴对Ajax不是很了解，本文优网科技资深技术员将会为你详解Ajax。

什么是ajax?

    Ajax=异步JavaScript+XML

    Ajax是一种快速创建动态网页的技术

简单来说就是局部刷新，而不是整个网页刷新。就比如说一间房子，它可能桌子底下有垃圾，这时叫你去打扫，你是整个房间扫一遍呢，还是只扫桌子下的那个区域？

现在ajax已经成为web必不可少的一部分，有许多网站也应到了ajax技术

如：

这种效果是如何实现的呢？一下为你慢慢讲解

Ajax执行过程：

步创建对象

所以的浏览器都能创建XMLHttpRequest对象，只不过老版本的IE5、IE6创建对象方式不一样

//IE7+, Firefox, Chrome, Opera, Safari

xmlhttprequest=new XMLHttpRequest();

//IE6, IE5

xmlhttprequest=new ActiveXObject(“Microsoft.XMLHTTP”);

第二步向服务器发送请求

该对象其中有连个方法是用来向发送请求的。open()与send()

xmlhttp.open("GET","index.php",true);

xmlhttp.send();

open(method,url,async)有三个参数

Method：post与get 两者的差别相信学过php基础的都知道

Url：服务器处理文件，简单来说你要把用户的请求放到哪个文件处理

Async：ture(异步)  false(同步) 默认是true  建议使用true

第三步响应

    如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText 获取字符串

responseXML 获取xml形式的数据

    当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

第四步ajax应用

Html代码

<div style="width:600px;margin:100px auto;">

    <input type="text" name="sname" value="" onkeyup="search(this.value)" /><input type="submit" name="submit" value="提交" />

    <div id="search_con"></div>

</div>

Javascript代码

<script>

function search(str){

if(str==""){

document.getElementById("search_con").innerHTML="";

}

var xmlhttprequest;

//创建xmlhttprequest对象

if(window.XMLHttpRequest){

//IE7+, Firefox, Chrome, Opera, Safari

xmlhttprequest=new XMLHttpRequest();

}else{

//IE6, IE5

xmlhttprequest=new ActiveXObject();

}

//发送请求

xmlhttprequest.open('get','index.php?q='+str,true);

xmlhttprequest.send();

xmlhttprequest.onreadystatechange=function(){

if(xmlhttprequest.readyState==4&&xmlhttprequest.status==200){

document.getElementById("search_con").innerHTML=xmlhttprequest.responseText;

}

}

}

</script>

Php代码

<?php

$str=$_GET['q'];

$a[]="Anna";

$a[]="Brittany";

$a[]="baby";

$a[]="baby 整容";

$a[]="Nina";

$a[]="Ophelia";

$a[]="Petunia";

$a[]="Amanda";

$text="";

for($i=0;$i<count($a);$i++){

if($str==''){$text='';}else{

if(strtolower($str)==strtolower(substr($a[$i],0,strlen($str)))){

$text=$text.'<br/>'.$a[$i];

}

}

}

echo $text;

?>

責任編輯：優網科技

版權所有：http://www.cqyjsw.com (優網科技) 轉載請注明出處