Cross Site Scripting PHP Proxy

I needed to access a REST web service from jQuery, but Chrome would throw an error during the ajax call due to the "origin" policy.  It's possible to setup a CORS filter with Tomcat and Apache, but that sounded like a lot of work.

Instead, if you can use PHP, just download the following PHP proxy:
https://github.com/developerforce/Force.com-JavaScript-REST-Toolkit/blob/master/proxy.php

Two changes are needed:

1. Edit line 176 such that it reads  $url_query_param = 'url';
2. Either fix the regexp at lines 172 and 173 which checks that the call is to sales force.com (set it to match your website) or  comment out lines 206 to 212 (potentially dangerous).

Now your $.ajax call needs to be modified so that the target url is part of the url.  Everything else is seamless.  See below.

 

 var req = $.ajax({
    type: 'GET',
    contentType: 'application/json',
    mimeType: 'application/json',
    url: 'http://proxy-server/app/proxy.php?mode=native&url=http://api-server/api/object/'+$("#objectID").val(),
    dataType: 'json',
    success: function(data, textStatus, jqXHR) {
 alert("Got data successfully");
 $('#responseData').text(JSON.stringify(data));
 },
    error: function(xhr, textStatus, error) {
 alert("Error: " + textStatus);
 } 
  });

That's it!

Different Return types from AJAX calls

When you create an XMLHTTPREQUEST object, the ResponseText can contain just about anything. In Ajaxifying old apps and widgets, I find myself dealing with two situations:

1) Output is just plain HTML

This is easy to deal with. You can just update the innerHTML of a DIV to the ResponseText.

2) Output is mixed HTML and JavaScript

This is trickier. You can run the JavaScript function eval on output that is pure JavaScript. If it's mixed, I use JavaScript to create a String that stores the HTML output I want. Then you can update the innerHTML of a DIV to be eval(ReponseText).

Also, a Caveat:

A page may fail to load. It is possible to get the return code of a page from XMLHTTPRequest, BUT, if you catch errors in your page, the page will load 'successfully' though with errors. What I've done is to print the error out in the page, and then when updating my DIV, I do ResponseText.search('ERROR'). If the result is -1, the word ERROR was not found in the text. Of course you can get more specific about the type of error...

Using innerHTML with Ajax - How Can I make JavaScript work?

JavaScript inside

script

tags does not work it is inserted in the body of an object using innerHTML.

If you set the innerHTML of a Div or other object to contain

script

tags, you must use the defer attribute and set it to true.

MSDN link here

Redirecting a User's Browser without Creating History

When writing web applications, it is sometimes desireable and/or necessary to redirect the user without creating history in the browser. This prevents the user from hitting the back button and ending up at a page. For example, when a form I have created submits to a JSP that processes the form and outputs status messages, the user is forwarded onwards after the processing is complete. If they press back, they would end up at the JSP that outputted the status messages, which is not the behavior the user would likely expect. If they hit back, they want to go back and edit something and hit save again.

Another example is changing, say, details of a user account. When the page is saved, a common task would be to submit the form to a servlet or JSP, then redirect back to the page. We don't want the user to hit back and reach an out of date page.

This can be done via javascript using location.replace and in Mozilla/Firefox with location.href. These change the URL in address bar and load the page specified, but without creating history. Changing location alone creates history. In the example below, ${navigateTo} stores the location to forward the user to.

 if (document.images) // check for IE
  location.replace('&{navigateTo}');
 else // Mozilla, Firefox
  location.href='&{navigateTo}';

And to give time for the user to see the output before forwarding them:

 if (document.images)
  window.setTimeout("location.replace('&{navigateTo}')","5000");
 else
  window.setTimeout("location.href='&{navigateTo}"',"5000");