Problem with an AJAX Example on W3schools

问题

Link to example.

I replaced the URL 'ajax_info.txt' by a website URL (http://...) which responds with some text. The resulting code works in IE 8.

1. Why is the code not working for Chrome (no responseText)?

2. What is the solution (without using any library)?

Thank you for your time.

P.S: I am very new to web development.

回答1:

Browsers have a security limitation called 'same origin policy.' It prevents random websites from making requests on your behalf using your identity information stored in the browser via cookies or localStorage. For example if w3schools.com could make an AJAX request to facebook.com it could find out where you lived or who your friends are if you have that information on Facebook. Browsers prevent this kind of a request by only allowing AJAX requests to make requests to the domain, port and protocol (http or https for example) that the document originated from.

More information:

http://en.wikipedia.org/wiki/Same_origin_policy

This is why your request did not work in Chrome, assuming you put some random site's URL in place of the text file. I am not sure why it would have worked for IE 8. I doubt it would.

回答2:

If you new and you want to avoid most of cross javascripting issues go for jQquery

which lightweight and have less problems when there is no of browser involved

for you current issue you can go for jQuery .Ajax() method will resolve your issue

回答3:

Using JQuery will make you code much easier to manage so go for it. If you really don't want to use library have a look on this www.w3.org/TR/XMLHttpRequeste

Then about the code in the link you provided. I'm able to execute it without any error in chrome. Do the ajax request in your chrome browser did not encounter any error. Try to use the chrome developer tools, here you will see the response status sent by the server. Also you can see if there's an error on your js code.

回答4:

(function(c, I, B) {
        c.fn.responsiveSlides = function(l) {
                var a = c.extend({
                    auto: !0,
                    speed: 500,
                    timeout: 4E3,
                    pager: !1,
                    nav: !1,
                    random: !1,
                    pause: !1,
                    pauseControls: !0,
                    prevText: "Previous",
                    nextText: "Next",
                    maxwidth: "",
                    navContainer: "",
                    manualControls: "",
                    namespace: "rslides",
                    before: c.noop,
                    after: c.noop
                }, l);
                return this.each(function() {
                    B++;
                    var f = c(this),
                        s, r, t, m, p, q, n = 0,
                        e = f.children(),
                        C = e.size(),
                        h = parseFloat(a.speed),
                        D = parseFloat(a.timeout),
                        u = parseFloat(a.maxwidth),
                        g = a.namespace,
                        d = g + B,
                        E = g + "_nav " + d + "_nav",
                        v = g + "_here",
                        j = d + "_on",
                        w = d + "_s",
                        k = c(""),
                        x = {
                            "float": "left",
                            position: "relative",
                            opacity: 1,
                            zIndex: 2,
                        },
                        y = {
                            "float": "none",
                            position: "absolute",
                            opacity: 0,
                            zIndex: 1
                        },
                        F = function() {
                            var b = (document.body || document.documentElement).style,
                                a = "transition";
                            if ("string" === typeof b[a]) return !0;
                            s = ["Moz", "Webkit", "Khtml", "O", "ms"];
                            var a = a.charAt(0).toUpperCase() + a.substr(1),
                                c;
                            for (c = 0; c "+a+"
                                "});k.append(A);l.navContainer?c(a.navContainer).append(k):f.after(k)}a.manualControls&&(k=c(a.manualControls),k.addClass(g+"
                                _tabs "+d+"
                                _tabs "));(a.pager||a.manualControls)&&k.find("
                                li ").each(function(a){c(this).addClass(w+(a+1))});if(a.pager||a.manualControls)q= k.find("
                                a "),r=function(a){q.closest("
                                li ").removeClass(v).eq(a).addClass(v)};a.auto&&(t=function(){p=setInterval(function(){e.stop(!0,!0);var b=n+1" + a.prevText + "" + a.nextText + ""; l.navContainer ? c(a.navContainer).append(g) : f.after(g);
                                var d = c("." + d + "_nav"), G = d.filter(".prev"); d.bind("click", function(b) {
                                        b.preventDefault();
                                        b = c("." + j);
                                        if (!b.queue("fx").length) {
                                            var d = e.index(b);
                                            b = d - 1;
                                            d = d + 1u && f.css("width", u)
                                        };
                                        H();
                                        c(I).bind("resize", function() {
                                            H()
                                        })
                                    }
                                })
                        }
                })(jQuery, this, 0);

来源：https://stackoverflow.com/questions/5387188/problem-with-an-ajax-example-on-w3schools