none
Windows 8.1 WebView控件无法正常使用Ajax? RRS feed

  • 问题

  • 我在示例代码的页面里加了一些测试用的Ajax,加载点击之后没有返回。想问一下是什么问题呢?
    <!DOCTYPE html>
    <html>
        <head>
            <title>Example HTML document</title>
            <script>
                window.onload = function () {
                   document.querySelector("#span1").innerText=document.URL;
                }
    
                function doAjax() {
                    var x = new XMLHttpRequest();
                    x.open("GET", "http://www.qq.com/", true);
                    x.setRequestHeader("Content-type", "text/html");
                    x.send();
                    x.onreadystatechange = function () {
                        var o = document.getElementById("output");
                        if (x.readyState == 4) {
                            o.innerText = x.response;
                        }
                    }
                }
            </script>
        </head>
        <body>
            <h1>Hi!</h1>
            <p>This is a very simple HTML page.</p>
            <p>Querying the browser DOM, this content has been loaded from <span id="span1" />.</p>
            <div id="output">
    
            </div>
            <button id="do" onclick="doAjax()">doAjax</button>
        </body>
    </html>
    

    2014年7月11日 2:51

答案

  • 你好,请看我之前的回复,WebView中完全可以使用 Ajax,http://lanxingsite.azurewebsites.net/api/Values如果你使用这个网址作为Ajax的请求对象,那么数据是可以被请求到的。

    同样,如果你写的这个HTML页面Host在一个网页服务器上,也是请求不到QQ网站的网页代码的,你可以去测试一下。

    其实道理也很简单,如果人家给你了钥匙,你才可以去访问人家,如果人家没给你钥匙,你肯定访问不了。这里CORS就是一把钥匙。

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • 已标记为答案 blastmann 2014年7月16日 10:42
    2014年7月16日 9:57
    版主

全部回复

  • 你好 blastmann,

    你的问题我可以重现,的确网页可以在IE中正常运行Ajax,但是在WebView中不行。

    我感觉可能是代码的问题,我这里使用了 http://www.w3school.com.cn/tiy/t.asp?f=ajax_get 这个页面作为WebView的Source来测试,发现Ajax可以正常工作,点击那个Ajax的按钮就可以发现内容的变化。

    我按照测试页面上的方法来重写了你的doAjax()方法:

                xmlhttp=new XMLHttpRequest();
                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        document.getElementById("output").innerHTML = xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET", "http://www.w3school.com.cn/ajax/demo_get.asp", true);
                xmlhttp.send();

    不过代码还是不能正常运行,在IE中可以顺利运行,在WebView中还是没有响应。

    我估计问题可能出现在两个地方:1,ContentType,2,跨域。不过我还是需要时间去调试一下看问题到底在哪里。

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.



    2014年7月14日 2:29
    版主
  • 你好,

    我这里做了一些测试,发现可能是服务器端的问题。作为测试,我使用了如下的代码:

    xmlhttp.open("GET", "http://lanxingsite.azurewebsites.net/api/Values", true);

    发现是可以正常调用AJAX的,关于这个,你或许应该enable 服务器端的一个跨域请求的设置,具体请参考:http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api#intro

    我相信如果你把HTML页面host在一个Web Server上执行Ajax的话,也会遇到同样的问题不能正确请求到信息。

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    2014年7月16日 7:12
    版主
  • 我无法控制别人的服务器啊,这是WebView本身的Bug吧。怎么能这样限制Ajax呢,如果我需要做一个基于WebView的Single Page App的话,那Ajax很难应用在里面啊。
    2014年7月16日 9:52
  • 你好,请看我之前的回复,WebView中完全可以使用 Ajax,http://lanxingsite.azurewebsites.net/api/Values如果你使用这个网址作为Ajax的请求对象,那么数据是可以被请求到的。

    同样,如果你写的这个HTML页面Host在一个网页服务器上,也是请求不到QQ网站的网页代码的,你可以去测试一下。

    其实道理也很简单,如果人家给你了钥匙,你才可以去访问人家,如果人家没给你钥匙,你肯定访问不了。这里CORS就是一把钥匙。

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • 已标记为答案 blastmann 2014年7月16日 10:42
    2014年7月16日 9:57
    版主