$.Ajax doesnt work in windows8 metro app

Question

I am trying to migrate my existing html5 app into a metro app, and finding two major hurdles:

1. .innerHtml is not supported due to security reason
2. $.Ajax just doesn't work (I am using jsonp for data exchange from server)

Questions:

1. How do I bypass the security issue for .innerHtml?
2. What other alternative do I have to make $.Ajax work?

Answer 1

Q2: I had the similar problem, and I changed my $.get to:

function getJSON(url, data, callback, errorCb) {
if (data != null)
{
    var params = [];
    for (var key in data) {
        params.push(key + "=" + encodeURI(data[key]));
    }
    url += "?" + params.join("&");
}

WinJS.xhr({ url: url }).then(
    function (result) {
        if (callback != null)
            callback(result.response, result.status);
    },
    function (result) {
        if (errorCb)
            errorCb(result.status);
    });
}

Answer 2

Q1: WinRT block throws exceptions or warnings when you use .innerHtml for dynamic content. But they don't block you from using .innerHTML all the time. Have you tried toStaticHTML method like following:

element.querySelector("#myId").innerHTML = "some string" + toStaticHTML(yourHTMLContent);

Q2: regular javascript xhr call works for me. Actually I believed that I used .ajax to send some simple GET or POST request before, but ended up using xhr for some other reasons

Hope this helps.