Bing Search Api with jQuery and JSON, error in IE9

Question

Hello,

I try to migrate from the current Bing Search Api 2.0 to the new version on Azure.
Until now I have used an ajax call in combination with jquery and jsonp. The callbackfunction works and the results are displayed. After the migration I have seen an answer about the new api, the usage of json and the new authenification.

So I have set up the new jquery options with jquery and json and it works in Firefox (request send, data retrieved, results displayed). But if I run the same script on IE9 it's not working (debugging console even doesn't show a request to the bing api). I think it's because of the more strictly handled Same Origin Policy and the jquery json request (formerly it was jsonp for that reason).

How can I solve this problem? Is it possible to send a jsonp request with a callback function that works again?

Here my code:

function bingsearch() {
var wshost = 'https://api.datamarket.azure.com/Bing/SearchWeb/Web';
var searchstr = "Query=%27" + encodeURIComponent(stripHTML($('#searchbox').val())) +'%27';
var adult = "&Adult="+ encodeURIComponent('\'Moderate\'');
var top = "&$top="+ encodeURIComponent('10');
var skip = "&$skip="+ encodeURIComponent('0');
var format = "&$format="+ encodeURIComponent('JSON');
var wssearchparam = searchstr + adult + top + skip + format;
//send request to bing api
$.ajax({
  type: 'GET',
  url: wshost,
  data: wssearchparam,
  dataType: "json", 
  context: this,
  beforeSend: function(xhr){
    xhr.setRequestHeader('Authorization', 'Basic base_64_encoded_key_plus_extra_colon');
  },
  success: function(data,status){
    //show data
    showresponse(data);
  }
});

Many thanks in advance
Yukiko

Answer 1

Hi,

Do you got any exception or error details message when web application runs on IE 9? If you can not get it, please use Fiddler 2 to capture the request.

BR,

Arwind

---

Please mark the replies as answers if they help or unmark if not. If you have any feedback about my replies, please contact [e-mail] Microsoft One Code Framework

Answer 2

Hi,

thanks for your reply!

No, there is no exception or error details message when the search function is called.
There is also neither a request in the IE9 debugging mode (F12 - network task)  nor on fiddler. For test reasons I have created a second ajax-call to a local php webservice that is fired at the same time. This one I can see in both consoles but not the bing api call.

In Firefox (bing api call works) I can see both requests - the one to bing and my test call.
I think the json call to the bing api is just not fired in IE because of the strict same-origin-policy. For "foreign" calls normally jsonp is needed - I also had to use jsonp for the bing search api 2.0.

Best regards
Yukiko

Answer 3

You are correct, IE blocks this request because of cross-site security.

You can use jsonp with new Bing API as well. The example of jsonp request would be:

https://api.datamarket.azure.com/Data.ashx/Bing/Search/Composite?Sources=%27web%27&Query=%27helloworld%27&Market=%27en-US%27&$top=25&$format=JSON&$callback=callback

Thanks,

Max

Answer 4

Thank you Max,

jsonp sounds good and I tried "callback" before but with the 2.0 api parameters and it doesn't work. But your options sound good.

But now I run into another problem:
If I use json the request is fired and authenticated in Firefox but not even fired in IE (as described).
If I use jsonp the request is fired in both browsers, but I can't send basic authentication with the xhr header because jQuery handels jsonp in a kind of script tag and I cannot send additional header for the authentication. (see details here)

Is there any possibility to get the credentials passed in another way? E.g. with the api-URL?

Thanks,
Yukiko

Answer 5

Any further suggestions? Should I try to configure a local php-webservice that calls the bing api and only call this local-webservice with json?

Answer 6

Looks like IE wouldn't support what you need with Account key and you would need to implement OAuth support. Most probably this will require a local php-webservice, which is given permissions to your account.

Look up our OAuth support here: http://msdn.microsoft.com/en-us/library/windowsazure/gg193416

Thanks,

Max

Answer 7

Look up our OAuth support here: http://msdn.microsoft.com/en-us/library/windowsazure/gg193416

Max,

I am well and truly confused around this OAuth Support, does the user need to provide consent in all of these examples. Or is there a process where using the Consumer Secret Key, you request a Authorization Token, pass it with the URL to access the Bing Search API, and then it can be returned as JSON/P, without any interaction with the user

Thanks,

Justin

Answer 8

Max, Justin,

Just for information, I have successfully created a local php-webservice that can be called through jQuery, passes the query to the Bing api and returns the json object.

It is not thaaaat fast (bit frustrating) but at least it works. If there is any possibility to use OAuth directly from jQuery I'm also very interested! I had understood it in the way Justin described, at first call a "token service", then send the token together with the query to the Bing Api. But isn't that even slower to call two webservices?

Here my code for jquery and the local php webservice:

jQuery:

var wssearchtermhost = '/pathtolocalwebservice/wsbingapi.php';

function search() {
// Define query and pass to webservice
var wssearchtermparam = 'searchstr='+encodeURIComponent($('#searchbox').val());
$.getJSON(wssearchtermhost, wssearchtermparam, function (data) {showresponse(data);});
}

// Show search results
function showresponse(data){
  //show json results through functions...
}

php webservice "wsbingapi.php", security functions excluded:

<?php 
$searchstr = $_GET["searchstr"]);
$searchstr = str_replace(" ","%20",$searchstr); //workaround to pass spaces

//Bing Api Call
$accountKey = 'your application key';
$rooturl = 'https://api.datamarket.azure.com/Bing/SearchWeb/Web?';
$searchstr = 'Query=%27' . $searchstr . '%27';
$market = '&Market=%27en-US%27';
$adult = '&Adult=%27Moderate%27';
$options = '&Options=%27EnableHighlighting%27';
$websearchoptions = '&WebSearchOptions=%27DisableQueryAlterations%27';
$top = '&$top=10';
$skip = '&$skip=0';
$format = '&$format=JSON';
$parameters = $searchstr . $market . $adult . $options . $websearchoptions . $top . $skip . $format;

$ServiceRootURL = $rooturl . $parameters;
$context = stream_context_create(array(
   'http' => array(
   'header'  => "Authorization: Basic " . base64_encode("ignored:".$accountKey)
    )));
 
$jsonresponse = file_get_contents($ServiceRootURL,0,$context);
echo $jsonresponse;
?>

Hope this helps :-)

Thank you and regards
Yukiko