jwchat源碼分析-資料互動部分

這個部分，focus到vcard.html檔案，操作介面

靜態頁源碼：

<form>    <fieldset>      <legend>Name</legend>      <table>          <tr><th nowrap>Full Name:</th><td width="100%"><input type=text id="FN" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Family Name:</th><td width="100%"><input type=text id="N.FAMILY" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Given Name:</th><td width="100%"><input type=text id="N.GIVEN" class="vcardBoxEditable"></td></tr>      </table>    </fieldset>        <fieldset>      <legend>Information</legend>      <table>          <tr><th nowrap>E-mail:</th><td width="100%"><input type=text id="EMAIL" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Web Site:</th><td width="100%"><input type=text id="URL" class="vcardBoxEditable"></td></tr>      </table>    </fieldset>        <fieldset>      <legend>Address</legend>      <table>          <tr><th nowrap>Address:</th><td width="100%"><input type=text id="ADR.STREET" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Address2:</th><td width="100%"><input type=text id="ADR.EXTADD" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>City:</th><td width="100%"><input type=text id="ADR.LOCALITY" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Province:</th><td width="100%"><input type=text id="ADR.REGION" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Postal Code:</th><td width="100%"><input type=text id="ADR.PCODE" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Country:</th><td width="100%"><input type=text id="ADR.CTRY" class="vcardBoxEditable"></td></tr>      </table>    </fieldset>    <fieldset>      <legend>Organization</legend>      <table>          <tr><th nowrap>Name:</th><td width="100%"><input type=text id="ORG.ORGNAME" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Unit:</th><td width="100%"><input type=text id="ORG.ORGUNIT" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Title:</th><td width="100%"><input type=text id="TITLE" class="vcardBoxEditable"></td></tr>          <tr><th nowrap>Role:</th><td width="100%"><input type=text id="ROLE" class="vcardBoxEditable"></td></tr>      </table>    </fieldset>    <fieldset>      <legend>About</legend>      <table width="100%">          <tr><th>Birthday:</th><td width="100%"><input type=text id="BDAY" class="vcardBoxEditable"></td></tr><tr><td colspan=2> </td></tr>          <tr><th>Description:</th><td width="100%"> </td></tr>          <tr><td colspan=2 width="100%"><textarea id="DESC" class="vcardBoxEditable" style="width:100%;" rows=4 wrap=virtual></textarea></td></tr>      </table>    </fieldset>    <div id="savebox"><hr noshade size="1" size="100%"><div align="right"><button onClick="window.close();">Cancel</button> <button onClick="return sendSub();">Save</button></div>      </div>    </form>

查詢資訊由如下代碼實現：

function init() {srcW = opener.top;getArgs();jid = passedArgs['jid'];document.title += jid;// request vcardvar iq = new JSJaCIQ();iq.setType('get');if (cutResource(jid) != srcW.cutResource(srcW.jid)) // not meiq.setTo(jid);var vCard = iq.getNode().appendChild(iq.getDoc().createElement('vCard'));vCard.setAttribute('xmlns', 'vcard-temp');me = this;srcW.con.send(iq, me.handleVCard);}function handleVCard(iq) {if (!iq) {srcW.Debug.log('got empty iq result', 1);return;}srcW.Debug.log(iq.getDoc().xml, 3);if (iq.getNode().getElementsByTagName('vCard').item(0)) {for ( var i = 0; i < iq.getNode().getElementsByTagName('vCard').item(0).childNodes.length; i++) {var token = iq.getNode().getElementsByTagName('vCard').item(0).childNodes.item(i);tokenname = token.nodeName;if (token.firstChild && token.firstChild.nodeType != 3) { // found// a// containerfor ( var j = 0; j < token.childNodes.length; j++) {if (typeof (document.forms[0].elements[tokenname + "."+ token.childNodes.item(j).nodeName]) != 'undefined'&& token.childNodes.item(j).firstChild)document.forms[0].elements[tokenname + "."+ token.childNodes.item(j).nodeName].value = token.childNodes.item(j).firstChild.nodeValue;}} else if (typeof (document.forms[0].elements[tokenname]) != 'undefined'&& token.firstChild)document.forms[0].elements[tokenname].value = token.firstChild.nodeValue;}}}

上面代碼執行之後，會從openfire伺服器接受如下資訊：

[2] inQueue:[2] sending response [468651]:<body xmlns="http://jabber.org/protocol/httpbind" />[2] inQueue:<iq type="result" id="JSJaCID_2" to="13312345678@xjtu/jwchat"><vCard xmlns="vcard-temp"><FN>james boocher</FN><N><FAMILY>boocher</FAMILY><GIVEN>james</GIVEN></N><EMAIL>284771818@qq.com</EMAIL><URL>xjtu.com</URL><ORG><ORGUNIT>dev</ORGUNIT></ORG></vCard></iq>[2] sending response [468652]:<body xmlns="http://jabber.org/protocol/httpbind"><iq xmlns="jabber:client" id="JSJaCID_2" to="13312345678@xjtu/jwchat"type="result"><vCard xmlns="vcard-temp"><FN>james boocher</FN><N><FAMILY>boocher</FAMILY><GIVEN>james</GIVEN></N><EMAIL>284771818@qq.com</EMAIL><URL>xjtu.com</URL><ORG><ORGUNIT>dev</ORGUNIT></ORG></vCard></iq></body>

以上為查詢部分，下面是資訊修改部分，相關源碼如下：

function sendSub() {var iq = new JSJaCIQ();iq.setType('set');var vCard = iq.getNode().appendChild(iq.getDoc().createElement('vCard'));vCard.setAttribute('xmlns', 'vcard-temp');for ( var i = 0; i < document.forms[0].elements.length; i++) {var item = document.forms[0].elements[i];if (item.id == '')continue;if (item.value == '')continue;if (item.id.indexOf('.') != -1) {var tagname = item.id.substring(0, item.id.indexOf('.'));var aNode;if (vCard.getElementsByTagName(tagname).length > 0)aNode = vCard.getElementsByTagName(tagname).item(0);elseaNode = vCard.appendChild(iq.getDoc().createElement(tagname));aNode.appendChild(iq.getDoc().createElement(item.id.substring(item.id.indexOf('.') + 1))).appendChild(iq.getDoc().createTextNode(item.value));} else {vCard.appendChild(iq.getDoc().createElement(item.id)).appendChild(iq.getDoc().createTextNode(item.value));}}srcW.Debug.log(iq.getDoc().xml, 3);srcW.con.send(iq);window.close();}

執行之後，會向openfire伺服器發送如下資訊：

[2] inQueue:[2] sending response [468653]:<body xmlns="http://jabber.org/protocol/httpbind" />[2] inQueue:<iq type="result" to="13312345678@xjtu/jwchat" />[2] sending response [468654]:<body xmlns="http://jabber.org/protocol/httpbind"><iq xmlns="jabber:client" to="13312345678@xjtu/jwchat"type="result" /></body>

該操作之後，資料持久到DB中

----------------------------------------------------------源碼分析-----------------------------------------------------

資料互動核心方法是jsjac中JSJaCIQ，相關源碼如下：

function JSJaCIQ() {    this.base = JSJaCPacket;    this.base('iq');}

又看到了this.base語句，這個需要好好理解

function JSJaCPacket(name) {    this.name = name;    if (typeof(JSJACPACKET_USE_XMLNS) != 'undefined' && JSJACPACKET_USE_XMLNS) this.doc = XmlDocument.create(name, 'jabber:client');    else this.doc = XmlDocument.create(name, '');}

以上看懂的就可以了，使用過程中，只需執行個體化自己的對象就行了

var iq = new JSJaCIQ();iq.setType('set');//updateiq.setType('get');//query

按照協議規範，建立所需常值內容，之後

srcW.con.send(iq);

其中，srcW=openr.top，也就是jwchat.html中top屬性

--------------------------------------------------------資料互動部分結束-----------------------------------------------------