How do I reserve JSON data for .getJSON calls?

[2Charlie]

I'm able to use cfhttp to query the data. However, I'm not sure how to reserve this data for my jQuery .getJSON() calls. Since I can't do a CORS call with JavaScript, I believed an alternative is to use ColdFusion cfhttp calls. Any suggestion is much appreciated.

[Steve Sommers]

Not exactly sure what you are asking. I think you are asking how to use CF as a proxy server. This in and of itself is fairly easy but I think I would need to know more specifics as to why as simply proxy services might not be the best solution. Why can't you use CORS? Assuming CORS is really not an option, JSONP would be the next "standard" way to accomplish what I think you are asking. Need more details...

[2Charlie]

Thanks, Steve. I probably don't use the correct terms but yes. I'm exploring other alternatives and I came across a thread in jQuery to suggest using CF as a proxy server. However, I have never done much with ColdFusion. I'm in the process of asking if the API provider have their servers CORS enable. If not, then I may have to resort to CF proxy server if there are no other better alternatives. Will you provide links/information on the JSONP option? I have tried using .getJSON and came across the No 'Access-Control-Allow-Origin' header is present on the requested resource error; thus, I'm in the hunt for a solution.

Thanks again.

[Steve Sommers]

JSONP is a pre-CORS technology. The API provider should have info on this if they support it as it requires special handling on their end. If they don't already support a JSONP API, CORS is MUCH easier to support and in my opinion CORS is a much more secure option than JSONP (only data returned from the host as opposed to javascript wrapped data). Hopefully they support CORS as this would be your easiest and most secure approach.

[2Charlie]

Okay, I just found out that JSONP will make the API key public. I don't think this is what I want. Is there a way to hide it? If not, I'm guessing then the CF proxy server may be the solution?

[Steve Sommers]

I'm guessing that CORS will have the same issue then as there is not any difference between CORS and JSONP at an API credential level. To write a proxy, look up CFHTTP and CFCONTENT. These two tags are probably a majority of what you need. The only other tags/functions would be anything needed (if needed) to translate from the native API provider response and what you need for your AJAX request (may also need to look at serializeJSON function).

[2Charlie]

Thanks for the input. Let me know ask a dumb question. If I already have the data via CFHTTP, what's the advantage of making it available for AJAX to call?

[Steve Sommers]

I guess I would need to know more of what you are trying to do. Making it available via an AJAX call can let you do client-side "do something" logic but depending on the project, the "do something" may be easier and more straight forward to do server-side. The short answer is: It depends.

[2Charlie]

I do not want to reveal the API key to the public and do not want the page to refresh/reload every time there is a change in the page.  Are there any samples of CF proxy server that  I can take a look?

[Carl Von Stetten]

To hide the API key, you will need to use CF to act as a proxy.

If you want your application to behave like a Single Page Application (SPA) (e.g. content is updated or changed on the page without a full page refresh), then you'll need to use AJAX to make that happen.  If you don't mind the page refresh, then all the work can be done server-side.

[2Charlie]

Can I use something like CFAjaxproxy for this? If so, will it hide my API key?

[Carl Von Stetten]

Not if you don't want to. I've never used CFAjaxproxy and I have plenty of AJAX stuff in my apps. Any .CFM file, or a .CFC with remote methods can be used to provide AJAX responses to JavaScript requests.  And as long as all of your API interactions are done server-side from those .CFM or .CFC files, nothing is revealed to JavaScript and your web-accessible pages.

[2Charlie]

Okay, so basically in my .cfc file, I do a remote method to query my JSON data and then on my .cfm file I will be able to do $.getJSON to this .cfc file to grab all the data, correct?

[Carl Von Stetten]

I should elaborate on this.  Basically, you need a four-step process:

1. Using JavaScript, make an AJAX request to a ColdFusion CFM page/remote CFC method.
2. That ColdFusion CFM/CFC makes an API request (likely via CFHTTP). There may be multiple parts to this to authenticate to the API and get a token/key, then use that key to make the actual API request.
3. API server returns a response with the requested data.
4. The ColdFusion CFM/CFC passes that response back to the browser.

Since the API key only comes into play in step 2 and is solely between the ColdFusion server and the API server, that key is never shared with the browser

[2Charlie]

Right now, I am already have step 2 and 3 done. I just need clarification on how to do 1 and 4. This is my current code to display the data from the chttp api call.

<cfif !IsJSON(articleData)>

  <h3>The URL you requested does not provide valid JSON</h3>

  <!--- If the data is in JSON format, deserialize it. --->

<cfelse>  

  <cfset cfData=DeserializeJSON(articleData)>

  <!---<cfdump var=#cfData# >--->

  <cfif structKeyExists(cfData, 'data')>

        <cfoutput>

        <h1>#cfData.data.searchTitle.en#</h1>

            <p>#cfData.data.current_version.en.text#</p>

        </cfoutput>

    </cfif>   

</cfif>

How do I modify this code to pass this information to the client's browser?