Ajax call web service call error: undefined

Question

I am stuck by the simple question, I want to make an ajax call a public web service, but got 'undefined' error

<script type="text/javascript">
     $(document).ready(function () {
         $('#btn1').click(myFunction);
     });
     function myFunction() {
         var strSearch = $('#txt1').val();
         var parameters = "{'passage':'" + strSearch + "'}";
         $.ajax({
             url: 'http://www.esvapi.org/v2/rest/passageQuery?key=IP&passage=' + strSearch + '&options=include-passage-references=true',
             type: 'GET',
             data: parameters,
             dataType: "json",
             success: function(result) {
                 $('#res1').html(result.data);
             },
             error: function (xhr) {
                 alert(xhr.data);
             }
         });
     }
</script>

The public service is at http://www.esvapi.org/api. I believe that it uses 'GET' method.

Debug snapshot:

Please look in the [JavaScript error console](http://www.netmagazine.com/tutorials/javascript-debugging-beginners) and tell what errors you see there and which lines they point to. — JJJ, Jun 29 '13 at 15:10
Same origin policy error, you can not use ajax to get content from cross domain sites unless they support JSONP or CORS. — adeneo, Jun 29 '13 at 15:16
I am not sure whether they support JSONP or not. In this case, how can I do? — , Jun 29 '13 at 15:17
You'll need to query the API from your webserver, and use ajax to run scripts on your server etc. Or... you can always use something like YQL. — adeneo, Jun 29 '13 at 15:20

Claudio Redi · Accepted Answer · 2013-06-29T15:31:12.027

0

I'm afraid that your code will never work due same domain policy (it's possible to send information to any origin , but it's invalid to receive information from origins violating this policy).

If the API doesn't provide a jsonp version, you'll need perform the ajax request to a page on your site and access the api using server side logic contained on this page.

This page on your site would be a proxy to communicate with this external service.

This would be a sample method of what you need on server side

public string GetPassage(string passage)
{
    using (var c = new System.Net.WebClient())
    {
        string url = "http://www.esvapi.org/v2/rest/passageQuery?key=IP&passage=' + strSearch + '&options=include-passage-references=true";
        return c.DownloadString(Server.UrlDecode(url));               
    }
}

Instead of calling the API directly, call this action method on your page. Notice that passage is the parameter

edited Jun 29 '13 at 15:31

answered Jun 29 '13 at 15:16

Claudio Redi

63,880
13
118
146

Any example for it, Thanks. – Jun 29 '13 at 15:21
@Love: what server side technology are you using? – Claudio Redi Jun 29 '13 at 15:21
asp.net mvc 4, I use c#. Originally I did want to implement it in the server side. But the parameter to be passed is from client side text box. – Jun 29 '13 at 15:24

score 0 · Answer 2 · edited May 23 '17 at 12:21

You muse be getting cross origin resource sharing error. You are not allowed to do cross domain AJAX for security purpose. See this post: Cross-Origin Resource Sharing (CORS) - am I missing something here?

You have two options:

Use JSONP, but it must be supported by the server.
or you can disable CORS in your browser and then try running this code, it will work. See this post for disabling cors in chrome:

Disable same origin policy in Chrome

Ajax call web service call error: undefined

2 Answers2