Ajax Basic 2


Send GET data

GET học tới đây thì củng biết GET là nó làm gì rồi !!!

Nối tiếp data vào cuối URL (GET Data) chúng ta sẻ thường thấy như sau

https://thaihoanghai.wordpress.com/my-action?name=kobee&birthdate=10/10/1991

dựa vào URL trên chúng ta truyền 2 variable là name birthdate với các giá trị tương ứng là kobee vs 10/10/1991

* HTML : chúng ta dùng & trong URL , XHTML chúng ta dùng “&amp”.

Để đọc data từ URL trong servlet chúng ta dùng request.getParameter.

Chúng ta có thay đổi về đoạn script trong bài này :

Bài trước chúng ta alert ra Message.

Hôm nay chúng ta sẻ hiển thị data to client dựa vào ID của tag HTML.

Ví dụ : Insert Text vào tring tag HTML with ID.

document.getElementById(tagHTML).innerHTML =”abc –> xyz”;

//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,tagHTML) {
	 var request = getRequestObject();
	 // request change current state , we will call function handleResponse
	 // to process result returned from server
	 request.onreadystatechange = function() {
		handleResponse(request,tagHTML);
	 };
	 // 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,tagHTML) {
	 if (request.readyState == 4 && request.status == 200) {
		 // request success
		 //alert(request.responseText); // show dialog box display result
		 document.getElementById(tagHTML).innerHTML = request.responseText;

	 }else{
		 // request fail
	 }
}

====================

Client như sau :

<!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("HelloServlet?name=kobee","myDiv")' />
		<div id="myDiv">

		</div>
	</div>
</body>
</html>

Note : sendRequest chúng ta có 2 params.
param 1 : Server side có thê data là name = kobee
param 2 : ID của Tag HTML mà chúng ta muốn hiển thị data ra ( ở đây là myDiv ) các bạn thấy có 1 tag div empty ở dưới

Phía Server chúng ta sẻ get value name.

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

		String name = request.getParameter("name");
		if(name.equalsIgnoreCase("kobee")){
			Date cuurentDate = new Date();
			out.print("<h2>To Day \n Happy birthdate your mother !!! " + cuurentDate.toString()+"</h2>");
		}else{
			out.print("<h2>Not found " + name + " =]] =]] </h2>");
		}
	}

Nếu name = kobee thì chúng ta hiển thị
out.print(“<h2>To Day \n Happy birthdate your mother !!! ” + cuurentDate.toString()+”</h2>”);

ngược lại hiển thị
out.print(“<h2>Not found ” + name + ” =]] =]] </h2>”);

Kết quả khi chúng ta run :
d1

=============================================================

Reading User Input ( Nhúng data vào trong GET method)

Tiếp túc nào….

làm động lên ..chúng ta cho user nhập data vào rồi xữ lý.

  •  Để dọc data của một textfield chúng ta dùng lệnh sau :

data = document.getElementById(“id_tag_html”).value;

  • Bỏ qua những khoảng trống dư thừa và các kí tự đặc biệt.

input = escape( data );

  • Đặt data vào tring URL – Nếu có nhiều input thì cứ &…

NEW_URL = OLD_URL + “?name” = + input;

Chúng ta dựa vào các bước hướng dẫn trên và sửa sendRequest của chúng ta như sau

function sendRequest(serverSite,idUserInput,tagHTML) {
	 var request = getRequestObject();
	 //========================New Code==============================================
	 var data = "name=" + escape(document.getElementById(idUserInput).value);
	 var address = serverSite + "?" + data;

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

Ở đây chúng ta có 3 params :
param 1 : Server site ( ở đây của mình là HelloServlet )
param 2 : id của TextField mà chúng ta muốn lấy data. ( name )
param 3 : ID của Tag HTML mà chúng ta muốn hiển thị data ra ( ở đây là myDiv ).

HTML chúng ta chỉ thay đổi như sau :

Nhập tên : <input type=”text” name=”name” id=”name”>
<input type=”button” value=”Show Message” onclick=’sendRequest(“HelloServlet”,”name”,”myDiv”)’ />
<div id=”myDiv”></div>

Kết quả hiển thị :

d1

d1

==============================================

Send POST Data

Thường chúng ta sẻ sử dụng POST nhiều hơn GET. ( mặc định GET )

Lý do tại sao như vậy :

  • URL trở nên đơn giản , ngắn gọn hơn
  • Data thì được ẩn đi, và người dùng thì không thể thấy được
  • Data truyền đi lớn
  • Có thể send các kí tự đặc biết 
  • Nếu data trên server thay đổi nên dùng POST

Chỉ dủng GET : Khi bạn muốn bookmark kết quả quả của trang

Các bược thực hiện để dùng POST

  • Get Data từ form và thiết lập URL : tương tự như cách củ
  1. document.getElementById(“some-id “).value;
  2. escape(value)
  3. tạo query : var data = “name1=” + val1 + “&name2=” + val2;
  • Thay POST trong phương thức open
  1. request.open(“POST”, address, true)
  • URL Encoding type
  1. request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”)
  • Send data đi
  1. request.send(data)

Chúng ta chỉ thay đổi code trong sendRequest như sau :

function sendRequest(serverSite,idUserInput,tagHTML) {
	var request = getRequestObject();
	//==========================New code========================================
	var data = "name=" + escape(document.getElementById(idUserInput).value);
	//================================End==================================
	// request change current state , we will call function handleResponse
	// to process result returned from server
	request.onreadystatechange = function() {
		handleResponse(request,tagHTML);
	};
	//==========================New code========================================
	// open connect to server site allow by GET method
	request.open("POST", serverSite, true);//Asynchrnonos request
	request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//send data
	request.send(data);
	//================================End==================================
}

Trong Server ( Servlet của chúng ta ) trong method doPost();

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

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

		String name = request.getParameter("name");
		if(name.equalsIgnoreCase("kobee")){
			Date cuurentDate = new Date();
			out.print("<h2>To Day \n Happy birthdate your mother !!! " + cuurentDate.toString()+"</h2>");
		}else{
			out.print("<h2>Not found " + name + " =]] =]] </h2>");
		}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

Ok kết quả run tượng tự như trên ^^!.
Chúc các bạn thành công

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: