首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

作者：航头党员之家 | 来源：互联网 | 2023-10-16 18:21
最近学习了关于使用最为流行的jquery发送请求，在实践中以最为简单的聊天室作为测验的辅助工具，对相关网页开发有一个初步的认识，希望大家能够一起学习进步。首先介绍一下

       最近学习了关于使用最为流行的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地图的显示：

         在中我们定义一些显示元素：

 

  
  
 
                     
                               Bienvenu, Guest 
 
                               Sortir










  另外，我们在head中定义一些Javascript：

                   在这里着重讲解一下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

$chaine = "
-";
$chaine .= "" .gethostbyname($_SERVER['SERVER_NAME']) . "";
$chaine .=  " - " . $_GET['phrase'];
$fp =fopen("texte.html","a");
fwrite($fp, $chaine);
fclose($fp);
echo "write down withsuccess";
?>

    我们可以看到，在chat.php里面我们以html格式显示，这样的好处是，当index显示内容时可以自动装换，其中

""

一句为添加一个调用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 !


推荐阅读
author-avatar
航头党员之家
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有