How to use API GET request on HTML page with javascript / ajax to retrieve data?

Question

I am following this documentation: https://docs.oracle.com/cloud/latest/marketingcs_gs/OMCAC/DeterminingBaseURL.html

Using basic authentication.

I have already determined the base URL, so I am using the base URL directly in the code.

I am not 100% if i need authorization code or not (not sure, how i will get it) so i am not using this in my code: https://docs.oracle.com/cloud/latest/marketingcs_gs/OMCAC/Authentication_Basic.html

I am trying to get a list of emails by a simple GET request like here: https://docs.oracle.com/cloud/latest/marketingcs_gs/OMCAC/api-application-2.0-emails.html

So far, I have created this code but I do not see any success? why? is there any issue with my code? can anyone help please?

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var username = "MYUSERNAME";
            var password = "MYPASSWORD";

            function make_base_auth(user, password) {
                var tok = user + ':' + password;
                var hash = btoa(tok);
                return "Basic " + hash;
            }

            var url1 = 'https://BASEURL.com/api/REST/2.0/assets/emails';

            $.ajax
                ({
                    type: "GET",
                    url: url1,
                    dataType: 'jsonp',
                    cache: false,
                    //contentType: 'application/x-www-form-urlencoded',
                    headers: {                        
                        'Accept': 'text/html',
                        'Content-Type': 'application/json',
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Access-Control-Allow-Origin': '* ',
                        'Access-Control - Allow - Headers': 'Origin, X-Requested - With, Content-Type, Accept'
                    },
                    //async: false,
                    //data: '{}',
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader('Authorization', make_base_auth(username, password));
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus, errorThrown);
                        console.log(errorThrown);
                    },
                    success: function (result) {
                        console.log(result);
                        alert('success - this is working');
                    }
                    //success: function (jsondata) {
                    //    console.log(status);
                    //}
                });

        });

    </script>
</head>
<body>





</body>
</html>

I am getting CORP error in the log. Based on the documentation that I have provided, do I need to pass 'Authorization' in the header? If yes, how can i get the authorization code?

How to report the CORP error?

The alert box only says "error".

Alert done is outside the asynchronous function, so it gets called no matter what, it does not provide any information about the result of the AJAX call. Can you provide a handler for fail and done to see what goes wrong? You can also check the browser console. — Raul Sauco
– Raul Sauco, Commented Jun 2, 2019 at 4:24
Hi @RaulSauco I have updated the code and provided more info on the error. Please see my updated post / code / questions above. — kuml
– kuml, Commented Jun 2, 2019 at 11:14

Chiến Nghê · Accepted Answer · 2019-06-02 04:40:41Z

2

Please check this codepen (I made it with your code) and replace it with your real requesting url.

When you click on the button, you will see the url is requested successfully as following image

Make sure you use dataType: 'jsonp' for cross-site requesting.

Moreover, in your code, there is a redudant single quote at the end of line success: function (result) {', please remove it.

For the alert("done"), it is always executed because it's not part of async process. it's executed right after the ajax command triggered.

edited Jun 2, 2019 at 4:40

answered Jun 2, 2019 at 4:34

Chiến Nghê

7862 gold badges9 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kuml Over a year ago

Thank you @chiến-nghê for taking time to test this for me, it is helpful what you pointed out. I updated the code, added ERROR alert and getting CORP error in the log. I am also not sure if I need to send 'Authorization' in header or not. I have shared the documentation that I am following, could you please confirm, if i have to send authorization code, how to get one? And how to resolve CORP error?

Chiến Nghê Over a year ago

In order to check whether your basic authentication (username/password) is correct. Please use some tools like Postman to do. For the CORS warning, maybe Oracle's API doesn't allow cross-site requesting, hence, you need to make request to Oracle API from your server instead of client browser.

kuml Over a year ago

Hi Chen i did use postman and I am able to authenticate and get a response. I see an authentication code being generated. I tried copying all the headers as postman like the request was coming from postman (including authentication code), I stop getting COPS error but then I am getting unauthorized 401 error. I have triple checked all credentials, all works outside the ajax code. How can i troubleshoot?

Collectives™ on Stack Overflow

How to use API GET request on HTML page with javascript / ajax to retrieve data?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related