appkonthaiแอพคนไทย
Language
  • EN
  • TH
Font
  • M
  • L
  • XL
Theme
  • Light
  • Dark

HTTP Request

7 March 2018

7 มีนาคม 2561

HTTP Request

Concept

แนวคิด

การรับส่งข้อมูลกันระหว่าง Client-side และ Server-side ผ่านทาง Hypertext Transfer Protocol (HTTP)

The data transfer between Client-side and Server-side over Hypertext Transfer Protocol (HTTP).

Keywords

คีย์เวิร์ด

Requestการส่งข้อมูลจาก Client-side
Responseข้อมูลทีได้รับกลับมาจาก Server-side
URLตำแหน่งที่อยู่ของ Resource (Service) ปลายทาง
HTTP Statusสถานะของ Response ทีได้รับจาก Server-side
HTTP Methodวิธีการรับส่งข้อมูล ตัวอย่างเช่น GET, POST
Content Typeประเภทของข้อมูลที่รับส่งกัน ตัวอย่างเช่น JSON, XML
Serializationการแปลงข้อมูลให้อยู่ในรูปแบบที่สามารถรับส่งกันได้
Deserializationการแปลงข้อมูลที่ถูก Serialize แล้วกลับมาเป็นข้อมูลต้นฉบับ
Timeoutกำหนดว่าจะรอ Response จาก Server-side เป็นระยะเวลาเท่าไร
RequestThe data sending from client-side.
ResponseThe send back data from server-side.
URLThe address location of the target resource (service).
HTTP StatusThe status of the response from server-side.
HTTP MethodThe data sending method such as GET, POST.
Content TypeThe type of transfer data such as JSON, XML.
SerializationThe data conversion to get the data that ready to send over the network.
DeserializationThe data conversion to get the original data.
TimeoutThe time setting to waiting for the response from server-side.

HTTP Request มีขั้นตอนการทำงานดังนี้

Client-side กำหนด URL และ HTTP Method

Client-side กำหนดข้อมูลที่ต้องการส่ง โดยข้อมูลที่ต้องการส่งนั้นต้องสอดคล้องกับ HTTP Method คือ

  • GET ข้อมูลจะส่งผ่านทาง Query String ใน URL โดยข้อมูลเหล่านี้จะต้องผ่านการทำ URL Encode เสียก่อนเพื่อให้สามารถส่งได้ถูกต้อง (เช่น การใช้ฟังชั่น encodeURIComponent บน JavaScript)
  • POST ข้อมูลที่ส่งจะส่งผ่านทาง Request Body โดยข้อมูลเหล่านี้ถ้าไม่อยู่ในรูปแบบที่สามารถรับส่งได้ (ข้อมูลประเภท String) จะต้องผ่านการ Serialize เสียก่อน (เช่น การใช้ฟังชั่น JSON.stringify บน JavaScript)

Client-side กำหนดข้อมูลอื่นๆ เพิ่มเติมผ่านทาง HTTP Header ถ้าต้องการ เช่น Content-Type

Client-side เปิดการเชื่อมต่อ และส่งข้อมูล

Client-side รอ Response จาก Server-side จนกระทั่ง Timeout

หลังจากนั้นจะเป็นการประมวลผลฝั่ง Server-side ซึ่งอ่านได้จากบทความนี้ HTTP Response

HTTP Request

*โค้ดตัวอย่างเหล่านี้ใช้เว็บเซอร์วิสตัวนี้เพื่อทดสอบ

http://appkonthai.com/http-request-service.ashx

*ตัวอย่าง query string สำหรับทดสอบเว็บเซอร์วิสตัวนี้

http://appkonthai.com/http-request-service.ashx?client=test&date=1990-01-01

The HTTP Request has following steps.

Client-side define the URL and HTTP Method.

Client-side define the sending data that according to the HTTP Method.

  • GET The data will send through Query String in the URL which this data need to do URL encoding before sending (such as use encodeURIComponent function in JavaScript).
  • POST The data will send through Request Body which this data need to serialize first if it's not ready to transfer (such as use JSON.stringify function in JavaScript).

Client-side define other data through HTTP Header, if needed, such as Content-Type.

Client-side open connection and send data.

Client-side waiting for the response from server-side until timeout.

After this step is server-side processing which you can read here HTTP Response.

HTTP Request

*These example code use this web service for testing.

http://appkonthai.com/http-request-service.ashx

*The example query string to test this service.

http://appkonthai.com/http-request-service.ashx?client=test&date=1990-01-01

  • C#
  • Java
  • JavaScript
  • PHP
  • Python
  • Swift

static void get()
{
	var query = "?client=C%23&date=" + DateTime.Now.ToShortDateString();
	var url = "http://appkonthai.com/http-request-service.ashx" + query;
	var request = WebRequest.Create(url);
	var response = new StreamReader(request.GetResponse().GetResponseStream()).ReadToEnd();
	Console.WriteLine(response);
}

static void post()
{
	var url = "http://appkonthai.com/http-request-service.ashx";
	var json = new Dictionary<string, string>()
	{
		{ "client", "C#" },
		{ "date", DateTime.Now.ToShortDateString() }
	};
	var body = new JavaScriptSerializer().Serialize(json);
	var bytes = Encoding.UTF8.GetBytes(body);
	var request = WebRequest.Create(url);
	request.Method = "POST";
	var stream = request.GetRequestStream();
	stream.Write(bytes, 0, bytes.Length);
	var response = new StreamReader(request.GetResponse().GetResponseStream()).ReadToEnd();
	Console.WriteLine(response);
}

public void get() throws Exception
{
	SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
	String query = "?client=Java&date=" + format.format(new Date());
	URL url = new URL("http://appkonthai.com/http-request-service.ashx" + query);
	HttpURLConnection request = (HttpURLConnection)url.openConnection();
	request.setRequestMethod("GET");
	InputStream input = new BufferedInputStream(request.getInputStream());
	System.out.println(streamToString(input));
}

public void post() throws Exception
{
	SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
	HashMap<String, String> json = new HashMap<String, String>(); 
	json.put("client", "Java");
	json.put("date", format.format(new Date()));
	String body = new com.google.gson.Gson().toJson(json);
	URL url = new URL("http://appkonthai.com/http-request-service.ashx");
	HttpURLConnection request = (HttpURLConnection)url.openConnection();
	request.setRequestMethod("POST");
	request.setDoOutput(true);
	DataOutputStream output = new DataOutputStream(request.getOutputStream());
	output.write(body.getBytes());
	InputStream input = new BufferedInputStream(request.getInputStream());
	System.out.println(streamToString(input));
}

public String streamToString(InputStream input) throws Exception
{
	InputStream stream = new BufferedInputStream(input);
	StringBuilder builder = new StringBuilder();
	String line;
	BufferedReader reader = new BufferedReader(new InputStreamReader(stream));	
	while ((line = reader.readLine()) != null) {
		builder.append(line);
	}
	return builder.toString();
}

function get() {
	var query = '?client=JavaScript&date=' + new Date().toISOString().substr(0, 10);
	var request = new XMLHttpRequest();
	request.onreadystatechange = stateChange;
	request.open('GET', 'http://appkonthai.com/http-request-service.ashx' + query, true);
	request.send();
}

function post() {
	var json = {
		client: 'JavaScript',
		date: new Date().toISOString().substr(0, 10)
	};
	var body = JSON.stringify(json);
	var request = new XMLHttpRequest();
	request.onreadystatechange = stateChange;
	request.open('POST', 'http://appkonthai.com/http-request-service.ashx', true);
	request.send(body);
}

function stateChange() {
	if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
		console.log(this.responseText);
	}
}

function get() {
	$query = "?client=PHP&date=" . date("Y-m-d");
	$url = "http://appkonthai.com/http-request-service.ashx" . $query;
	$response = file_get_contents($url);
	echo $response;
}

function post() {
	$json = array("client" => "PHP", "date" => date("Y-m-d"));
	$body = json_encode($json);
	$url = "http://appkonthai.com/http-request-service.ashx";
	$opts = array("http" => array(
		"method" => "POST",
		"header"  => "Content-type: application/json",
		"content" => $body)
	);
	$response = file_get_contents($url, false, stream_context_create($opts));
	echo $response;
}

def get():
	query = "?client=Python&date=" + datetime.datetime.now().strftime('%Y-%m-%d')
	url = "http://appkonthai.com/http-request-service.ashx" + query
	response = requests.get(url)
	print(response.text)

def post():
	url = "http://appkonthai.com/http-request-service.ashx"
	_json = {
		"client": "Python",
		"date": datetime.datetime.now().strftime('%Y-%m-%d')
	}
	body = json.dumps(_json);
	response = requests.post(url, data=body)
	print(response.text)

func get() {
	let format = DateFormatter()
	format.dateFormat = "yyyy-MM-dd"
	let query = "?client=Swift&date=" + format.string(from: Date())
	let url = "http://appkonthai.com/http-request-service.ashx" + query
	var request = URLRequest(url: URL(string: url)!)
	request.httpMethod = "GET"
	URLSession.shared.dataTask(with: request) { data, response, error in
		if error == nil {
			let responseData = String(data: data!, encoding: .utf8) as String?
			print(responseData!)
		}
	}.resume()
}

func post() {
	let format = DateFormatter()
	format.dateFormat = "yyyy-MM-dd"
	let json = [ "client": "Swift", "date": format.string(from: Date()) ]
	let body = try! JSONSerialization.data(withJSONObject: json, options: .prettyPrinted)
	let url = "http://appkonthai.com/http-request-service.ashx"
	var request = URLRequest(url: URL(string: url)!)
	request.httpMethod = "POST"
	request.httpBody = body
	URLSession.shared.dataTask(with: request) { data, response, error in
		if error == nil {
			let responseData = String(data: data!, encoding: .utf8) as String?
			print(responseData!)
		}
	}.resume()
}
ประสมศักดิ์ ขุนหมื่น Prasomsak Khunmuen

แค่โปรแกรมเมอร์คนไทย ที่รักการเขียนโปรแกรม

I'm just a Thai Programmer who loves programming.