1. JSONP (JSON with padding)

Cross-Domain Ajax Requests

Ví dụ đã hoàn thành:

C:\xampp\htdocs\hanoi.com\index.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="http://localhost/library/jquery/jquery.min.js"></script>
</head>
<body>
	<div id="results">results</div>
	<script type="text/javascript">
		$.ajax({
		  url: 'http://hoguom.com/data',
		  dataType: 'jsonp',
		  jsonpCallback: 'handleResponseCallback' // chỉ định tên của callback function
		});
		function handleResponse(response) {
		  $('#results').html(response);
		}
	</script>
	<script src="http://hoguom.com/data"></script>
</body>
</html>

C:\xampp\htdocs\hoguom.com\data\index.php

<?php  
	echo "handleResponse('".rand(10,100)."')";
?>

Kết quả:

Mở đầu

Same-origin policy là một khái niệm quan trọng trong mô hình bảo mật thông tin web. Đây là một chính sách dành cho các browser, browser chỉ được cho phép các đoạn script ở trang web thứ nhất truy cập vào dữ liệu ở trang web thứ hai khi mà hai trang đó có cùng nguồn (same-origin). Chính sách này ra đời nhằm mục đích ngăn cản các script độc hại ở một trang lấy các thông tin nhạy cảm ở một trang khác. Tuy nhiên nó cũng gây ra một số khó khăn trong quá trình phát triển web như không cho phép gửi AJAX request từ một trang đến trang khác không cùng domain để lấy dữ liệu. Việc gửi cross-domain AJAX request đôi khi là cần thiết, chẳng hạn khi bạn có một API server và muốn cung cấp cho các dịch vụ khác truy cập qua JavaScript. Ở bài viết mình xin giới thiệu một số cách để thực hiện AJAX request giữa các domain khác nhau, hi vọng sẽ giúp ích cho các bạn.

1. JSONP (JSON with padding)

Tuy chúng ta không thể gửi được AJAX request từ một domain này đến một domain khác, nhưng chúng ta có thể dùng thẻ <script> với thuộc tính src để load JavaScript từ bất kì domain nào. JSONP hoạt động trên nguyên tắc này, nó tự động tạo ra thẻ <script> để load code JavaScript từ phía server và thực thi đoạn code đó.

Dưới đây là một ví dụ đơn giản của việc dùng JSONP để thực thi cross-domain AJAX

<div id="results"></div>

$.ajax({
  url: 'http://other-domain.com/data',
  dataType: 'jsonp',
  jsonpCallback: 'handleResponse' // chỉ định tên của callback function
});

function handleResponse(response) {
  $('#results').html(response);
}

Lúc này cặp thẻ <script> với nội dung như dưới sẽ được tạo ra

<script src="http://other-domain.com/data?callback=handleResponse&_=1437907666366"></script>

Ở phía server sẽ cần phải thay đổi dạng của response, nếu như bình thường server trả về response là HTML với nội dung

<p>GET request handled at 2015-07-26 18:06:25</p>

thì để dùng JSONP server phải trả về JavaScript với nội dung

handleResponse('<p>GET request handled at 2015-07-26 18:06:25</p>')

Ở ví dụ trên nếu như không chỉ định tên của callback function thì jQuery sẽ tự sinh ngẫu nhiên tên function (ví dụ: jQuery1111015991538995876908_1437907666364), khi đó code JavaScript có thể được viết lại ngắn hơn 1 chút

$.ajax({
  url: 'http://other-domain.com/data',
  dataType: 'jsonp'
})
.done(function(response) {
  $('#results').html(response);
});

Ưu điểm và nhược điểm

Ưu điểm:

Dễ dàng implement ở phía client
Sử dụng được với tất cả các browser

Nhược điểm

Cần sự hỗ trợ phía server
Chỉ gửi được GET request
Không thể gửi header kèm theo

PreviousCross-Domain Ajax Requests Next2. CORSCross-origin resource sharing (CORS) là một cơ chế đặc biệt cho phép resource đặt tại một do

Last updated 3 years ago