PHP
PHP 即 “超文本预处理器”,是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言,与C语言类似,是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法。利于学习,使用广泛,主要适用于Web开发领域。
Ajax
AJAX = Asynchronous JavaScript And XML(异步 JavaScript 及 XML)
AJAX 是 Asynchronous JavaScript And XML 的首字母缩写。
AJAX 并不是一种新的编程语言,而仅仅是一种新的技术,它可以创建更好、更快且交互性更强的 web 应用程序。
AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据。
通过在幕后与 web 服务器交换数据,而不是每当用户作出改变时重载整个 web 页面,AJAX 技术可以使网页更迅速地响应。
ajax原理
ajax就是部分更新页面,其实还在的html页面监听到事件后,然后传给服务器进行操作,这里用的是get方式来传值到服务器。
ajax和全页面更新的区别
ajax和全页面更新的区别是全页面更新返回的是整个页面,而ajax只返回的是修改部分的数据, 而且主要是通过window对象的XMLHttpRequest对象来实现的。
实现ajax的步骤
实现ajax服务器端就是返回部分数据,页面端就是新建对象然后执行这个对象的几个函数,1)、创建对象
2)、onreadystatechange
3)、open
4)、send
PHP与Ajax
AJAX 被用于创建交互性更强的应用程序。
实例
以下实例:展示了前台页面如何与后台服务器实现交互的过程(ps:数据是模拟的)
HTML页面:
当用户在上面的输入框中输入字符时会触发 “onkeyup” 事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
position: relative;
width: 300px;
margin: auto;
}
#suggests{
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
border: 1px solid #aaa;
list-style: none;
width: 260px;
display: none;
}
#suggests.active{
display: block;
}
#suggests li{
line-height: 2em;
padding: 0 10px;
cursor: pointer;
}
#suggests li:hover{
background-color: #eee;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="kw"><button>搜索一下</button>
<ul id="suggests">
<li>php</li>
<li>python</li>
</ul>
</div>
<script>
// 拿到input框
var oKw = document.getElementById('kw');
// 绑定事件
oKw.onkeyup = function(){
// 拿到输入的值
var k = this.value;
// 判断输入的值不为空
if(!k){
suggests.classList.remove('active');
return;
}
// 创建对象
var xhr = new XMLHttpRequest();
// 绑定事件
xhr.onreadystatechange = function(){
// 判断请求是否成功
if(xhr.readyState == 4 && xhr.status == 200){
doresponce(xhr);
}
}
// 调用open方法 get方式传值 带参数
xhr.open('GET','search.php?kw=' + k);
// 调用send方法
xhr.send(null);
}
// 请求成功所要执行的函数
function doresponce(xhr){
if(xhr.responseText){
suggests.innerHTML = xhr.responseText;
suggests.classList.add('active');
}else{
suggests.classList.remove('active');
}
}
</script>
</body>
</html>
php文件
上面这段通过 JavaScript 调用的服务器页面是名为 “search.php” 的 PHP 文件。
<?php
header('Content-Type:text/html');
//引入数据
require('data.php');
@$kw = $_REQUEST['kw'] or die('<li>缺少查询数据</li>');
foreach($group as $book){
echo "<li>$book[q]</li>";
}
?>
模拟数据
由上面这段代码能看出来引入的数据名为 “data.php”的PHP文件,因此模拟的数据就放在这个文件中
<?php
$group = [
["type"=>"sug","sa"=>"s_1","q"=>"ph值是什么"],
["type"=>"sug","sa"=>"s_2","q"=>"photoshop"],
["type"=>"sug","sa"=>"s_3","q"=>"ph值"],
["type"=>"sug","sa"=>"s_4","q"=>"photo"],
["type"=>"sug","sa"=>"s_5","q"=>"ph试纸"],
["type"=>"sug","sa"=>"s_6","q"=>"phone"],
["type"=>"sug","sa"=>"s_7","q"=>"phideon辉昂价格"],
["type"=>"sug","sa"=>"s_8","q"=>"ph值大于7是酸性还是碱性"],
["type"=>"sug","sa"=>"s_9","q"=>"physical"],
["type"=>"sug","sa"=>"s_10","q"=>"php从入门到放弃"],
["type"=>"sug","sa"=>"s_11","q"=>"java大全"],
["type"=>"sug","sa"=>"s_12","q"=>"JavaScript权威指南"],
["type"=>"sug","sa"=>"s_13","q"=>"java葵花宝典"],
["type"=>"sug","sa"=>"s_14","q"=>"你不知道的JavaScript"],
["type"=>"sug","sa"=>"s_15","q"=>"高性能的JavaScript"]
];
?>