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

本文链接：https://blog.csdn.net/elfprincexu/article/details/7625205

最近学习了关于使用最为流行的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 !