Scrum

19-04-2016

Yesterday, I fixed Instagram people and did a little bit of google plus.
Today, I'm going to continue to google plus.
In description
First, I read the PHP code.
Second, I convert the PHP to Golang.

20-04-2016

Yesterday, I finished a Google+.
Today, I am merging DOM web and converting Youtube crawler to Golang.
In detail.
First, I am going to reviewing Youtube.
Second, I will make a structure and make records.
Third, I will code.

22-04-2016

Yesterday, I found some problem of youtube.
Youtube takes a long time to submit data about 42 minutes per KFC brand.
P'gap said he will fix youtube.
so Today, I will add solr for bangkokpost, headlightmag, google plus, Instagram and I rewrite Instagram code.

27-05-2016

for me. Yesterday I continue to get comment facebook and I  test my script on another site  and it works.
so Today I will finish kapook.

for Maiake you have 3 homework. that you said.
and P'gap has 1 one homework

01-06-2016

Yesterday I have done prachachat and I try to find the best way to make crawler kapook. Finally, I found API kapook. It makes me easier to create crawler kapook.

So today I continue to make kapook with a new design.
It means I set kapook news at center and then use a brand to check text with a keyword.

02-06-2016

Yesterday I have done kapook.
For today, I will keep a comment from the old source such as manager, dailynews and other then I'm looking.
At lunch, I will go to silom for lunch with pea and get the statement.

08-06-2016

Today, I gonna read MongoDB for learning how to CURD and then I will try MongoDB on Golang.
And next, I will try to push social-rank data to mongo.

09-06-2016

Today, In morning I gonna fix my visa.
After then I will do a list of yesterday scrum and P'gap will be taught me  how to migrate to a new crawler.

การใช้งาน AJAX แบบ Cross Domain

เกริ่นนำ

ปัจจุบันนักพัฒนามีความนิยมใช้งาน AJAX อย่างแพร่หลายเนื่องจาก AJAX ช่วยให้การทำงานของ Web App มีประสิทธิภาพมากขึ้น จำเป็นที่จะต้องแยกส่วนที่เป็น Front-End และ Back-End อิสระออกจากกัน ซึ่งหมายความว่าอาจจะแยกกันอยู่คนละ Hosting และ มี Domain ที่แตกต่างกัน

ตัวอย่าง Code PHP เพื่อรับค่าเวลาจาก Server

<?php

date_default_timezone_set('Asia/Bangkok');
$datetime = date('d-M-Y');

$json = json_encode($datetime);

echo $json;

ตัวอย่าง Code jQuery

$.ajax({
    type: 'GET',
    url: 'http://api.myapp.com',
    dataType: 'json',
    success: function(data) {
        console.log(data);
    }
});

แต่หากเรามีความต้องการ ที่จะ Host ส่วนที่เป็น Web API (REST API) และส่วนที่เป็น Web App อิสระออกจากกันโดยการ Host ไว้คนละโดเมน เช่น

• Web App: http://www.myapp.com
• Web API: http://api.myapp.com

เมื่อเรียกใช้งาน AJAX ตาม Coding ข้างต้น ก็จะเจอข้อความ Error ประมาณนี้ครับ

XMLHttpRequest cannot load http://api.myapp.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.myapp.com' is therefore not allowed access.

ทัั้งนี้เพราะ Web Browser ต้องรักษา Same-Origin Policy (SOP) ซึ่งเป็นหลักการด้านความปลอดภัย โดย Web Browser อนุญาตให้ส่ง AJAX Request ไปยัง Server ได้ แต่จะไม่ยอมให้รับข้อมูลที่ถูกส่งกลับมา (JSON)

Same-Origin Policy (SOP)

SOP จะถูกกำหนดด้วยข้อกำหนด 3 ข้อคือ

1. Protocol เช่น HTTP, HTTPS
2. Host เช่น www.myapp.com, api.myapp.com
3. Port เช่น 80, 8080

ดังนั้นไม่เพียงแค่ Host เท่านั้น แต่หาก Origin และ Destination มีข้อใดข้อหนึ่งใน 3 ข้อ นี้แตกต่างกัน ก็จะเข้าข่ายละเมิด SOP และจะส่งผลให้เกิด Error ตามตัวอย่างข้างต้น

การแก้ไข

จากการค้นหาใน Google นั้นเจอวิธีการแก้ไขปัญหาดังกล่าวประมาณ 3-4 วิธี แต่ผู้เขียนจะขอเลือกมา 2 วิธีซึ่งเป็นวิธีที่ใช้ได้ผลและไม่ยุ่งยากสำหรับนักพัฒนาคือ

1. การแก้ไข HTTP Header
2. การใช้ JSON-P

การแก้ไข HTTP Header

สำหรับวิธีนี้ เราสามารถใช้ Code jQuery ในรูปแบบเดิม เพียงแต่มีการเพิ่ม function header ในส่วนของ Server Side ก่อนทำการ echo ตัวแปรแบบ JSON ดังนี้

ตัวอย่าง Code PHP

header('Access-Control-Allow-Origin: http://www.myapp.com');
echo $json;

เพียงเท่านี้ก๋จะสามารถ ใช้งาน AJAX ข้ามโดมเมนได้แล้ว

การใช้ JSON-P

เนื่องจากวิธีการแรกอาจจะไม่ Compatible กับ Web Browser Internet Explorer เวอร์ชั่น 7 และ 8 ผู้เขียนจึงขอเสนอวิธีการสำรองคือการใช้ JSON-P (JSON with Padding) ซึ่งออกแบบมาสำหรับ การใช้งานแบบ Cross Domain ซึ่งเมื่อมีการส่ง AJAX Request แบบ JSON-P ฝั่ง Server จะทำการส่ง JavaScript Block ที่ห่อหุ้ม JSON อยู่ด้านในอีกที

อย่างไรก็ตามข้อเสียของ JSON-P คือรองรับเฉพาะการส่ง AJAX Request แบบ GET เพียงเท่านั้น

ตัวอย่าง Code PHP

if(isset ($_GET['callback'])) {
    header('Content-Type: application/javascript');
    echo $_GET['callback'] . '(' . $json . ');';
}

ตัวอย่าง Code jQuery

$.ajax({
    type: 'GET',
    url: 'http://api.myapp.com',
    dataType: 'jsonp',
    success: function(data) {
        console.log(data);
    }
});

บทสรุป

สำหรับการใช้งาน AJAX แบบ Cross Domain ในแบบ POST หรือ HTTP Verb แบบอื่นๆ กับ Web Browser เวอร์ชั่นเก่า สามารถใช้วิธีแบบ Proxy ซึ่งไม่ได้คลอบคลุมในเนื้อหาของบทความนี้ครับ