首页 网络技术
  1. 正文

基于websocket的聊天功能怎么实现

  一、Ajax方式

  首先,要做这个功能前,我们必须先查阅后台接口文档,了解使用登录接口时,需要提交哪些参数,并且接口使用返回的数据。

  这里我使用了一个返回json格式数据的登录接口为例,讲解怎么使用Ajax与后台接口交互。

  用户登录接口URL: , ?Method: POST

  输入参数:username=admin

  password=123456

  输出:登录成功:

  登录成功:

  登录成功:

  编写javascript(Ajax)调用接口:

  var xmlhttp;

  if (window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

  else{// IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

  //上面的http请求对象的生成做了一个浏览器兼容性处理

  var adminName=document.getElementById('adminName')。value;//获取html表单中adminName输入域对象的值,既账号

  var psw=document.getElementById('psw')。value;//获取html表单中pwd输入域对象的值,既密码

  xmlhttp.onreadystatechange=function(){

  //当接受到响应时回调该方法

  if (xmlhttp.readyState==4 && (xmlhttp.status==200||xmlhttp.status==0))

  {

  var tip=document.getElementById('tip');//获取html的tip节点,主要用于输出登录结果

  var text=xmlhttp.responseText;//使用接口返回内容,响应内容

  var resultJson=eval("("+text+")");//把响应内容对象转成javascript对象

  var result=resultJson.result;//获取json中的result键对应的值

  var code=resultJson.code;//获取json中的code键对应的值

  if (result=="fail") {//登录失败

  if(code==101){

  tip.innerHTML="密码错误!"

  }else if(code==102){

  tip.innerHTML="用户不存在!"

  }

  }else //登录成功        if(result=="success"&&code==100){

  window.location.href="";//跳转到centent.html页面

  }

  }

  }

  xmlhttp.open("POST","control1/login",true);//以POST方式请求该接口

  xmlhttp.setRequestHeader("Content-type","application/x-");//添加Content-type

  xmlhttp.send("adminName="+adminName+"&psw="+psw);//发送请求参数间用&分割

本文标题:基于websocket的聊天功能怎么实现
本文链接:https://www.qqooo.cn/post/6687.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!