PHP中Ajax使用总结
2016-03-16 09:41
489 查看
PHP中Ajax处理总结：
Ajax的全称是“AsynchronousJavaScript And XML”，它不是一门新语言，而是一种新技术，它可以创建更好、更快及交互性更强的Web应用程序。Ajax使用了JavaScript脚本在Web客户端与Web服务端之间传递和接收数据，通过在幕后与服务器端进行数据交互，并不是每当用户做出改变时重载整个页面，Ajax可以使网页更快得响应。（技术讨论群：489451956（新））
一、Ajax的特性
1、基于JavaScript、XML、HTML及CSS的开放标准；
这些开放标准得了所有主要浏览器的支持，而且被很好的定义，所以它的兼容问题得到了很好的解决，另外，Ajax 独立于浏览器和平台，是一种跨平台跨浏览器的一门技术。
2、可替代传统的HTML表单提交
基于开放的标准，它的使用度已经很广泛，被很多开发人员所接受和熟悉，我们可以把大多的Web应用程序通过使用Ajax技术进行重写，来替代传统的HTML表单数据交互处理。
3、异步发送和接收数据，减少服务端请求信息量
Ajax是基于浏览器运行的，使用浏览器和服务端异步数据传递，使网页从服务端请求少许的数据，而不是整个页面数据，所以不论在响应速度、资源消耗及交互体验上都很优秀。
二、Ajax的使用
这里举个用户名字，实时请求服务端并将返回信息传递给前端现实例子，具体包括一个HTML、一个JavaScript及一个PHP，如下：
HTML:
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<script
src="__PUBLIC__/htmls/js/jquery-1.8.3.min.js"></script>
<link
rel="stylesheet"href="__PUBLIC__/htmls/css/usercenter/userlogin.css"/>
</head>
<body
style="background-color:#ededed;">
<form>
名字:
<input
type="text"id="hint"
onkeyup="showHint(this.value)">
</form>
<p>匹配提示:
<span
id="txtHint"></span></p>
</body>
</html>
JavaScript:
<script
type="text/javascript">
var xmlHttp =
null;
/*鼠标移开触发事件*/
showHint= function(str) {
if(str.length==0) {
document.getElementById("account_hint").innerHTML="";
return;
}
// 获得XMLHTTPRequest对象
xmlHttp= GetXMLHTTPRequest();
if(null == xmlHttp) {
alert("Broswer is not support HTTPrequest!");
return;
}
// 拼接url及参数
var url="http://127.0.0.1/Study/Php/ajaxCheckAccount";
url=url+"?param="+str;
url=url+"&id="+Math.random();
// 发送请求到服务器
xmlHttp.onreadystatechange= stateChanged ;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
};
/*状态返回处理*/
stateChanged= function(){
if(xmlHttp.readyState == 4 ||xmlHttp.readyState ==
"complete") {
document.getElementById("txtHint").innerHTML = xmlHttp.responseText;
}
};
/*创建XMLHTTPRequest*/
GetXMLHTTPRequest= function(){
var xmlHttp =
null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
// Internet Explorer 6 中可用
} catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer 5.5
及其后版本中可用
}
}
return xmlHttp;
};
</script>
PHP：
<?php
//
该数组是从参考资料copy下来的
$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";
// get the q parameter from URL
$q= $_GET ["param"];
// lookup all hints from array iflength of q>0
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];
}
}
}
}
// Set output to "nosuggestion" if no hint were found
// or to the correct values
if ($hint ==
"") {
$response= "";
} else {
$response= $hint;
}
// return
echo $response;
?>
简单描述下例子的过程，首先用户在浏览器输入框输入名字，每当用户键盘挺住时都会请求下服务端，以获得匹配的名字并返回，当然使用的是JavaScript脚本的XMLHTTPRequest（例子中对它进行了兼容处理）请求，及时很好可及时返回并填充指定页面内容，不需要刷新真个页面，具体的可查看代码中的注释。
效果如下：
注：
后面会对XML进行介绍总结。
Ajax的全称是“AsynchronousJavaScript And XML”，它不是一门新语言，而是一种新技术，它可以创建更好、更快及交互性更强的Web应用程序。Ajax使用了JavaScript脚本在Web客户端与Web服务端之间传递和接收数据，通过在幕后与服务器端进行数据交互，并不是每当用户做出改变时重载整个页面，Ajax可以使网页更快得响应。（技术讨论群：489451956（新））
一、Ajax的特性
1、基于JavaScript、XML、HTML及CSS的开放标准；
这些开放标准得了所有主要浏览器的支持，而且被很好的定义，所以它的兼容问题得到了很好的解决，另外，Ajax 独立于浏览器和平台，是一种跨平台跨浏览器的一门技术。
2、可替代传统的HTML表单提交
基于开放的标准，它的使用度已经很广泛，被很多开发人员所接受和熟悉，我们可以把大多的Web应用程序通过使用Ajax技术进行重写，来替代传统的HTML表单数据交互处理。
3、异步发送和接收数据，减少服务端请求信息量
Ajax是基于浏览器运行的，使用浏览器和服务端异步数据传递，使网页从服务端请求少许的数据，而不是整个页面数据，所以不论在响应速度、资源消耗及交互体验上都很优秀。
二、Ajax的使用
这里举个用户名字，实时请求服务端并将返回信息传递给前端现实例子，具体包括一个HTML、一个JavaScript及一个PHP，如下：
HTML:
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<script
src="__PUBLIC__/htmls/js/jquery-1.8.3.min.js"></script>
<link
rel="stylesheet"href="__PUBLIC__/htmls/css/usercenter/userlogin.css"/>
</head>
<body
style="background-color:#ededed;">
<form>
名字:
<input
type="text"id="hint"
onkeyup="showHint(this.value)">
</form>
<p>匹配提示:
<span
id="txtHint"></span></p>
</body>
</html>
JavaScript:
<script
type="text/javascript">
var xmlHttp =
null;
/*鼠标移开触发事件*/
showHint= function(str) {
if(str.length==0) {
document.getElementById("account_hint").innerHTML="";
return;
}
// 获得XMLHTTPRequest对象
xmlHttp= GetXMLHTTPRequest();
if(null == xmlHttp) {
alert("Broswer is not support HTTPrequest!");
return;
}
// 拼接url及参数
var url="http://127.0.0.1/Study/Php/ajaxCheckAccount";
url=url+"?param="+str;
url=url+"&id="+Math.random();
// 发送请求到服务器
xmlHttp.onreadystatechange= stateChanged ;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
};
/*状态返回处理*/
stateChanged= function(){
if(xmlHttp.readyState == 4 ||xmlHttp.readyState ==
"complete") {
document.getElementById("txtHint").innerHTML = xmlHttp.responseText;
}
};
/*创建XMLHTTPRequest*/
GetXMLHTTPRequest= function(){
var xmlHttp =
null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
// Internet Explorer 6 中可用
} catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer 5.5
及其后版本中可用
}
}
return xmlHttp;
};
</script>
PHP：
<?php
//
该数组是从参考资料copy下来的
$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";
// get the q parameter from URL
$q= $_GET ["param"];
// lookup all hints from array iflength of q>0
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];
}
}
}
}
// Set output to "nosuggestion" if no hint were found
// or to the correct values
if ($hint ==
"") {
$response= "";
} else {
$response= $hint;
}
// return
echo $response;
?>
简单描述下例子的过程，首先用户在浏览器输入框输入名字，每当用户键盘挺住时都会请求下服务端，以获得匹配的名字并返回，当然使用的是JavaScript脚本的XMLHTTPRequest（例子中对它进行了兼容处理）请求，及时很好可及时返回并填充指定页面内容，不需要刷新真个页面，具体的可查看代码中的注释。
效果如下：
注：
后面会对XML进行介绍总结。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Laravel实现构造函数自动依赖注入的方法
- PHP 二维数组和三维数组的过滤
- PHP函数之类
- PHP设计模式 建造者模式
- php生成csv文件提供给用户下载
- PHP安全有帮助的一些函数
- php wampp 访问数据库
- Atitit.视频文件加密的方法大的总结 java c# php
- Atitit.视频文件加密的方法大的总结 java c# php
- Atitit.视频文件加密的方法大的总结 java c# php
- 正则表达式如何在PHP里灵活的应用
- PHP 二维数组和三维数组的过滤
- Laravel实现构造函数自动依赖注入的方法
- PHP与Ajax相结合实现登录验证小Demo
- Laravel中注册Facades的步骤详解
- Laravel中Trait的用法实例详解
- PHP 中提示undefined index如何解决(多种方法)
- Laravel执行migrate命令提示：No such file or directory的解决方法
- PHP5.5迭代生成器用法实例详解
- PHP Static延迟静态绑定用法分析