Ajax call not working in IE8

2019-05-04 09:54发布

站内文章 / JavaScript
15 0 0

问题:

I was reading several posts about this, and make some changes to my code but no luck.

Can anyone look into this, to see what's going on here? Or perhaps another way to do what I need (retrieve city, state by a zip code using ziptastic)

The code works fine in Chrome (http://jsfiddle.net/7VtHc/117/)

html

<asp:TextBox ID="txtZipCode" runat="server"></asp:TextBox>        
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox> 
<asp:TextBox ID="txtState" runat="server"></asp:TextBox>

script

<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $("input[id$='txtZipCode']").keyup(function () {
            var el = $(this);

            if (el.val().length === 5) {
                $.ajax({
                    url: "http://zip.getziptastic.com/v2/US/" + el.val(),
                    cache: false,
                    dataType: "json",
                    type: "GET",
                    success: function (result, success) {
                        $("input[id$='txtCity']").val(result.city);
                        $("input[id$='txtState']").val(result.state);
                    }
                });
            }
        });
    });
</script>

Thanks,

回答1:

The issue is IE8 doesn't support the Cross Origin Resource Sharing (CORS) XHR, so you can't do a cross domain ajax call with the native XHR or jQuery's $.ajax.

For IE8, Microsoft decided to come up with their own cross domain XHR instead of using the CORS XHR, which is called XDomainRequest, so you'll have to implement that to support IE8 users. An example usage can be found in this answer.

Alternatively, you could proxy the cross domain request through your local server side, making the external request a server to server situation, which won't be subject to Same Origin Policy.



回答2:

Actual issue in your code is showing "No Transport" error in ajax error call back. add this line jQuery.support.cors = true; would solve your problem

Try this below code in IE and other browser. 

    <html>
    <head>
    <script type='text/javascript' src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
          <script>
    $(document).ready(function() {
        jQuery.support.cors = true;
        $("#zip").keyup(function() {
            var el = $(this);

            if (el.val().length === 5) {
               $.ajax({
                    url: "http://zip.getziptastic.com/v2/US/" + el.val(),
                    cache: false,
                    dataType: "json",
                    type: "GET",
                    success: function(result, success) {
                        $("#city").val(result.city);
                        $("#state").val(result.state);
                    }
                });
            }
        });
    });

    </script>
    </head>
    <body>
        <p>Zip Code: <input type="text" id="zip" /></p>
        <p>City: <input type="text" id="city" /></p>
        <p>State: <input type="text" id="state" /></p>
    </body>
    </html>

Check out these links:

  1. CORS
  2. No Transport error


回答3:

Your request look fine but if it's a IE8 then you probably have a problem with header of file that you are loading, it have to be application/json

PHP example

header('Content-Type: application/json');


回答4:

Very simple, add the following line on your page:

<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />


标签： javascript jquery asp.net ajax internet-explorer-8
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~