Ajax經(jīng)典demo

一些基礎(chǔ)知識(shí):
首先了解XMLHttpRequest對(duì)象的屬性和方法:

對(duì)象屬性
方法

關(guān)于Ajax的示例:
一:
創(chuàng)建一個(gè)XMLHttpRequest對(duì)象

//創(chuàng)建ajax引擎對(duì)象
    function createAjaxObject(){
        if(window.ActiveXObject){
            var newRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }else{
            var newRequest = new XMLHttpRequest();
        }
        return newRequest;
    }

創(chuàng)建對(duì)象:

var http_request = createAjaxObject();//①創(chuàng)建一個(gè)XMLHttpRequest對(duì)象

二:創(chuàng)建url,data,通過(guò) xmlHttpRequest.send()

if(http_request){
var url = "sendmes.php";//通過(guò)myXmlHttpRequest對(duì)象發(fā)送請(qǐng)求到服務(wù)器的某個(gè)頁(yè)面
            var sender = "<?php echo $nickname; ?>";
            var geter = "<?php echo $geter; ?>";
            var content = $("#sendBox").val();//頁(yè)面抓取的值
            var data = "content="+content+"&sender="+sender+"&geter="+geter;

三:打開(kāi)請(qǐng)求

http_request.open("post",url,true);
            //第一個(gè)參數(shù)表示請(qǐng)求的方式, "get" / "post"http://第二個(gè)參數(shù)指定url,對(duì)哪個(gè)頁(yè)面發(fā)出ajax請(qǐng)求(本質(zhì)仍然是http請(qǐng)求)
            //第三個(gè)參數(shù)表示 true表示使用異步機(jī)制,如果false表示不使用異步

1使用GET的話使用get方式發(fā)出請(qǐng)求,如果提交的用戶名不變化靶壮,瀏覽器將不會(huì)真的發(fā)請(qǐng)求辜限,而是緩存取數(shù)據(jù)

url="/ajax/registerProcess.php?mytime="+new  Date()+"&username="+$("username").value;

或:告訴瀏覽器不要緩存數(shù)據(jù)//header("Cache-Control: no-cache")
若瀏覽器返回的數(shù)據(jù)是xml格式
//header("Content-Type: text/xml;charset=utf-8");

***還有一句話帆调,這句話必須.用JSON提交//POST方式交互所需要增加的代碼
http_request.setRequestHeader("content-type","application/x-www-form-urlencoded");
四:指定回調(diào)函數(shù):注冊(cè)回調(diào)方法

//指定回調(diào)函數(shù).
            http_request.onreadystatechange = function(){
                if(http_request.readyState==4){
                    //等于200表示成功
                    if(http_request.status==200){
                        var res = http_request.responseText;
                        if(res!=""){
                            //res==""說(shuō)明發(fā)送成功,然后就將發(fā)送信息寫(xiě)入messageBox
                            //var nowtime = new Date().toLocaleString();
                            var content1 = "<?php echo $nickname.' '; ?>"+res+"\r\n";
                            var content2 = content+"\r\n" ;
                            var contents = $("#messageBox").val()+content1+content2;
                            //alert(content);
                            $("#messageBox").val(contents);
                            $("#sendBox").val("");  //將發(fā)送框清除
                        }
                    }
                }
            }
設(shè)置向服務(wù)器端發(fā)送的數(shù)據(jù)癣漆,啟動(dòng)和服務(wù)器端的交互
//真的發(fā)送請(qǐng)求,如果是get請(qǐng)求則填入 null即可
            //如果是post請(qǐng)求,則填入實(shí)際的數(shù)據(jù)
            http_request.send(data);

五:服務(wù)器端接收 ajax的請(qǐng)求,做相應(yīng)處理(操作數(shù)據(jù)庫(kù)),然后返回結(jié)果(echo 語(yǔ)句)
六:客戶端通過(guò)xmlHttpRequest的屬性 reponseText , responseXML 取的數(shù)據(jù)约炎,然后就完成局部刷新當(dāng)前頁(yè)面任務(wù)

示例:

<?php
    session_start();
    include "include/dbconn.php";
    include "include/common.inc.php";
    $geter= $_GET['geter'];
    $nickname = $_SESSION['nickname'];

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/main.css" type="text/css" rel="stylesheet" />
<title>web聊天</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    //創(chuàng)建ajax引擎對(duì)象
    function createAjaxObject(){
        if(window.ActiveXObject){
            var newRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }else{
            var newRequest = new XMLHttpRequest();
        }
        return newRequest;
    }
    //定義全局變量 http_request
    var http_request;
    
    //**********************發(fā)送消息******************
    $(function(){
        $("#sendmess").click(sendMessage);
    });
    
    function sendMessage(){
        var http_request = createAjaxObject();//①創(chuàng)建一個(gè)XMLHttpRequest對(duì)象
        if(http_request){
            //②創(chuàng)建url,data,通過(guò) xmlHttpRequest.send()
            //③服務(wù)器端接收 ajax的請(qǐng)求,做相應(yīng)處理(操作數(shù)據(jù)庫(kù)),然后返回結(jié)果(echo 語(yǔ)句)
            //④客戶端通過(guò)xmlHttpRequest的屬性 reponseText , responseXML 取的數(shù)據(jù),然后就完成局部刷新當(dāng)前頁(yè)面任務(wù)
            var url = "sendmes.php";//通過(guò)myXmlHttpRequest對(duì)象發(fā)送請(qǐng)求到服務(wù)器的某個(gè)頁(yè)面
            var sender = "<?php echo $nickname; ?>";
            var geter = "<?php echo $geter; ?>";
            var content = $("#sendBox").val();
            var data = "content="+content+"&sender="+sender+"&geter="+geter;
            //alert(data);
            ////打開(kāi)請(qǐng)求
            ///使用GET的話使用get方式發(fā)出請(qǐng)求圾浅,如果提交的用戶名不變化掠手,瀏覽器將不會(huì)真的發(fā)請(qǐng)求,而是緩存取數(shù)據(jù)., url
            //url="/ajax/registerProcess.php?mytime="+new  Date()+"&username="+$("username").value;
                    ////這里兩句話很重要,第一講話告訴瀏覽器返回的數(shù)據(jù)是xml格式
                    //header("Content-Type: text/xml;charset=utf-8");
                    //告訴瀏覽器不要緩存數(shù)據(jù)
                    //header("Cache-Control: no-cache")
            http_request.open("post",url,true);
            //第一個(gè)參數(shù)表示請(qǐng)求的方式, "get" / "post"http://第二個(gè)參數(shù)指定url,對(duì)哪個(gè)頁(yè)面發(fā)出ajax請(qǐng)求(本質(zhì)仍然是http請(qǐng)求)
            //第三個(gè)參數(shù)表示 true表示使用異步機(jī)制,如果false表示不使用異步
            ////還有一句話狸捕,這句話必須.用JSON提交//POST方式交互所需要增加的代碼
            http_request.setRequestHeader("content-type","application/x-www-form-urlencoded");
            //指定回調(diào)函數(shù).chuli是函數(shù)名
            http_request.onreadystatechange = function(){
                if(http_request.readyState==4){
                    //等于200表示成功
                    if(http_request.status==200){
                        var res = http_request.responseText;
                        if(res!=""){
                            //res==""說(shuō)明發(fā)送成功喷鸽,然后就將發(fā)送信息寫(xiě)入messageBox
                            //var nowtime = new Date().toLocaleString();
                            var content1 = "<?php echo $nickname.' '; ?>"+res+"\r\n";
                            var content2 = content+"\r\n" ;
                            var contents = $("#messageBox").val()+content1+content2;
                            //alert(content);
                            $("#messageBox").val(contents);
                            $("#sendBox").val("");  //將發(fā)送框清除
                        }
                    }
                }
            }
            //真的發(fā)送請(qǐng)求,如果是get請(qǐng)求則填入 null即可
            //如果是post請(qǐng)求,則填入實(shí)際的數(shù)據(jù)
            http_request.send(data);
        }
    }
    
    //**********************接收消息**************
    setInterval(getMessage,1000); //每1秒發(fā)送一次請(qǐng)求
    function getMessage(){
        var http_request = createAjaxObject();
        if(http_request){
            var url = "getmes.php";
            var sender = "<?php echo $nickname; ?>";
            var geter = "<?php echo $geter; ?>";
            var data = "sender="+sender+"&geter="+geter;
            //alert(data);
            http_request.open("post",url,true);
            http_request.setRequestHeader("content-type","application/x-www-form-urlencoded");
            http_request.onreadystatechange = function(){
                if(http_request.readyState==4){
                    //等于200表示成功
                    if(http_request.status==200){
                        if(http_request.responseText=="nomessage"){return;}
                        //轉(zhuǎn)成對(duì)象數(shù)組//通過(guò)reses可以取得你希望的任何一個(gè)值reses[?].屬性名
                        var res = eval("("+http_request.responseText+")");
                        for(var i=0;i<res.length;i++){
                            var content1 = "<?php echo $geter; ?> "+res[i].stime+"\r\n";
                            var content2 = res[i].content+"\r\n" ;
                            var contents = $("#messageBox").val()+content1+content2;
                            //alert(content);
                            $("#messageBox").val(contents);
                        }
                    }
                }
            }
            http_request.send(data);
        }
    }
    
    
</script>
</head>

<body>
<?php

    if(empty($_SESSION['password'])){
        echo "<a href='login.php'>登陸</a> <a href='regist.php' target='_blank'>注冊(cè)</a>";
        exit();
    }else{
        echo $nickname. " 在線 <a href='exit.php'>退出登陸</a>";
    }
?>
<div id="message">
    <hr />
    <p>與<font color='red'> <?php echo $geter; ?> </font>聊天中</p>
    <hr />
    <textarea readonly="readonly" id="messageBox"></textarea>
</div>
<div id="message2">
    <textarea name="content" id="sendBox"></textarea>
    <p><input type="button" value="發(fā)送" id="sendmess" /></p>
</div>
</body>
</html>

sendmes.php:

<?php
    //這里兩句話很重要,第一講話告訴瀏覽器返回的數(shù)據(jù)是xml格式
    //header("Content-Type: text/xml;charset=utf-8");
    header("Content-type:text/html;charset=utf-8");//JSON
    //告訴瀏覽器不要緩存數(shù)據(jù)
    header("Cache-Control: no-cache");
    if(empty($_POST['sender'])){exit();}
    $sender = $_POST['sender'];
    $geter = $_POST['geter'];
    $content = $_POST['content'];
    //$aa = $content."&".$sender."&".$geter;
    //file_put_contents("log.txt",$content."\r\n",FILE_APPEND);
    include "include/dbconn.php";
    
    $sql = "INSERT INTO message (sender,geter,content,stime)VALUES ('{$sender}','{$geter}','{$content}',now())";
    //file_put_contents("log.txt",$sql."\r\n",FILE_APPEND);
    $res = mysql_query($sql,$link);
    if(!$res){
        echo ""; //發(fā)送失敗
    }else{
        date_default_timezone_set("PRC");
        echo date("H:i:s");
    }
?> 

getmes.php

<?php

    header("Content-type:text/html;charset=utf-8");
    if(empty($_POST['sender'])){exit();}
    $sender = $_POST['sender'];
    $geter = $_POST['geter'];
    
    include "include/dbconn.php";
    $sql = "select content,stime from message where sender='{$geter}' and geter='{$sender}' and mloop=0 order by stime asc";
    //file_put_contents("log.txt",$sql."\r\n",FILE_APPEND);
    $res = mysql_query($sql,$link);
    $row=mysql_fetch_array($res);
    //消息條數(shù)   采用json返回?cái)?shù)據(jù)
    $mNums = mysql_num_rows($res);
    if($mNums<1){
        echo "nomessage";
        exit();
    }else if($mNums==1){
        echo "[{'content':'".$row['content']."','stime':'".substr($row['stime'],11)."'}]";
    }else{
        $result="[{'content':'".$row['content']."','stime':'".substr($row['stime'],11)."'}";
        while($row=mysql_fetch_array($res)){
            $result.=",{'content':'".$row['content']."','stime':'".substr($row['stime'],11)."'}";
        }
        $result.=']';
        echo $result;
    }
    mysql_free_result($res);
     
    //收到消息后將它的狀態(tài)設(shè)為1
    if($mNums>0){
        $sql = "update message set mloop=1 where sender='{$geter}' and geter='{$sender}' and mloop=0";
        mysql_query($sql,$link);
        //file_put_contents("log.txt",$sql."\r\n",FILE_APPEND);
    }
    
?>


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末灸拍,一起剝皮案震驚了整個(gè)濱河市做祝,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鸡岗,老刑警劉巖混槐,帶你破解...
    沈念sama閱讀 212,686評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異轩性,居然都是意外死亡声登,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,668評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門揣苏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)悯嗓,“玉大人,你說(shuō)我怎么就攤上這事卸察「” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 158,160評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵坑质,是天一觀的道長(zhǎng)合武。 經(jīng)常有香客問(wèn)我,道長(zhǎng)涡扼,這世上最難降的妖魔是什么稼跳? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,736評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮壳澳,結(jié)果婚禮上岂贩,老公的妹妹穿的比我還像新娘。我一直安慰自己巷波,他們只是感情好萎津,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,847評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著抹镊,像睡著了一般锉屈。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上垮耳,一...
    開(kāi)封第一講書(shū)人閱讀 50,043評(píng)論 1 291
  • 那天颈渊,我揣著相機(jī)與錄音遂黍,去河邊找鬼。 笑死俊嗽,一個(gè)胖子當(dāng)著我的面吹牛雾家,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播绍豁,決...
    沈念sama閱讀 39,129評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼芯咧,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了竹揍?” 一聲冷哼從身側(cè)響起敬飒,我...
    開(kāi)封第一講書(shū)人閱讀 37,872評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎芬位,沒(méi)想到半個(gè)月后无拗,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,318評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡昧碉,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,645評(píng)論 2 327
  • 正文 我和宋清朗相戀三年英染,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片晌纫。...
    茶點(diǎn)故事閱讀 38,777評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡税迷,死狀恐怖永丝,靈堂內(nèi)的尸體忽然破棺而出锹漱,到底是詐尸還是另有隱情,我是刑警寧澤慕嚷,帶...
    沈念sama閱讀 34,470評(píng)論 4 333
  • 正文 年R本政府宣布哥牍,位于F島的核電站,受9級(jí)特大地震影響喝检,放射性物質(zhì)發(fā)生泄漏嗅辣。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,126評(píng)論 3 317
  • 文/蒙蒙 一挠说、第九天 我趴在偏房一處隱蔽的房頂上張望澡谭。 院中可真熱鬧,春花似錦损俭、人聲如沸蛙奖。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,861評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)雁仲。三九已至,卻和暖如春琐脏,著一層夾襖步出監(jiān)牢的瞬間攒砖,已是汗流浹背缸兔。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,095評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留吹艇,地道東北人惰蜜。 一個(gè)月前我還...
    沈念sama閱讀 46,589評(píng)論 2 362
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像受神,于是被迫代替她去往敵國(guó)和親蝎抽。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,687評(píng)論 2 351

推薦閱讀更多精彩內(nèi)容

  • AJAX 原生js操作ajax 1.創(chuàng)建XMLHttpRequest對(duì)象 var xhr = new XMLHtt...
    碧玉含香閱讀 3,188評(píng)論 0 7
  • 本文詳細(xì)介紹了 XMLHttpRequest 相關(guān)知識(shí)路克,涉及內(nèi)容: AJAX樟结、XMLHTTP、XMLHttpReq...
    semlinker閱讀 13,645評(píng)論 2 18
  • 第一章 入門 基本功能:訪問(wèn)和操作 dom 元素精算,控制頁(yè)面樣式瓢宦,對(duì)頁(yè)面的事件處理,與ajax完美結(jié)合灰羽,有豐富的插件...
    X_Arts閱讀 1,034評(píng)論 0 2
  • 昨天我和爸爸媽媽去姥姥家了驮履。今天早上我們回來(lái)了。姥姥給我們帶了好多好吃的廉嚼。
    李思雨小同學(xué)閱讀 146評(píng)論 0 0
  • 人有時(shí)候真的會(huì)有些私心的怠噪,我覺(jué)得我這輩子做了一件很錯(cuò)誤的事恐似,對(duì)不起父母, 年紀(jì)這么大了傍念,還跟我來(lái)北京打拼矫夷。父母沒(méi)有...
    帥到天荒地老閱讀 449評(píng)論 1 1