反向Ajax技術(shù)，又稱為服務(wù)器推技術(shù)，server push等。一般用于“在線客服”、“消息推送”、“即時(shí)通信”等功能中，比如新浪微博的私信功能，就是客戶端不斷的請(qǐng)求服務(wù)器并創(chuàng)建連接，去查看服務(wù)器有沒有返回的信息，建立連接比較浪費(fèi)服務(wù)器資源，下面我將根據(jù)客戶端創(chuàng)建連接的不同性來介紹一下實(shí)現(xiàn)反向Ajax的三種思路。
三種思路：
1、間隔固定時(shí)間創(chuàng)建連接
這種方式就是按照固定時(shí)間不斷的去請(qǐng)求服務(wù)器，當(dāng)創(chuàng)建第一個(gè)連接時(shí)，不管是否有數(shù)據(jù)返回，此次連接都會(huì)失效，然后隔一段時(shí)間發(fā)出第二個(gè)請(qǐng)求，不斷重復(fù)此動(dòng)作，此法最浪費(fèi)資源。
2、長連接方式
這種方式始終只創(chuàng)建一個(gè)連接，而這個(gè)連接不斷開，被稱為長時(shí)連接，以此不斷獲取服務(wù)器推送的數(shù)據(jù)，這種方式只創(chuàng)建一個(gè)連接，比第一種方法較好。
3、長連接+長輪詢方式
這種方式始終創(chuàng)建連接，而這個(gè)連接也是長時(shí)連接，但是如果獲得服務(wù)器推送的數(shù)據(jù)，此連接斷開，然后隔固定時(shí)間創(chuàng)建第二此連接，這種方式最好，新浪微博的私信功能用的就是這種方法。
在線客服系統(tǒng)
實(shí)現(xiàn)思路：
（1）咨詢用戶端發(fā)出問題，把問題存入數(shù)據(jù)庫，把咨詢內(nèi)容顯示到客服人員的聊天窗口中（2）客服人員看到聊天窗口后，選擇咨詢用戶，進(jìn)行回復(fù)，然后把回復(fù)內(nèi)容顯示到客服人員窗口中
實(shí)現(xiàn)方法：
此系統(tǒng)我采用上述思想中的第二種和第三種方式共同實(shí)現(xiàn)，咨詢用戶端采用第三種方式實(shí)現(xiàn)，客服人員端采用第二種方式實(shí)現(xiàn)。
數(shù)據(jù)庫信息：
mid：主鍵，pos表示發(fā)送人，rec表示接收人，isread表示是否已讀，content表示咨詢/回復(fù)內(nèi)容。
項(xiàng)目結(jié)構(gòu)圖：
客服人員界面（16-kefu-amdin.php）：
此處采用長連接。頁面中主要有一個(gè)div，用于顯示聊天信息，還有一個(gè)隱藏的iframe標(biāo)簽，這個(gè)iframe實(shí)現(xiàn)反向Ajax模型，用于發(fā)送長時(shí)連接，當(dāng)服務(wù)器有數(shù)據(jù)時(shí)，服務(wù)器將調(diào)用comet()方法，此方法顯示咨詢內(nèi)容，choose()方法是選擇咨詢?nèi)?，resp()是回復(fù)方法，在這里會(huì)向16-kefu-sendmsg.php頁面發(fā)出ajax請(qǐng)求，向數(shù)據(jù)庫插入一條回復(fù)信息，回復(fù)成功后并顯示到聊天窗口中。
<?php
setcookie('username','admin');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>客服功能——客服人員端</title>
<link rel="stylesheet" href="">
<script> var xhr = new XMLHttpRequest();
//服務(wù)器調(diào)用函數(shù)
function comet(json){
var content = '<p style="text-align:left"><span onclick="choose(''+ json.pos +'');">' + json.pos + '</span>說：'+json.content+'</p>';
var old = document.getElementById('chatArea').innerHTML;
document.getElementById('chatArea').innerHTML = old + content;
}
//咨詢?nèi)诉x擇函數(shù)
function choose(pos){
document.getElementById('postman').innerHTML = pos;
}
//客服人員回復(fù)函數(shù)
function resp(){
var respContent = document.getElementById('respContent').value;
var pos = document.getElementById('postman').innerHTML;
if(respContent == '' || pos == ''){
alert('請(qǐng)重新選擇回復(fù)人或填寫回復(fù)內(nèi)容');
return;
}
//ajax提交請(qǐng)求
xhr.open('POST','16-kefu-sendmsg.php',true);
xhr.setRequestHeader('Content-Type','Application/x-www-form-urlencoded');
xhr.onreadystatechange = function (){
if(this.readyState == 4 && this.status == 200){
if(this.responseText == 'ok'){
//回復(fù)成功，把回復(fù)信息顯示到聊天界面中
var content = '<p style="text-align:right">你回復(fù)'+ pos + '：'+respContent+'</p>';
var old = document.getElementById('chatArea').innerHTML;
document.getElementById('chatArea').innerHTML = old + content;
document.getElementById('respContent').value = '';//給回復(fù)內(nèi)容重新置空
}
}
}
var sendData = 'rec=' + pos + '&content='+respContent;
xhr.send(sendData);
} </script>
<style> #chatArea{
width:500px;
height:400px;
border:1px solid black;
overflow: scroll;
}</style>
</head>
<body>
<h1>客服功能——客服人員端</h1>
<h2>原理：iframe+長連接</h2>
<div id="chatArea">
</div>
<iframe width="0" height="0" frameborder="0" name="frame" src="./16-kefu-iframe.php"></iframe>
<p>咨詢?nèi)耍?lt;span id="postman"></span></p>
<p><textarea id="respContent"></textarea></p>
<p><input type="button" value="回復(fù)" onclick="resp();" /></p>
</body>
</html>
