retrieving a json file stored in local storage through ajax inside a webview

Question

I have a UWP application that's targeted for mobile. I have a local html and js file in the application along with some json files that the js file needs to call on. The webview renders and loads the html file and js file correctly.

My problem is to be able to get the json file within the js file. I tried doing an ajax call with the local path "ms-appx-web:///www//demo_data//demo.json". The folder "www" is under the root project. I get a 500 error from the ajax call with a textStatus of "Error". What am i doing wrong and how do i get this to work? There's not much documentation when i tried to google this or i might be googling the wrong thing.

Answer 1

I tried doing an ajax call with the local path "ms-appx-web:///www//demo_data//demo.json".

Firstly, the ms-appx-web scheme may not be supported by jQuery.ajax(). Actually it is invoke the XMLHttpRequest, the request need to be XMLHTTPRequest standard. If you invoke the ajax call with ms-appx-web in a HTML directly you will get the error details:

jquery-3.2.1.min.js:4 XMLHttpRequest cannot load ms-appx-web:///test.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

So secondly, the file should be in a web server. A local file may not be loaded by this method. And the uwp app is not a web server you may not use jQuery.ajax() to load the local file.

If you just want to show the json file inside the WebView, there're several ways you may reference.

1. Upload to a web server and use the jQuery.ajax().

2. Load the Json file by uwp APIs and then load it by NavigateToString method. For example(parse the json if needed):

   StorageFile f = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/www/test.json"));
   WebBrowser.NavigateToString(await FileIO.ReadTextAsync(f));
   

3. Hard code the content of json file directly inside the js as an object for dealing. For example:

   <script type='text/javascript'> 
       function doSomething() {
           var data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';
           var mydata = JSON.parse(data);             
           document.getElementById('myDiv').innerText ="name:"+ mydata[0].name;
           return "done";
       }
   </script> 
   //Invoke the script by webview
   private async void btninvoke_Click(object sender, RoutedEventArgs e)
   {
       string result = await WebBrowser.InvokeScriptAsync("doSomething", null);
   }
   

More details please reference this thread, and more details about the WebView please reference the official sample.