CODEWITHSUNDEEP
javascriptajaxwindowsazure-cognitive-services
Koba
Koba

Reputation: 1544

ajax request to Microsoft Emotion API in javascript

I am trying to try the microsoft emotion api. I am running a simple python web server with CORS enabled. Below is my server python file with which I start the server:

python-server.py

#! /usr/bin/env python2
from SimpleHTTPServer import SimpleHTTPRequestHandler
import BaseHTTPServer

class CORSRequestHandler (SimpleHTTPRequestHandler):
    def end_headers (self):
        self.send_header('Access-Control-Allow-Origin', '*')
        SimpleHTTPRequestHandler.end_headers(self)

if __name__ == '__main__':
    BaseHTTPServer.test(CORSRequestHandler, BaseHTTPServer.HTTPServer)

I have an index.html file in which I am sending the http request:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>JSSample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
    $(function() {
        $.ajax({
            url: "https://api.projectoxford.ai/emotion/v1.0/recognize",
            beforeSend: function(xhrObj){
                // Request headers
                xhrObj.setRequestHeader("Content-Type","application/json");
                xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key",JSON.stringify({"my-key"}));
            },
            type: "POST",
            // Request body
            data: JSON.stringify({"url": "http://tinyurl.com/2g9mqh"}),
        })
        .done(function(data) {
            alert("success");
        })
        .fail(function() {
            alert("error");
        });
    });
</script>
</body>
</html>

After about 30 seconds I get the connection refused response. The http request code was taken from the emotion api's page I linked earlier. I wonder whether I need a real server or is there a mistake in the code? Thanks.

Upvotes: 0

Views: 1102

Answers (3)

Mateen Kadwaikar
Mateen Kadwaikar

Reputation: 403

<!DOCTYPE html>
<html>

<head>
  <title>Face API</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>

<body>

  <script type="text/javascript">
    $(function() {
      $.ajax({
          url: "https://api.projectoxford.ai/emotion/v1.0/recognize",
          beforeSend: function(xhrObj) {
            // Request headers
            xhrObj.setRequestHeader("Content-Type", "application/json");
            xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key",
              "");
          },
          type: "POST",
          // Request body
          data: JSON.stringify({
            "url": "http://i1.mirror.co.uk/incoming/article6395000.ece/ALTERNATES/s1200/MAIN-David-Beckham-next-James-Bond.jpg"
          }),
        })
        .done(function(data) {
          console.log(data);
        })
        .fail(function(e) {
          console.log(e);
        });
    });
  </script>
</body>

</html>

enter image description here

Upvotes: 1

Phoenix
Phoenix

Reputation: 156

Please use the code below(replace your-key), just save it as a .html and open it in the browser it shut work(without any server). If it works then try it in your python server.

<!DOCTYPE html>
<html>
<head>
    <title>JSSample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
    $(function() {
        $.ajax({
            url: "https://api.projectoxford.ai/emotion/v1.0/recognize",
            beforeSend: function(xhrObj){
                // Request headers
                xhrObj.setRequestHeader("Content-Type","application/json");
                xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","your-key");
            },
            type: "POST",
            // Request body
            data: {"url": "https://oxfordportal.blob.core.windows.net/emotion/recognition1.jpg"},
        })
        .done(function(data) {
            alert("success");
        })
        .fail(function() {
            alert("error");
        });
    });
</script>
</body>
</html>

Upvotes: 1

cthrash
cthrash

Reputation: 2973

The JSON needs to be sent out as a string. So change your body specification to:

data: "{\"url\": \"http://...\"}"

Upvotes: 1

Related Questions