Ajax Basic


Hôm nay mình giới thiệu đến với các bạn cách viết 1 ajax thể hiện kết nối giữa client với server đơn giản nhất với HTML.

Để biết qua ajax là gì và căn bản các bạn nên đến trang http://www.w3schools.com/ajax/ đọc sơ qua cái khái niệm và các ví dụ cơ bản

Mình xin mạng phép nói thêm chút it. là all bài viết này mình sẻ dùng cho java ^^! nên các bạn nào yêu thích java thì hy vọng các bài viết giúp ích cho các bạn nhiều.

Mục tiêu chúng ta cần nắm trong bài làm :

HTML :

  • Load Javascript
  • Kiểm xoát được việc khởi tạo request.

JavaScript

  • Định nghỉa đối tượng để send HTTP request đến server.
  • Send đối tượng đó với loại GET request.

Ok bước 1 : chúng ta tạo ra 1 file message.js . File này như sau :

//Creating a new XMLHttpRequest object base on Web browser
function getRequestObject() {
	if (window.ActiveXObject) {
		return(new ActiveXObject("Microsoft.XMLHTTP"));
	} else if (window.XMLHttpRequest) {
		return(new XMLHttpRequest());
	} else {
		return(null);
	}
}

function sendRequest(serverSite) {
	 var request = getRequestObject();
	 // request change current state , we will call function handleResponse
	 // to process result returned from server
	 request.onreadystatechange = function() {
		handleResponse(request);
	 };
	 // open connect to server site allow by GET method
	 request.open("GET", serverSite, true);//Asynchrnonos request
	 // not send data
	 request.send(null);
}

// process result returned from server.
function handleResponse(request) {
	 if (request.readyState == 4 && request.status == 200) {
		 // request success
		 alert(request.responseText); // show dialog box display result
	 }else{
		 // request fail
	 }
}

Page server MyServer.html của chúng ta thêm data tùy ý nha .

d3
đây là trang MyClient.html của chúng ta

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="/Scripts/ShowMessage.js"></script>
<title>Insert title here</title>
</head>
<body>
	<div align="center">
		<table border="1" bgcolor="#eeeeee">
			<tr>
				<th><big>Ajax: Simple Message</big></th>
			</tr>
		</table>
		<p />
		<input type="button" value="Show Message" onclick="sendRequest('MyServer.html')" />
	</div>
</body>
</html>

kết quả của bài viết :
d1

 

Chúng chuyển Server thành servlet như thế nào . Cách thức không thay đổi :

Chúng tạo servlet có tên HelloServlet.java

doGet viết như sau :

protected void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		response.setHeader("Cache-Control", "no-cache");
		response.setHeader("Pragma", "no-cache");
		PrintWriter out = response.getWriter();
		Date cuurentDate = new Date();
		out.print("Happy birthdate your mother !!! " + cuurentDate.toString());
}

Tại sao chúng ta phải setHeader như vậy :
1 – Có vấn đề về bộ nhớ đệm. Chúng thấy rằng URL không thay đổi, Nhưng data from server chuyển về dung lượng có thể thay đổi tùy thuộc nhiều yếu tố.
Vì vậy nếu Browser caches page. chúng ta có thể nhận được một kết quả không đúng.
Giải pháp cho điều này :
response.setHeader(“Cache-Control”, “no-cache”);
response.setHeader(“Pragma”, “no-cache”);

2 – Sử dụng servlet thì các bạn xữ lý logic tốt hơn rồi khỏi phải nói =]]

Sửa phía Client :
<input type=”button” value=”Show Message” onclick=’sendRequest(“HelloServlet”)’ />

Kết quả :
d1

Chúc thành công nào….sao muh fail được =]]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: