首頁 > 開發者 > JavaScript

使用jQuery調用XML實現無重新整理即時聊天，jqueryxml

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

使用jQuery調用XML實現無重新整理即時聊天，jqueryxml

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>使用JQuery調用XML實現無重新整理即時聊天</title><script src="Jscript/jquery-1.8.2.min.js" type="text/javascript"></script><style type="text/css" >body{font-size:13px}h3{ padding:0px; margin:8px 0px}.iframe{ width:260px; border: solid 1px #666}.iframe .title{padding:5px; background-color:#eee}.iframe .title .spnId{font-weight:bold; font-family:Arial}.iframe .content{ padding:8px; font-size:12px;}.iframe .content .lst{ height :180px; border: solid 1px #ccc; padding:3px; line-height:1.5em; overflow-y:scroll;}.iframe .content .nav{ color:#006EE}.iframe .content .nav .time,.iframe .content .msg{ margin-left:5px}.iframe .content .txt{ height:50px; width:238px; border:solid 1px #ccc}.btn {border:#666 1px solid;padding:2px;width:80px;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}</style><script type="text/javascript">$(function () {var $FormId = 1243242;var $SendId = 1234560;$("#spnSendId").html($SendId);setTimeout(showList($FormId, $SendId), 3000);$("#btnSend").click(function () {$.ajax({url: 'Chat.ashx?s=' + $SendId + '&f=' + $FormId + '&c=' + txtA.value,success: function (data) {if (data == 1) {showList($FormId, $SendId);txtA.value = "";}}});});function showList(f, s) {$.ajax({url: 'Chat.xml',dataType: 'xml',success: function (data) {var $strUser = $(data).find("message");var strHTML = "";$strUser.each(function () {if (($(this).attr("fId") == f && $(this).attr("sId") == s) || ($(this).attr("fId") == s && $(this).attr("sId") == f)) {var strNav = $(this).attr("fId");if (strNav == f) {strNav = "我說";}strHTML += '<div class=\"nav\"><span>(' + strNav + ')<\/span><span class =\"time\">' + $(this).children("datetime").text() + '<\/span><\/div>';strHTML += '<div class=\"msg\">' + $(this).children("content").text() + '<\/div>';}});//顯示處理後的資料$("#chatList").html(strHTML);}});}})</script></head><body><div class="iframe"><div class="title">德仔即時聊天與(<span id="spnSendId" class="spnId"></span> )聊天中</div><div class ="content"><div id="chatList" class="lst"></div></div><div class="content"><textarea id="txtA" class="txt"></textarea><input id="btnSend" type="button" value="發送" class="btn" /></div></div></body></html>

Chat.ashx:

<%@ WebHandler Language="C#" Class="Chat" %>using System;using System.Web;using System.Xml;public class Chat : IHttpHandler {public void ProcessRequest (HttpContext context) {context.Response.ContentType = "text/plain";string strContent = context.Request.QueryString["c"].ToString();string strFromId = context.Request.QueryString["f"].ToString();string strSendId = context.Request.QueryString["s"].ToString();int intSuccess = 0;string strDate = DateTime.Now.ToString("HH:mm:ss");XmlDocument xmlDoc = new XmlDocument();try{xmlDoc.Load(context.Server.MapPath("Chat.xml"));XmlNode root = xmlDoc.SelectSingleNode("chat");XmlElement xmlE = xmlDoc.CreateElement("message");xmlE.SetAttribute("fId", strFromId);xmlE.SetAttribute("sId", strSendId);XmlElement xmlEd = xmlDoc.CreateElement("datetime");xmlEd.InnerText = strDate;xmlE.AppendChild(xmlEd);XmlElement xmlEc = xmlDoc.CreateElement("content");xmlEc.InnerText = strContent;xmlE.AppendChild(xmlEc);root.AppendChild(xmlE);xmlDoc.Save(context.Server.MapPath("Chat.xml"));intSuccess = 1;}catch(Exception ex) {throw ex;}context.Response.Write(intSuccess);}public bool IsReusable {get {return false;}}}

以上所述是小編給大家介紹的使用jQuery調用XML實現無重新整理即時聊天，希望對大家有所協助，如果大家有任何疑問歡迎給我留言哦！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More