Ajax经典demo
2017-04-21 本文已影响7人
hello大象
一些基础知识：
首先了解XMLHttpRequest对象的属性和方法：
对象属性
方法
关于Ajax的示例：
一：
创建一个XMLHttpRequest对象
//创建ajax引擎对象
function createAjaxObject(){
if(window.ActiveXObject){
var newRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else{
var newRequest = new XMLHttpRequest();
}
return newRequest;
}
创建对象:
var http_request = createAjaxObject();//①创建一个XMLHttpRequest对象
二：创建url,data,通过 xmlHttpRequest.send()
if(http_request){
var url = "sendmes.php";//通过myXmlHttpRequest对象发送请求到服务器的某个页面
var sender = "<?php echo $nickname; ?>";
var geter = "<?php echo $geter; ?>";
var content = $("#sendBox").val();//页面抓取的值
var data = "content="+content+"&sender="+sender+"&geter="+geter;
三：打开请求
http_request.open("post",url,true);
//第一个参数表示请求的方式, "get" / "post"//第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)
//第三个参数表示 true表示使用异步机制,如果false表示不使用异步
1使用GET的话使用get方式发出请求，如果提交的用户名不变化，浏览器将不会真的发请求，而是缓存取数据
url="/ajax/registerProcess.php?mytime="+new Date()+"&username="+$("username").value;
或：告诉浏览器不要缓存数据//header("Cache-Control: no-cache")
若浏览器返回的数据是xml格式
//header("Content-Type: text/xml;charset=utf-8");
***还有一句话，这句话必须.用JSON提交//POST方式交互所需要增加的代码
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){
var res = http_request.responseText;
if(res!=""){
//res==""说明发送成功，然后就将发送信息写入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(""); //将发送框清除
}
}
}
}
设置向服务器端发送的数据，启动和服务器端的交互
//真的发送请求,如果是get请求则填入 null即可
//如果是post请求，则填入实际的数据
http_request.send(data);
五：服务器端接收 ajax的请求,做相应处理(操作数据库)，然后返回结果(echo 语句)
六：客户端通过xmlHttpRequest的属性 reponseText , responseXML 取的数据，然后就完成局部刷新当前页面任务
示例：
<?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">
//创建ajax引擎对象
function createAjaxObject(){
if(window.ActiveXObject){
var newRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else{
var newRequest = new XMLHttpRequest();
}
return newRequest;
}
//定义全局变量 http_request
var http_request;
//**********************发送消息******************
$(function(){
$("#sendmess").click(sendMessage);
});
function sendMessage(){
var http_request = createAjaxObject();//①创建一个XMLHttpRequest对象
if(http_request){
//②创建url,data,通过 xmlHttpRequest.send()
//③服务器端接收 ajax的请求,做相应处理(操作数据库)，然后返回结果(echo 语句)
//④客户端通过xmlHttpRequest的属性 reponseText , responseXML 取的数据，然后就完成局部刷新当前页面任务
var url = "sendmes.php";//通过myXmlHttpRequest对象发送请求到服务器的某个页面
var sender = "<?php echo $nickname; ?>";
var geter = "<?php echo $geter; ?>";
var content = $("#sendBox").val();
var data = "content="+content+"&sender="+sender+"&geter="+geter;
//alert(data);
////打开请求
///使用GET的话使用get方式发出请求，如果提交的用户名不变化，浏览器将不会真的发请求，而是缓存取数据., url
//url="/ajax/registerProcess.php?mytime="+new Date()+"&username="+$("username").value;
////这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
//header("Content-Type: text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
//header("Cache-Control: no-cache")
http_request.open("post",url,true);
//第一个参数表示请求的方式, "get" / "post"//第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)
//第三个参数表示 true表示使用异步机制,如果false表示不使用异步
////还有一句话，这句话必须.用JSON提交//POST方式交互所需要增加的代码
http_request.setRequestHeader("content-type","application/x-www-form-urlencoded");
//指定回调函数.chuli是函数名
http_request.onreadystatechange = function(){
if(http_request.readyState==4){
//等于200表示成功
if(http_request.status==200){
var res = http_request.responseText;
if(res!=""){
//res==""说明发送成功，然后就将发送信息写入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(""); //将发送框清除
}
}
}
}
//真的发送请求,如果是get请求则填入 null即可
//如果是post请求，则填入实际的数据
http_request.send(data);
}
}
//**********************接收消息**************
setInterval(getMessage,1000); //每1秒发送一次请求
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;}
//转成对象数组//通过reses可以取得你希望的任何一个值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'>注册</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="发送" id="sendmess" /></p>
</div>
</body>
</html>
sendmes.php:
<?php
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
//header("Content-Type: text/xml;charset=utf-8");
header("Content-type:text/html;charset=utf-8");//JSON
//告诉浏览器不要缓存数据
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 ""; //发送失败
}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);
//消息条数 采用json返回数据
$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);
//收到消息后将它的状态设为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);
}
?>
