详细介绍附代码：使用jquery，和php文件构建一个简单的在线聊天室，通过ip显示googlemap

最近学习了关于使用最为流行的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 marchefunctionloadLog(){           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 secondsfunction 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 发送requeteupdate(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，longitudemap.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，和php文件构建一个简单的在线聊天室，通过ip显示googlemap相关推荐

第三章、C#简单界面在线聊天室C#一对多聊天（使用TCP转发实现的在线聊天室，文章末尾附免费项目资源）
C#网络通信系列学习笔记第一章.C#最简单的控制台网络通信&C#最简单的控制台socket通信第二章.C#控制台实现一对一聊天&C#socket类的简单封装第三章.C#简单在线聊 ...
php 运营商授权,PHP判断手机号运营商（详细介绍附代码）
道理很简单,知道手机号规则进行正则判断就可以移动:134.135.136.137.138.139.150.151.157(TD).158.159.187.188 联通:130.131.132.15 ...
php 判断号码运营商,PHP根据手机号判断运营商(详细介绍附代码)
道理很简单,知道手机号规则进行正则判断就可以移动:134.135.136.137.138.139.150.151.157(TD).158.159.187.188 联通:130.131.132.15 ...
php判断运营商,PHP根据手机号判断运营商(详细介绍附代码)
道理很简单,知道手机号规则进行正则判断就可以移动:134.135.136.137.138.139.150.151.157(TD).158.159.187.188 联通:130.131.132.15 ...
【2022年华为杯数学建模E题赛后总结加思路详细介绍配代码----10月11号写的总结】
提示:下文将介绍2022年华为杯数学建模E题赛后总结加思路详细介绍配代码傻逼队友,傻逼队友,傻逼队友一定要看好人在进行组队,这是劝告. 这里有几点总结进行描述: 第一,图一定要尽量多,对图的解释要多 ...
linux下的fgetc（）与fputc（）函数详细介绍及代码演示
linux下的标准I/O的fgetc()与fputc()函数详细介绍及代码演示文章目录前言一.fgetc()用法介绍二.fputc()用法介绍代码演示总结前言在C语言中,读写文件比较灵 ...
uniapp获取手机号（详细教程附代码）
uniapp获取手机号(详细教程附代码) 一.获取code 二.通过code获取获取openId 和 session_key 三.让用户授权(同意后需要对数据解密) 个人小程序不能使用这个功能,必须是 ...
Java对象，Map，List，Set数组等相互转换大全（详细讲解,附代码，讲解案例）
Java对象,Map,List,Set数组等相互转换大全(详细讲解,附代码,讲解案例) Java对象转 JSON字符串 JAVA对象转MAP Map转java对象 List转map List和Map ...
AgileEAS.NET SOA 中间件平台.Net Socket通信框架-完整应用例子-在线聊天室系统-代码解析...
一.AgileEAS.NET SOA中间件Socket/Tcp框架介绍在文章AgileEAS.NET SOA 中间件平台.Net Socket通信框架-介绍一文之中我们对AgileEAS.NET S ...

详细介绍附代码：使用jquery，和php文件构建一个简单的在线聊天室，通过ip显示googlemap

详细介绍附代码：使用jquery，和php文件构建一个简单的在线聊天室，通过ip显示googlemap相关推荐

最新文章

热门文章