常規ajax是指客戶端->服務端
反向ajax是指服務端->客戶端
以下是文件：
1.client.php
<title>用戶窗口</title>
<center>
<div>
<div>
<h3>屌絲窗口</h3>
</div>
<div>
<textarea cols="50" rows="8" id="textarea1"></textarea>
</div>
<div>
<textarea cols="40" rows="4" id="textarea2"></textarea>
</div>
<div>
<input type="button" id="btn" value="發送">
</div>
</div>
<center>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").on("click",function(){
var content=$("#textarea2").val();
if(content==""){
alert("發送的內容不能爲空");die;
}
$.ajax({
type:"post",
url:"toServer.php",
data:"content="+content,
success:function(msg){
var msg=eval(msg);
$("#textarea1").append("你向客服發送:"+msg+"\r\n");
$("#textarea2").val("");
}
})
})
//用ajax輪詢的方式從數據庫讀取客服是否有消息發送給用戶
var setting={
"url":"fromServer.php",
"dataType":"json",
success:function(res){
var obj=eval(res);
$("#textarea1").append("客服向你發送:"+obj.content+"\r\n");
$.ajax(setting);
}
};
$.ajax(setting);
})
</script>
2.toserver.php
<?php
//用戶向客服發送消息
//連接數據庫
require("./connect.php");
//接受數據
$content=$_POST['content'];
//判斷數據是否爲空
if(!empty($content)){
//添加數據庫
$sql="insert into chat_log(rec,sender,content) values('admin','user','$content')";
mysql_query($sql);
echo json_encode($content);
}
3.server.php
<title>客服窗口</title>
<center>
<iframe src="./fromClient.php" width="0" height="0"></iframe>
<div>
<div>
<h3>客服美眉窗口</h3>
</div>
<div>
<textarea cols="50" rows="8" id="textarea1"></textarea>
</div>
<div>
<textarea cols="40" rows="4" id="textarea2"></textarea>
</div>
<div>
<input type="button" id="btn" value="發送">
</div>
</div>
<center>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript">
function showMsg(msg){
var obj=eval(msg);
$("#textarea1").append("user向你發送:"+obj.content+"\r\n");
}
$(function(){
$("#btn").on("click",function(){
var content=$("#textarea2").val();
if(content==""){
alert("發送的內容不能爲空");die;
}
$.ajax({
type:"post",
url:"toClient.php",
data:"content="+content,
success:function(msg){
var msg=eval(msg);
$("#textarea1").append("你向用戶發送:"+msg+"\r\n");
$("#textarea2").val("");
}
})
})
})
</script>
4.fromclient.php
<?php
//反向ajax原理---http長連接+ob緩存
//實時查詢是否有用戶向客服發送消息
require('./connect.php');
ob_start();
echo str_repeat("",4096);//填充一些字符串，默認緩存大小爲4096
ob_end_flush();
ob_flush();
//$i=1;//死循環
while(true)
{
//echo $i++;
$sql="select * from chat_log where rec='admin' and is_new=1 order by log_id limit 1";
$res=mysql_query($sql,$link);
if($row=mysql_fetch_assoc($res))
{
$sql="update chat_log set is_new=0 where log_id=".$row['log_id'];
mysql_query($sql,$link);
echo "<script>parent.showMsg(".json_encode($row).");</script>";
ob_flush();//ob刷新到web服務器
flush();//輸出到瀏覽器
sleep(1);//每秒刷新一次
}
}
5.toclient.php
<?php
//客服向用戶發送消息
//連接數據庫
require("./connect.php");
//接受數據
$content=$_POST['content'];
//判斷數據是否爲空
if(!empty($content)){
//添加數據庫
$sql="insert into chat_log(rec,sender,content) values('user','admin','$content')";
mysql_query($sql);
echo json_encode($content);
}
6.fromServer.php
<?php
//查詢客服是否有消息發送給用戶
require("./connect.php");
set_time_limit(0);
while(true){
$sql="select * from chat_log where rec='user' and is_new=1 order by log_id limit 1";
$res=mysql_query($sql);
if($row=mysql_fetch_assoc($res)){
$sql="update chat_log set is_new=0 where log_id=".$row['log_id'];
mysql_query($sql);
die(json_encode($row));
}
}
7.connect.php
<?php
//連接數據庫
$link=mysql_connect('localhost','root','');
mysql_query("set names utf8",$link);
mysql_select_db('mytest');