phpAjax
来源：互联网 发布：怎么申请做淘宝客服 编辑：程序博客网 时间：2024/06/05 06:43
一、 Introduction
ajax，asynchronous javascript and xml，异步javascript和xml。是可以与服务器进行交互的技术之一。语言载体是javascript。最大特点是页面不刷新，用户体验好。
比如，用户注册时，不刷新提示用户名是否使用。
二、 使用ajax
1. ajax向服务器发起请求
function f1(){
//1,创建ajax对象
var xhr = newXMLHttpRequest();
// var xhr = newActiveXObject("Msxml2.XMLHTTP.6.0");
//2，创建一个新的http请求协议，并设置请求的服务端地址
//对象.open(请求方式get/post,url服务器地址)
xhr.open('get','./ajax1.php')
//3，把http请求发送给服务器
//对象.send(null/post请求数据)
xhr.send(null);
}
2. ajax接收服务器返回信息
浏览器可以接收的信息，ajax都可以接收，例如字符串、html标签、css样式内容、xml内容、json内容等。需要结合readyState/onreadystatechange/responseText等属性操作。
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
</style>
<script>
function f1(){
//1,创建ajax对象
var xhr = newXMLHttpRequest();
// var xhr = newActiveXObject("Msxml2.XMLHTTP.6.0");
//2，创建一个新的http请求协议，并设置请求的服务端地址
//对象.open(请求方式get/post,url服务器地址)
xhr.open('get','./ajaxres.php')
//3，把http请求发送给服务器
//对象.send(null/post请求数据)
xhr.send(null);
xhr.onreadystatechange= function(){
if(xhr.readyState==4){
console.log(xhr.responseText);
document.getElementById("getres").innerHTML= xhr.responseText;
}
}
}
</script>
</head>
<body>
<h2>ajax发起请求</h2>
<inputtype="button" value="qingqiu" onclick="f1()"/>
<div id="getres"></div>
</body>
</html>
php页面
<?php
echo "<div style='color:red;''>返回ajax的请求</div>";
3. get和post方式的ajax请求
get和post的不同
给浏览器传递数据数量，get方式大小受限于浏览器，大部分是2k限制。post原则没有限制，php.ini默认限制为8M。
安全方面，post传递数据相对安全。
传递数据的形式不一样，get方式在url地址后边以请求字符串形式传递参数。post方式是把form表达的数据请求出来以xml形式传递给服务器。
ajax的get请求需要注意，在url地址后边以请求字符串形式传递数据；对中文、=、&等特殊符号处理。在浏览器中通过get参数传递一些特殊符号信息会被误解混淆，例如&、=等。为了避免这种情况，可以对该信息进行编码处理。在php里使用函数urlencode()/urldecode()对特殊符号进行编码，反编码处理。javascript里通过encodeRUIComponent()对特殊符号等信息进行编码。
使用get方式处理编码的例子：
function checkname(){
var name =document.getElementById("username").value;
name =encodeURIComponent(name);
var xhr = newXMLHttpRequest();
xhr.onreadystatechange= function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
}
xhr.open('get','./ajaxres.php?name='+name);
xhr.send(null);
}
php页面
<?php
// echo "<div style='color:red;''>返回ajax的请求</div>";
$arr = array("haha","hehe","heiheie");
// print_r($_GET);
$name = $_GET['name'];
if(in_array($name, $arr)) {
echo "用户名已经存在";
} else {
echo "可以使用";
}
post方式发送ajax请求
function checkname(){
var name =document.getElementById("username").value;
// name =encodeURIComponent(name);
var xhr = newXMLHttpRequest();
// 把传递到服务其的数据组织为请求字符串
var info ='name='+name+'&age=12';
xhr.onreadystatechange= function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
}
xhr.open('post','./ajaxres.php');
//通过把数据模拟为form表单的样子提交给服务器
//form表达的数据组织为xml格式传递给服务器端
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send(info);
}
4. 同步、异步
ajax对象.open(方式get/post,url地址,[异步true]同步false);
ajax可以与服务器进行异步或同步交互。异步，同一个时间点允许执行多个进程；同步，同一个时间点只允许执行一个进程。
绝大多数情况，使用异步请求，有时候也使用同步请求。例如页面有两部分内容，ajax请求内容和html内容输出，如果html内容输出包括ajax请求的内容，就需要使得ajax请求完成了再进行html内容输出，这样就需要一前一后调用，需要同步请求。
三、 ajax无刷新分页效果
使用传统的刷新页面的分页的方式，对带宽、服务器资源、用户等待时间都有额外的损耗，如果使用ajax无刷新分页，对各方面资源的使用都有相应的节省，很必要。
<scripttype="text/javascript">
function showPage(url){
var xhr = newXMLHttpRequest();
xhr.onreadystatechange= function(){
if(xhr.readyState==4){
//alert(xhr.responseText);
vardivresult = document.getElementById('result');
divresult.innerHTML= xhr.responseText;
}
}
xhr.open('get',url)
xhr.send(null);
}
//页面加载完毕，就获得ajax请求的信息
window.onload = function(){
showPage('./data.php?page=1');
}
</script>
四、 ajax对xml信息的接收和处理
ajax负责处理xml和接收xml，dom负责处理xml信息。比如，开发微信接口，微信里边大部分数据都是通过xml形式给组织起来的。
function showXML(){
//ajax负责获得服务器端的xml信息
//javascript的dom技术负责解析xml信息
var xhr = newXMLHttpRequest();
xhr.onreadystatechange= function(){
if(xhr.readyState==4){
//alert(xhr.responseText);//以字符串接收服务端信息
//alert(xhr.responseXML);//以xml接收服务端信息（类似document对象）
varxmldom = xhr.responseXML;
varmessage = xhr.responseXML.firstChild
console.log(message.childNodes);//空白也算作子节点
varmsgs = xmldom.getElementsByTagName("msg");
console.log(msgs);
/*for(vark in msgs[0]){
//console.log(k);//输出元素节点对象的成员名称。
}*/
var s= "";
for(vari=0; i<msgs.length; i++){
varsender = msgs[i].getElementsByTagName('sender')[0].firstChild.nodeValue;
varrec = msgs[i].getElementsByTagName('recieve')[0].firstChild.nodeValue;
varcont = msgs[i].getElementsByTagName('content')[0].firstChild.nodeValue;
s+= "发送者："+sender+"，接收者："+rec+"，内容："+cont+"<br />";
}
document.getElementById("res").innerHTML= s;
}
}
xhr.open('get','./ajax.xml');
xhr.send(null);
}
五、 ajax对缓存的处理
css、img、js等文件可以缓存，但是动态程序文件如php文件不能缓存，即使缓存一般也需要其缓存效果。浏览器对动态程序文件的缓存的处理是，给请求的地址设置随机数；给动态程序设置header头信息，禁止浏览器对其缓存。
xhr.open('get','./ajax1.php?'+Math.random());
或者
//禁止浏览器缓存当前动态程序文件
header("Cache-Controller:no-cache");
header("Pragma:no-cache");
header("Expires:-1");
六、 thinkphp框架使用ajax
创建失去焦点的事件
function checkname(){
//获得用户输入的用户名信息
var name =document.getElementById("User_username").value;
if(name==""){
document.getElementById('usernamemsg').innerHTML = "请填写名字"
return false;
}
var xhr = newXMLHttpRequest();
xhr.onreadystatechange =function(){
if(xhr.readyState==4){
//alert(xhr.responseText);
document.getElementById('usernamemsg').innerHTML= xhr.responseText;
}
}
//tp框架所有需求都通过控制操作实现
xhr.open('get','{$smarty.const.__CONTROLLER__}/checkNM/name/'+name);
xhr.send(null);
}
user控制器的检验方法
public functioncheckNM($name){
// $name = $_GET('name');
$result =D('User')->where("username='$name'")->find();
if($result===null){
echo "<spanstyle='color:green;'>可以使用</span>";
} else {
echo "<spanstyle='color:red;'>不可以使用</span>";
}
exit;
}
七、 JSON
json，javascript object notation，javascript对象符号。是js的一个字面量对象。也是一种数据交换格式。
json的生成和处理要比xml更加方便，因此在许多领域json正在取代xml。
1. json的使用
json在javascript中的就是字面量对象，格式为var obj = {名称:值,名称:值,名称:function(){}…}
通过php生成json信息
json_encode(数组/对象)生成json信息
json_encode(关联数组)json对象
json_encode(索引数组)json数组
json_encode(索引关联数组)json对象
json_encode(对象)json对象
<?php
//生成json信息
//关联数组
$user = array('user'=>'haha','pass'=>'1234','age'=>'13');
$jn_user = json_encode($user);
echo $jn_user;
echo "<hr />";
//索引数组
$stu = array('stu1','stu2','stu3');
$jn_stu = json_encode($stu);
echo $jn_stu;
2. php处理json信息
json_decode(json信息,boolean);//反编码json信息
对json字符串信息进行反编码，变为当前语言可以识别的信息。
json_decode(json字符串,true);//编码为array
json_decode(json字符串,false);//编码为object
默认为false。
<?php
//生成json信息
//关联数组
$user = array('user'=>'haha','pass'=>'1234','age'=>'13');
$jn_user = json_encode($user);
echo $jn_user;
echo "<hr />";
//索引数组
$stu = array('stu1','stu2','stu3');
$jn_stu = json_encode($stu);
echo $jn_stu;
echo "<hr />";
$fan_user = json_decode($jn_user,true);
var_dump($fan_user);
//对一个json格式的字符串进行反编码操作，要求json字符串是""括住
$jn_per ='{"p1":"haha","p2":"heie","p3":"llele"}';
$fan_per = json_decode($jn_per,true);
echo "<hr />";
var_dump($fan_per);
3. javascript对json的接收和处理
function f1(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange =function(){
if(xhr.readyState==4){
eval("varjn_info="+xhr.responseText);//把json格式的字符串信息转换为对象信息
console.log(jn_info.user);
console.log(jn_info.pass);
console.log(jn_info.age);
}
}
xhr.open('get','./json2.php');
xhr.send(null);
}
4. 使用json改进的无刷新页面
function showPage(url){
var xhr = newXMLHttpRequest();
xhr.onreadystatechange= function(){
if(xhr.readyState==4){
eval("varjn_info="+xhr.responseText);
// var divresult = document.getElementById('result');
// divresult.innerHTML = xhr.responseText;
console.log(jn_info);
//alert(jn_info);
//遍历jn_info
vars="<table><tr><td>id</td><td>名称</td><td>重量</td><td>价格</td><td>数量</td></tr>";
for(varm=0; m<jn_info.length-1; m++){
s+= "<tr>";
s+= "<td>"+jn_info[m].i+"</td>";
s+= "<td>"+jn_info[m].u+"</td>";
s+= "<td>"+jn_info[m].w+"</td>";
s+= "<td>"+jn_info[m].p+"</td>";
s+= "<td>"+jn_info[m].n+"</td>";
s+= "</tr>";
}
s += "<tr><tdcolspan='5'>"+jn_info[jn_info.length-1]+"</td></tr>";
s +="</table>";
document.getElementById('result').innerHTML= s;
}
}
xhr.open('get',url);
xhr.send(null);
}
//页面加载完毕，就获得ajax请求的信息
window.onload = function(){
showPage('./data.php?page=1');
}
八、 其他
1. ajax收集form表达以及使用html5的新特性快速收集表单
window.onload = function(){
var fm =document.getElementsByTagName('form')[0];
fm.onsubmit =function(evt){
//收集表单域信息，并把收集的信息提交给服务器端
/*var nm =document.getElementById('username').value;
var ps =document.getElementById('password').value;
var em =document.getElementById('email').value;*/
//html5快速收集表单信息的方法，使用FormData
//使用注意，
//1，无需调用setRequestHeader方法，
//2，必须设置input的name属性值
//3，表单域信息内部有特殊符号，无须编码
var fd = newFormData(fm);
// var info ="name="+nm+"password="+ps+"em="+em;
var xhr = newXMLHttpRequest();
xhr.onreadystatechange= function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
}
xhr.open('post','11.php');
//xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(fd);
//阻止浏览器form表单的提交动作
evt.preventDefault();
}
}
2. 无刷新附件上传
dom方式只可以收集普通的表单域信息，并且浏览器由于安全方面的限制也禁止通过javacript语言操作本地文件。
可以利用FormData实现附件信息的收集，普通表单域和上传文件域均可以收集。
window.onload = function(){
var fm = document.getElementsByTagName('form')[0];
fm.onsubmit =function(evt){
//收集表单域信息，并把收集的信息提交给服务器端
/*var nm =document.getElementById('username').value;
var ps =document.getElementById('password').value;
var em =document.getElementById('email').value;*/
//html5快速收集表单信息的方法，使用FormData
//使用注意，
//1，无需调用setRequestHeader方法，
//2，必须设置input的name属性值
//3，表单域信息内部有特殊符号，无须编码
var fd = newFormData(fm);
// var info ="name="+nm+"password="+ps+"em="+em;
var xhr = newXMLHttpRequest();
xhr.onreadystatechange= function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
}
xhr.open('post','11.php');
//xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(fd);
//阻止浏览器form表单的提交动作
evt.preventDefault();
}
}
php页面
<?php
// print_r($_POST);
// echo "file:";
// print_r($_FILES);
if($_FILES['userpic']['error']>0){
exit('附件有错误');
}
$path = "./upload/";
$name = date("YmdHis").'-'.mt_rand(1000,9999);
$name_arr = explode('.',$_FILES['userpic']['name']);
$ext = '.'.$name_arr[count($name_arr)-1];
$pathname = $path.$name.$ext;
$z = move_uploaded_file($_FILES['userpic']['tmp_name'], $pathname);
if($z){
echo "success";
}else{
echo "fail";
}
3. 上传大附件进度条设置
php.ini中设置开放大附件上传限制，post_max_size = 220M upload_max_filesize = 200M
ajax对象->upload->ongrogress。这个ongrogress事件每隔100ms左右就执行一次，执行的过程中会感知附件的总大小和已经上传大小等信息。利用这些信息可以设置进度条信息。
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
var fm =document.getElementsByTagName('form')[0];
fm.onsubmit =function(evt){
//收集表单域信息，并把收集的信息提交给服务器端
/*var nm =document.getElementById('username').value;
var ps =document.getElementById('password').value;
var em =document.getElementById('email').value;*/
//html5快速收集表单信息的方法，使用FormData
//使用注意，
//1，无需调用setRequestHeader方法，
//2，必须设置input的name属性值
//3，表单域信息内部有特殊符号，无须编码
var fd = newFormData(fm);
// var info ="name="+nm+"password="+ps+"em="+em;
var xhr = newXMLHttpRequest();
xhr.onreadystatechange= function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
}
xhr.upload.onprogress= function(evt){
//该事件每间隔100s左右执行一次，并通过事件对象感知上传信息
//console.log(evt);
var load =evt.loaded;
var total =evt.total;
//上传百分比
var per =Math.floor((load/total)*100)+"%";
document.getElementById("son").style.width= per;
document.getElementById("son").innerHTML= per;
}
xhr.open('post','11.php');
//xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(fd);
//阻止浏览器form表单的提交动作
evt.preventDefault();
}
}
</script>
<style>
#pat{
width:460px;height:30px;border:2pxsolid blue;
}
#son{
width:0;height:101%;background-color:red;
}
</style>
</head>
<body>
<formmethod="post" action="./111.php" >
<p>用户名：<input type="text" id="username"name="username" /></p>
<p>密码：<input type="text" id="password"name="password" /></p>
<p>邮箱：<input type="text" id="email"name="email" /></p>
<divid="pat"><div id="son"></div></div>
<p>头像：<input type="file" name="userpic"></p>
<p>提交：<input type="submit" value="注册"></p>
</form>
</body>
</html>
九、 案例
1. ajax聊天室
反向推技术就是轮询技术，在客户端每间隔一定事件就去完成一定的任务。
<script type="text/javascript">
//及时显示聊天内容
//利用ajax每间隔2s就去服务器获得一次聊天信息
var maxID = 0;
function showmsg(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange =function(){
if(xhr.readyState==4){
eval("varjn_info="+xhr.responseText);
//jn_info = [{},{}]
//遍历jn_info
var s = "";
for(var i=0;i<jn_info.length; i++){
s += "<pstyle='color:"+jn_info[i].color+"'>"+jn_info[i].sender+" 对 "
s +=jn_info[i].receiver+" "+jn_info[i].biaoqing+" 说：";
s +=jn_info[i].msg+"("+jn_info[i].add_time+")</p>";
maxID =jn_info[i].id;
}
var showdiv =document.getElementById('show_msg');
showdiv.innerHTML +=s;
//设置滚动条卷起高度
//alert(showdiv.scrollHeight);
showdiv.scrollTop =showdiv.scrollHeight-328;
}
}
xhr.open('get','./data.php?id='+maxID);
xhr.send(null);
}
window.onload = function(){
showmsg();
setInterval("showmsg()",2000);
}
</script>
<style type="text/css">
</style>
<script>
function sendmsg(){
var fm =document.getElementsByTagName('form')[0];
//Formdata收集表单信息
var fd = new FormData(fm);
var xhr = newXMLHttpRequest();
xhr.onreadystatechange =function(){
if(xhr.readyState==4){
document.getElementById('sendresult').innerHTML= xhr.responseText;
//表单域归位处理
document.getElementById('color').value = "";
document.getElementById('biaoqing').value = "";
document.getElementById('receiver').value = "";
document.getElementById('msg').value ="";
//2s后清除一次提示信息
setTimeout('hideresult()',2000);
}
}
xhr.open('post','./send.php');
xhr.send(fd);
}
//发表聊天的提示小时
function hideresult(){
document.getElementById('sendresult').innerHTML = "";
}
</script>
获取消息的php页面
<?php
header("content-type:text/html;charset=utf-8");
//获得最新的聊天信息
@$link = mysql_connect('localhost','root','123456');
$id = $_GET['id'];
mysql_select_db('shop',$link);
mysql_query('set names utf8');
$sql = "select * from message where id > $id";
$qry = mysql_query($sql);
$info = array();
while($rst = mysql_fetch_assoc($qry)){
$info[] = $rst;
}
echo json_encode($info);
发送消息的php页面
<?php
//收集发表的聊天信息，并存储
header("content-type:text/html;charset=utf-8");
//获得最新的聊天信息
@$link = mysql_connect('localhost','root','123456');
mysql_select_db('shop',$link);
mysql_query('set names utf8');
$color = $_POST['color'];
$biaoqing = $_POST['biaoqing'];
$receiver = $_POST['receiver'];
$msg = $_POST['msg'];
$sql = "insert into messagevalues(null,'$msg','admin','$receiver','$color','$biaoqing',now())";
$qry = mysql_query($sql);
if($qry){
echo "<spanstyle='color:green;'>发表成功</span>";
}else{
echo "<spanstyle='color:red;'>发表失败</span>";
}
2. 设置天气预报
浏览器由于安全方面的问题，禁止ajax跨域请求其他网站的数据。解决方法是利用本域php代理间接获得其他网站的数据。
不同地区需要显示该地区对应的天气信息。利用ip地址获得城市信息，然后根据城市信息获得城市编码，根据城市编码获得对应的url。
通过ip地址接口可以获得ip地址所在的城市。
