php服务器交互,AJAX如何实现和后端php的交互（网页如何与 web 服务器进行通信）...

在这里我们将会用一个姓名提示框案例来简单说明；

当用户在输入框中键入字符时，网页与 web 服务器进行通信，服务器返回提示信息，传给网页；

先看一下界面：

在html页面中：

思路：就是当用户在上面的输入框中键入a-z字符时，就会执行匹配姓名函数 "showHint()" 此时姓名匹配函数被"onkeyup" 事件触发调用AJAX，向服务器发送请求和接收数据。

具体的代码：

Title

在输入框中尝试输入字母 a-z的任意字符:

输入姓名:

提示信息:

function showHint(str)

// 姓名匹配函数

{

var xmlhttp;

// 创建客户端请求对象的变量

if (str.length==0)

// 如果此时没有输入字符

{

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

// 如果输入框为空 (str.length==0)，则该函数清空 tip 占位符的内容，并退出函数

return;

// 结束函数操作

}

// 如果输入框不为空，showHint() 函数执行以下任务：

/*创建 XMLHttpRequest 对象

当服务器响应就绪时执行函数

把请求发送到服务器上的文件

请注意我们向 URL 添加了一个参数 q (带有输入框的内容)

*/

if (window.XMLHttpRequest)

// 兼容浏览器，分情况创建客户端请求对象

{

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp=new XMLHttpRequest();

}

else

{

// IE6, IE5 浏览器执行代码

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

// ajax的执行状态函数

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

// 如果服务器响应完成时

{

document.getElementById("tip").innerHTML=xmlhttp.responseText;

// 将服务器响应发送到前端的数据填入到提示信息下；

}

}

xmlhttp.open("GET","运行php文件后赋值地址栏？号前的地址?q="+str,true);

// 客户端打开服务器的方式是get 路径 路径上所携带输入框中输入的信息 运行模式是异步的方式；

xmlhttp.send();

// 客户端向服务器发送信息

}

在php也就是服务器上，执行的操作

/**

* Created by PhpStorm.

* User: Administrator

* Date: 2018/10/26 0026

* Time: 下午 20:18

*/

// 书写提示姓名数组

$a=array("Anna","Brittany","Cinderella","Diana","Eva",

"Fiona","Gunda","Hege","Inga","Johanna","Kitty",

"Linda","Nina","Ophelia","Petunia","Amanda","Raquel","Cindy",

"Doris","Eve","Evita","Sunniva","Tove","Unni","Violet","Liza",

"Elizabeth","Ellen","Wenche","Vicky");

//从URL里面获取q参数，也就是用户输入提示框的信息；

$q=$_GET["q"];

$hint="";// hint是返回给前端/页面的数据

//如果输入框中有信息输入，那么就从姓名数组中查找是否有匹配项

if (strlen($q) > 0)

{

for($i=0; $i

{

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

//将输入进来的字符从头到结束都转换成小写字母，

//如果此时从头到尾姓名数组里面有和他相同的匀速匹配，

{

if ($hint=="")

{//如果此时提示信息为空

$hint=$a[$i];

// 将找的对应元素放入到提示数组中区

}

else

{ //否则就在提示数组的后面加“，”拼接找到的对应姓名里的元素的值；

$hint=$hint." , ".$a[$i];

}

}

}

}

// Set output to "no suggestion" if no hint were found

//如果在姓名数组中没找到对应项，将提示输出设置为“没有建议”

if ($hint == "")

{

// 如果提示信息为空

$response="no reguest";

// 响应前端 发送给前端没有建议

}

else

{

$response=$hint;

// 否则 响应前端 将当前的提示数组赋值给前端，

}

//输出响应

echo $response;