AJAX是什麼？能幹什麼？
傳統的網頁不使用AJAX，如果需要更新內容，必須加載整個網頁。
通過在後臺與服務器進行少量數據交換，AJAX可以使網頁實現異步更新。意味着不需要加載整個網頁的情況下對網頁的某部分進行更新。
AJAX是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
如何使用AJAX技術
一般我們都會使用jQuery封裝好的函數來使用AJAX；
json數據格式
JSON（JavaScript object Notation，JS 對象標記）是一種輕量級的數據交換格式。
用花括號包含的鍵值對，每個鍵值對之間用,隔開。例如：
{key:value,key1:value1...}
//還可以嵌套
{key:value,key1:{key3:value3,key4:value4}}
我們可以用json來描述一個人的信息
{
name:"張三",
sex:"男",
address:{
province:"河北",
city:"保定"
},
hobby:[
"打籃球",
"打遊戲",
"打代碼"
]
}
使用ajax實現聊天室
數據庫設計：
實現代碼如下：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聊天室</title>
<link rel="stylesheet" href="./css/chat.css">
</head>
<body>
<div class="chat-name">
網頁聊天室
</div>
<div class="chat-box">
<div class="show-box">
<div class="msg-box">
<p class="nickname">管理員<span></span></p>
<p class="msg">歡迎來到聊天室...</p>
</div>
</div>
<div class="send-box">
<p>
<textarea name="msg" id="msg" cols="30" rows="10"></textarea>
</p>
<p>
<button class="send-btn">發送消息</button>
</p>
</div>
</div>
<div class="nick-input">
<p><span>請輸入暱稱：</span><input type="text" id="nick"><button class="start-btn">進入聊天室</button></p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="last.php"></script>
<script src="js/chat.js"></script>
</body>
</html>
chat.css
body{
background: blue;
text-align: center;
}
.chat-name{
text-align: center;
font-size: 30px;
font-weight: 900;
color: #ff0;
}
.chat-box{
display: none;
margin: 0 auto;
width: 800px;
height: 700px;
background-color: rgba(0,0,0,0.22);
color: #eee;
border-radius: 10px;
text-align: left;
padding: 20px;
-webkit-box-shadow: inset 0px 0px 50px #ffffff;
-moz-box-shadow: inset 0px 0px 50px #ffffff;
box-shadow: inset 0px 0px 50px #ffffff;
}
.show-box{
height: 400px;
overflow-y: scroll;
}
.msg-box{
width: 750px;
border-radius: 5px;
background: rgba(255,255,255,0.5);
padding: 5px;
margin: 10px;
}
.msg{
word-wrap: break-word;
}
.nickname{
margin: 0 0 5px 0;
padding: 0;
font-weight: 700;
color: rgba(227, 238, 30, 0.8);
}
.send-box{
width: 800px;
height: 200px;
}
textarea[name='msg']{
width: 780px;
margin: 0 10px;
resize: none;/*限制文本框縮放*/
border-radius: 2px;
background: rgba(255,255,255,0.48);
color: #eeeeee;
font-size: 20px;
outline: none;
}
.send-btn{
float: right;
}
.nick-input span{
color: #ffffff;
font-size: 20px;
}
.nick-input input {
border:0;
border-bottom: 1px double #ffffff;
outline: none;
color: #ffffff;
background: transparent;
font-size: 20px;
}
chat.js
var nickname="";
$(function () {
//點擊進入聊天室按鈕
$('.start-btn').click(function () {
nickname = $('#nick').val();
//隱藏暱稱輸入框
$('.nick-input').css('display','none');
//顯示聊天窗口
$('.chat-box').css('display','block');
//alert(last_id);
setInterval(getMsg,2000);
});
//發送信息按鈕被點擊
$('.send-btn').click(function () {
//發送消息
var msg = $('#msg').val();
sendMsg(msg);
$(document).ready(function() {
$("#msg").val('');
});
});
});
function sendMsg(msg) {
$.ajax({
url:"msg.php",
type:"post",
data:{nickname:nickname,msg:msg},
success:function (data) {
if (data.code !=0){
alert(data.msg);
}
},
error:function (response) {
alert('服務器錯誤');
console.log(response);
},
});
}
function addMsg(nickname, msg, time) {
var html = '';
html += '<div class="msg-box">'
+ '<p class="nickname">'
+nickname
+'<span>'
+time
+'</span></p>'
+ '<p class="msg">'
+msg
+'</p>'
+ '</div>';
$('.show-box').append(html);
$('.show-box').scrollTop($('.show-box').scrollTop()+1000);
}
function getMsg() {
$.ajax({
url:'get-msg.php?id='+last_id,
type:'get',
success:function (data) {
console.log(data);
for(var i=0; i<data.length;i++){
addMsg(data[i].nickname,data[i].msg,data[i].create_at);
last_id = data[i].id;
}
},
error:function () {
}
})
}
tool.php 存放工具函數
<?php
function get($name){
return isset($_GET[$name])?$_GET[$name]:"";
}
function post($name){
$text = isset($_POST[$name])?$_POST[$name]:"";
$text = htmlspecialchars($text);
return $text;
}
function conn(){
//數據庫驅動類型：host=主機名；dbname=數據庫
$dns = "mysql:host=localhost;dbname=chat";
//連接字符串，賬號，密碼
$db = new PDO($dns,"root","root");
$db->exec("set names utf8");
return $db;
}
msg.php 將聊天信息在服務端插入數據庫
<?php
require_once "tool.php";
$nickname = post('nickname');
$msg = post('msg');
header('Content-type: application/json');
if ($msg==""){
echo json_encode(['code'=>-2,'msg'=>'信息不能爲空']);
exit;
}
$db = conn();
$sql = 'insert into noxue_chat(nickname,msg) VALUES (:nickname,:msg)';
$stmt = $db->prepare($sql);
//在執行的同時綁定指定參數
$stmt->execute([':nickname'=>$nickname,':msg'=>$msg]);
if ($db->lastInsertId()>0){
echo json_encode(['code'=>0,'msg'=>'ok']);
exit;
}else{
echo json_encode(['code'=>-1,'msg'=>'failed']);
exit;
}
last.php 用來獲取最新提交信息的id
<?php
require_once 'tool.php';
$db = conn();
$sql = "select id from noxue_chat order by id desc limit 0,1";
$stmt = $db->prepare($sql);
$stmt->execute();
$res = $stmt->fetch();
?>
var last_id=<?=$res['id']?>;
get-msg.php 從服務端獲取聊天信息
<?php
require_once "tool.php";
$db = conn();
$id = get('id');
$sql = 'select * from noxue_chat WHERE id>:id';
$stmt = $db->prepare($sql);
$stmt->execute([':id'=>$id]);
header('Content-type: application/json');
echo json_encode($stmt->fetchAll());