详细介绍附代码：使用jquery，和php文件构建一个简单的在线聊天室，通过ip显示googlemap
2012-06-02 06:27
1431 查看
最近学习了关于使用最为流行的jquery发送请求，在实践中以最为简单的聊天室作为测验的辅助工具，对相关网页开发有一个初步的认识，希望大家能够一起学习进步。
首先介绍一下相关文件信息和功能，因为最简单的聊天室需要一个客户端和服务器端，因此我们建立一个index.html文件来实现所有客户端的内容：显示聊天室，获取聊天信息并加以实时显示，发送聊天信息便于存储，获得相关google地图信息（这里以ip地址为参数进行计算和显示，通过googlemap的api加以实现）。另外服务器端我们建立一个chat.php文件实现所有功能，比如说对存储信息文档的读写功能都在这里面实现。另外我们需要建立一个数据库，在这里为了方便理解， 我们在同层目录下建立一个texte.html中建一个以html格式存储的本地文档，提供读写功能的文档支持。
转载请注明出处： http://blog.csdn.net/elfprincexu 好了，废话不多说，最终我们需要的文档：index.html, chat.php, texte.html,style.css (style.css为显示index如何显示)好的，接下来呢，我们详细讲解一下index内容：
此为大致浏览图，我们看到其中有一个chatroom的div， 一个map的div分别实现聊天内容和google地图的显示：
在<body></body>中我们定义一些显示元素：
<body> <div id="wrapper"> <divid="menu"> <pclass="welcome">Bienvenu, Guest <b></b></p> <pclass="logout"><a id="exit"href="#">Sortir</a></p> <divstyle="clear:both"></div> </div> <divid="chatbox"></div> <divid="map"></div> <divid="location"></div> <div id="imgshowroom"></div> <formname="message" action=""> <inputname="usermsg" type="text" id="usermsg"size="63" /> <inputname="submitmsg" type="submit" id="submitmsg"value="Envoyez" /> </form> </div> </body>
另外，我们在head中定义一些javascript：<head></head>
<head>
<metahttp-equiv="content-type" content="text/html;charset=windows-1250">
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<scripttype="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>
<title>Chat Login</title>
<link type="text/css"rel="stylesheet" href="style.css" />
<scripttype="text/javascript">
var map;
$(document).ready(function(){
//If user submitsthe form
$("#submitmsg").click(function(){
var clientmsg =$("#usermsg").val();
$.get("chat.php",{phrase: clientmsg});
$("#usermsg").attr("value","");
return false;
});
//Load the filecontaining the chat log, ca marche
functionloadLog(){
varoldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
$.ajax({
url:"texte.html",
cache:false,
success:function(html){
$("#chatbox").html(html);//Insert chat log into the #chatbox div
varnewscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
if(newscrollHeight> oldscrollHeight){
$("#chatbox").animate({scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
}
},
});
}
setInterval (loadLog, 2500); //Reload file every 2.5 seconds
function InitMap(lat, lng) {
var latlng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow({
position: latlng,
content: 'Bonjour, je suisici'
});
var mapget=newgoogle.maps.Map(document.getElementById("map"),myOptions);
infoWindow.open(mapget);
return mapget;
}
map = InitMap(37.4419,-122.1419);
});
//If user wants to endsession
$("#exit").click(function(){
var exit = confirm("Areyou sure you want to end the session?");
if(exit==true){window.location= 'index.html?logout=true';}
});
//this function is to searchthe location of IP, and relocate the googlemap with the Panto(newpos)
function recherche(ip) {
var url="http://api.hostip.info/get_html.php?ip="+ip+"&position=true";
$.get(url,function(result){
update(result);
})
}
function update(info){
//ahah(url,"location");
//var info =document.getElementById("location").innerHTML;
reg = newRegExp("[0-9.]+","g");
var coordonnees = info.match(reg);
if (coordonnees.length == 3) {
var pos= new google.maps.LatLng(parseFloat(coordonnees[0]), parseFloat(coordonnees[1]));
map.panTo(pos);
varmarker = new google.maps.Marker({
position:pos,
map:map
});
}
recuperer_photo(parseFloat(coordonnees[0]),parseFloat(coordonnees[1]));
}
</script>
</head>在这里着重讲解一下loadlog（）函数，我们使用ajax.get（）函数从本地url（“texte.html”）中获取相关信息，这里我们使用了：
$.ajax({
url: "texte.html", //目的url为本地texte.html
cache: false, //每次都不使用cache
success: function(html){ //如若读取成功，返回内容，这里变量为html
$.(#chatbox).html(html); //将 id=chatbox 的div 内容填充为返回html内容
}
})好的，接下来讲解一下关于googlemap通过ip地址来获取相关坐标的内容这里使用了recherche（ip）：
function recherche(ip) {
var url ="http://api.hostip.info/get_html.php?ip="+ip+"&position=true"; //此为api地址
$.get(url,function(result){ //同样我们使用ajax 发送requete
update(result); //调用update来更换地图位置信息xml格式
})
}
function update(info){
reg = newRegExp("[0-9.]+","g"); //对获得的xml进行处理
var coordonnees = info.match(reg);
if (coordonnees.length == 3) {
var pos = newgoogle.maps.LatLng(parseFloat(coordonnees[0]), parseFloat(coordonnees[1]));//laititude，longitude
map.panTo(pos); //map 重新定位到pos；
var marker = new google.maps.Marker({ //获取中心坐标
position:pos,
map:map
});
}
}好的，接下来讲一下关于服务器端的chat.php内容：
chat.php
<?php
$chaine = "<br />-";
$chaine .= "<ahref='javascript:recherche(\"" .gethostbyname($_SERVER['SERVER_NAME']) . "\");'>" .gethostbyname($_SERVER['SERVER_NAME']) . "</a>";
$chaine .= " - " . $_GET['phrase'];
$fp =fopen("texte.html","a");
fwrite($fp, $chaine);
fclose($fp);
echo "write down withsuccess";
?>我们可以看到，在chat.php里面我们以html格式显示，这样的好处是，当index显示内容时可以自动装换，其中
"<ahref='javascript:recherche(\"" . gethostbyname($_SERVER['SERVER_NAME']). "\");'>"
一句为添加一个调用recherche（ip）的javascript函数，我们上面已经定义了，因此可以很方便的使用，
$_SERVER['SERVER_NAME'] 为用户登录时浏览器自动回解析你的ip地址
好了，这样一个简单的聊天室就搭建成功了，接下来就是如何使界面美观了，这就是style.css的工作了：
style.css 内容：
/* CSS Document */
body {
font:12px arial;
color: #224466;
text-align:center;
padding:35px; }
form, p, span {
margin:0;
padding:0; }
input { font:12px arial; }
a {
color:#0000FF;
text-decoration:none; }
a:hover { text-decoration:underline; }
#wrapper, #loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
width:504px;
border:1px solid #ACD8F0; }
#loginform { padding-top:18px;}
#loginform p { margin: 5px; }
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:10px;
padding:10px;
background:#fff;
height:200px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }
#imgshowroom{
text-align:left;
margin:0 auto;
margin-bottom:10px;
padding:10px;
background:#fff;
height:200px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }
#map{
text-align:left;
margin:0 auto;
margin-bottom:15px;
padding:10px;
background:#fff;
height:300;
width:430px;
border:1px solid #ACD8F0;
overflow:auto
}
#usermsg {
width:395px;
border:1px solid #ACD8F0; }
#submit { width: 60px; }
.error { color: #ff0000; }
#menu { padding:12.5px 25px12.5px 25px; }
.welcome { float:left; }
.logout { float:right; }
.msgln { margin:0 0 2px 0; }好，是不是很简单清晰呢，其实使用ajax的优点是显而易见的，以往我们需要重新加载一个页面时，通常刷新整个页面，这样对服务器的压力很大，响应时间也会很长，通过使用ajax，可以对感兴趣的部分进行请求刷新，大大减少了服务器的压力。
不多说了，希望大家都能共同进步和学习~
Merci beaucoup !tout le monde, j’espère que je vous en ai explique bien !
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
- PHP实现提取一个图像文件并在浏览器上显示的代码
- FileOutputStream 类 和 FileInputStream类的简单介绍，附代码演示。以及一个复制媒体文件的小程序。
- FileOutputStream 类 和 FileInputStream类的简单介绍，附代码演示。以及一个复制媒体文件的小程序
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
- 一个简单的QQ隐藏图生成算法 通过jQuery和C#分别实现对.NET Core Web Api的访问以及文件上传
- 如何通过命令行或者使用代码打开一个apk文件
- 在 Eclipse Workbench 之外使用 Eclipse GUI，第 1 部分: 单独使用 JFace 和 SWT构建一个简单的文件资源管理器应用程序
- 在Dreamweaver下创建一个php文件并用正确使用php“绘图函数”进行绘制图形时，图形却无法显示
- 使用一个简单的python脚本将一个本地文件以码流的形式，通过UDP协议发送到对端：
- 转载一个简单的lua展示【COCOS2DX-LUA 脚本开发之一】LUA语言基础在Cocos2dX游戏中使用Lua脚本进行游戏开发(基础篇）并介绍脚本在游戏中详细用途！
- 通过一个简单的例子,介绍如何使用LDAP(转)
- 简单完整的代码，通过这个代码你将对RSA加密算法在Java中的实现方法有一个初步的了解，这个类，你可以直接使用，水平高的，就自己修改完善下代码。
- C#2005 一个简单的查询界面代码：DataGridView使用、图像显示、复合查询样例
- 一个图形显示IP的PHP程序代码
- 通过一个简单的文章系统学习MVC3+Linq搭建网站--项目文件结构介绍(3)
- 通过PHP简单实例介绍文件上传
- 使用jQuery和PHP构建一个受Ajax驱动的Web页面(1)
- 一个图形显示IP的PHP程序代码
- PHP实现提取一个图像文件并在浏览器上显示的代码