Using Ajax Proxy in the Connections

The Connections server has Ajax Proxy that you can use to make cross domain calls. In order to try the Ajax proxy i did create a iWidget that makes call to http://www.atech.com from the page http://wpconnections.atech.com/. In order to test iWidget i did add it to Connections HomePage. You can download the AjaxProxy iWidget from here

This is how my AjaxProxy.xml file the iWidget xml definition file looks like

<?xml version="1.0" encoding="UTF-8" ?>
<iw:iwidget id="AjaxProxy" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget" 
supportedModes="view" mode="view" lang="en" iScope="com.webspherenotes.ajaxproxy" 
allowInstanceContent="true" >
<iw:resource uri="ajaxproxy.js" />
  <iw:content mode="view">
      <![CDATA[
      <div>Ajax proxy</div>
   <span id="replacecontent">Replace content</span>
      ]]>
</iw:content>
</iw:iwidget>


The ajaxproxy.xml declares ajaxproxy.js as a resource, which has all the JavaScript logic for the widget. The ajaxproxy widget displays a place holder div, replacecontent

This is how my ajaxproxy.js file looks like 

dojo.provide("com.webspherenotes.ajaxproxy");
dojo.declare("com.webspherenotes.ajaxproxy", [], {
 onview: function(){
       console.log("Inside the onView function()");
    var currContext = this.iContext;
    try{
   dojo.xhrPost({
  url: "/homepage/web/proxy/http/www.atech.com",
 
  load: function(data, ioargs){
   currContext.getElementById("replacecontent").innerHTML = data;
   console.log(data);
  },
  error: function(error,ioargs){
   alert("Error :" + data);
  }
   });
   }catch(error){
   console.log("Error in the dojo.xhrPost " + error );
   }
    }
});


The onview() method of the ajaxproxy widget will get called to generate the VIEW mode markup, in this method i am making HTTP POST to /homepage/web/proxy/http/www.atech.com which actually means http://www.atech.com, once the response is back i will get control in the load() method and i am using the response to display markup in the widget, which looks like this



The markup looks unformatted because it does not include the necessary resources. When you deploy the widget on your server it will fail with 403 forbidden error at the time of making xhrPost() call unless your ajax proxy is configured to make POST request.

1 comment: