Why is my ajax get request responding with an error even though it was successful?

Question

I am attempting to retrieve some data from a 3rd party domain. When I enter the request url. I am able to see the data I requested. But when I attempt to make a call using ajax (to a different domain), it returns the error message. Why am I not able to retrieve the data? Might it have something to do with cross-domain policy and not using jsonp? Here is my code:

<script>
    $(document).ready(function() {

            $.ajax ({
                type: 'GET',
                url: 'https://crm.zoho.com/crm/private/json/Potentials/searchRecords?authtoken=xxx&scope=crmapi&criteria=(((Potential%20Email:test2@email.com))&selectColumns=Potentials(Potential%20Name)&fromIndex=1&toIndex=1',               
                dataType: 'json',
                success: function(test) {
                    alert(JSON.stringify(test));
                },
                error: function(test) {
                    alert(JSON.stringify(test));
                }

            });

     });
</script>

Answer 1

Because the request that you has send is blocked by the browser. When you perform a request using an object XmlHttpRequest and obviously javascript, the browser applied cross-domain policy, defined in WC3, and thus verify in url the origin and target domain (protocol, host and port), if those elements are in different domain (i.e. host and port), then the request never comes out from browser (a.k.a User Agent). You can use jsonp to "break" or "jump" this policy, simply is a tag "script" with a resource (src) defined in a different domain using a parameter called "jsonCallback=?" added in query string, who really receives the data in format json. This is more ugly and have a security risk, therefore never be used. The other method is to use and enable a "technique" (is more than that) known like "CORS" (Cross Origin Request Sharing), where the client (browser) and server (resource at different domain), send, exchange and negotiate an Http Headers to secure that who send and who received are authorized to exchange information. The basics steps to realize CORS is:

1. Explicity define in client (ajax-jquery) that CORS will be used in request, specifying CrossDomain:true. This will enable HTTP Headers defined in CORS

2. Specify in the HTTP Server, a HTTP Header indicating the Domain Source that have permissions to call a resource hosted in server. The most general header can be defined like: Access-Control-Allow-Origin , with value asigned a domain, like "*" (all domain authorized) (Access-Control-Allow-Origin, *)

3. In some Browsers, sometimes they send a http header request called "preflight request", is like a discover via to know if the server is prepared to recieve cross-origin request. This Http Header contains a "Method HTTP" value or "Verb HTTP" (like PUT,POST,GET,DELETE) assigned to "OPTIONS", then the server must be configured too to recieve HTTP Headers with Method "OPTIONS", and therefore allow methods http like PUT, DELETE,POST or GET. In generals terms the server must have this headers when in the request had a method HTTP "OPTIONS":

Access-Control-Allow-Methods , "POST, PUT, DELETE, GET, OPTIONS" Access-Control-Allow-Headers, ", "Content-Type, Accept"

4. Finally, the client (ajax) will recieve the data from the server.

This sounds a little confusing and the steps are few, sorry that not put a code like examples, but, really CORS is not hard to understand.

I hope this will help.

References from Mozilla: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

This show what is CORS and you can use in configuration server: http://enable-cors.org/