2010-03-20 26 views
6

Tôi hoàn toàn mới với thế giới javascript và ajax nhưng cố gắng tìm hiểu.Tôi thiếu gì trong XMLHttpRequest?

Hiện tại tôi đang thử nghiệm XMLHttpRequest và tôi không thể thực hiện công việc ngay cả ví dụ đơn giản nhất. Đây là mã tôi đang cố chạy

<script type="text/javascript"> 
     function test() { 
      xhr = new XMLHttpRequest(); 

      xhr.onreadystatechange = function() { 
       if (xhr.readyState == 4 && xhr.status == 200){ 
        var container = document.getElementById('line'); 
        container.innerHTML = xhr.responseText; 
       } else { 
        alert(xhr.status); 
       } 
      } 

      xhr.open('GET', 'http://www.google.com', true);     
      xhr.send(null); 
     } 
    </script> 

Và tôi luôn nhận được cảnh báo với trạng thái 0. Tôi đã đọc rất nhiều trang web về điều này và tôi không biết mình đang thiếu gì. Tôi sẽ đánh giá cao sự giúp đỡ nào, cảm ơn!

Trả lời

13

Bạn đang chạy vào số Same Origin Policy.

Trừ khi mã của bạn thực sự đang chạy trên www.google.com (không chắc chắn), điều này sẽ xảy ra lỗi.

Ngoài ra, và mặc dù điều này không gây ra vấn đề gì cho bạn vào lúc này, việc thực hành kém và có thể dẫn đến các điều kiện chủng tộc, bạn đang sử dụng hình cầu trên khắp nơi.

Tận dụng tối XHR biến cục bộ của hàm

var xhr = new XMLHttpRequest(); 

Và đề cập đến nó với this bên trong phương pháp onreadstatechange.

if (this.readyState == 4 && this.status == 200){ 
// etc etc 
8

Tiếp theo từ David's answer:

Bạn phải sử dụng một đường dẫn tương đối để ở lại trong chính sách cùng một nguồn gốc. Nếu không, hầu hết các trình duyệt sẽ chỉ trả về một số trống responseTextstatus == 0.

Là một cách giải quyết khả thi, bạn có thể thiết lập một đơn giản reverse proxy (với mod_proxy nếu bạn đang sử dụng Apache). Điều này sẽ cho phép bạn sử dụng các đường dẫn tương đối trong yêu cầu AJAX của bạn, trong khi máy chủ HTTP sẽ hoạt động như một proxy cho bất kỳ vị trí "từ xa" nào.

Chỉ thị cấu hình cơ bản để thiết lập proxy ngược trong mod_proxy là ProxyPass. Bạn thường sẽ sử dụng nó như sau:

ProxyPass  /ajax/  http://google.com/ 

Trong trường hợp này, trình duyệt sẽ yêu cầu /ajax/search?q=stack+overflow nhưng máy chủ sẽ phục vụ này bằng cách đóng vai trò như một proxy để http://google.com/search?q=stack+overflow.

1

+1 cho cả Daniel và David để có câu trả lời đúng, tôi muốn thêm vào nhận xét rằng có rất ít trường hợp (trừ khi bạn chỉ muốn học JS tốt hơn) rằng bạn nên trực tiếp sử dụng phó xhr bằng cách sử dụng thư viện như jQuery đã được thử nghiệm và chứng minh bởi hàng triệu nhà phát triển trên khắp thế giới. Nó cũng có rất nhiều tính năng hữu ích khác sẽ giúp bạn phát triển ajax (như hoạt ảnh và thao tác DOM).

Paul

2

Ngoài các vấn đề chính sách cùng một nguồn gốc, alert bạn đang ở trong một nơi vô lý. Khi bạn sử dụng XMLHttpRequest, hàm được gán cho xhr.onreadystatechange sẽ được gọi bất cứ khi nào thay đổi readyState. readyState nên thay đổi (theo lý thuyết) từ 0 (khởi tạo) thành 1 (được gửi) thành 2 (tải) thành 3 (tương tác) thành 4 (đã hoàn thành).

Mã của bạn là kiểm tra số readyState và xem yêu cầu đã hoàn tất chưa (if (xhr.readyState == 4)) và nếu không, alertHTTP status code. Vì yêu cầu chưa được gửi (hoặc vừa được gửi), chưa có trạng thái HTTP.

Lý tưởng nhất, bạn nên di chuyển alert bên trong khối if, vì vậy nó cho bạn biết khi nào nó kết thúc.

Các vấn đề liên quan