简体   繁体   中英

Ajax call not working in IE8

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,

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

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 .

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');

很简单,在页面上添加以下行:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM