เอเจ็ก – PlusMagi's Blog By Pitt Phunsanit

Fetch API: Download

ที่นี้มาถึงการที่ใช้ fetch download file จาก server ซึ่งวิธีนี้ง่ายกว่าการใช้ jQuery ดึงไฟล์มามาก จากที่เคยเขียน jQuery ajax download file เอาไว้จะเห็นว่าวิธีนี้ง่ายกว่ามาก

เริ่มจากการที่โหลด download.js มาก่อน โดยใช้คำสั่ง npm i downloadjs
ไฟล์กลางที่ไว้ใช้ร่วมกัน

scripts.js

/*
pitt phunsanit
default fetch api options
version 1
*/
let fetchOptions = {
    "headers": {
        'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    "method": "post"
};

/*
pitt phunsanit
get file name from fetch api
version 1
*/
function fetchGetFilename(response) {
    let filename = '';
    let disposition = response.headers.get('Content-Disposition');
    if (disposition && disposition.indexOf('attachment') !== -1) {
        let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
        let matches = filenameRegex.exec(disposition);
        if (matches != null && matches[1]) {
            filename = matches[1].replace(/['"]/g, '');
        }
    }
    return filename;
}

/*
pitt phunsanit
get status from fetch api
version 1
*/
function fetchStatus(Response) {
    if (Response.status >= 200 && Response.status < 300) {
        return Promise.resolve(Response);
    } else {
        return Promise.reject(new Error(Response.status + ' : ' + Response.statusText));
    }
}

ตัวอย่างการใช้ fetch download file โดยใช้ downloadjs ช่วยให้ทำงานได้ทุกบราวเซอร์ (ยกเว้น IE ถ้าจะใช้กลับไปอ่าน Fetch API)

JavaScript/fetch.download.html
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

      <meta name="author" content="Pitt Phunsanit">
      <title>fetch: download</title>
   </head>
   <body>
      <script src="../node_modules/downloadjs/download.min.js"></script>
      <script src="../scripts.js"></script>
      <script>
fetchOptions.body = 'file=ISO 3166-1 two aplha COUNTRY codes (01102009).xls&token=HH89VOiirgXlCdEqDrFs';

fetch('http://localhost/snippets/PHP/download.php', fetchOptions)
    .then(fetchStatus)
    .then(
        function(response) {
            if (response.ok) {
                let fileName = fetchGetFilename(response);
                let mimeType = response.headers.get('Content-Type');

                response.blob().then(function(blob) {
                    download(blob, fileName, mimeType);
                });
            }
        }
    )
    .catch(function(error) {
        alert(error);
    });
      </script>

</body></html>

อ่านเพิ่มเติม

ส่งข้อมูลแบบ Ajax ด้วย JQuery

ถ้าสมมุติว่าฟอร์มที่ส่งข้อมูลเดิมของเราเขียน

เราจะแปลงให้ส่งข้อมูลแบบ Ajax ได้โดย แก้เป็น

<form id="testF" method="post">…</form>
<script src="plus/jQuery/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function(){
/*เริ่มทำงานเมื่อโหลดหน้าเสร็จ*/
	$('#testF').submit(function(){
/* ทำงานเมื่อฟอร์มไอดี testF โดนซับมิต*/
		data=$('#testF').serialize()
/*ดึงค่าจากฟอร์มไอดี testF ทั้งหมด*/
		$.post('jQueryAjax.php' ,data ,function(response){
/* รูปแบบคือ $.post(ไฟล์ปลายทาง ,ข้อมูล ,ฟังก์ชั่นที่จะทำเมื่อไฟล์ปลายทางตอบกลับมา)*/
			alert(response);
		});
		return false;
	});
})
</script>

ตัวอย่าง
บันทึกเป็นไฟล์ชื่อ jQueryAjax.php

<?php
if($_POST['iusername'] != ''){
	echo 'ได้รับ ค่า iusername = '.$_POST['iusername']."nipassword = ".$_POST['ipassword'];
	exit();
}else{
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ส่งข้อมุลแบบ post ด้วย jQuery</title>
<script src="plus/jQuery/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function(){alert('12');
	$('#testF').submit(function(){
		data=$('#testF').serialize()
		$.post('jQueryAjax.php' ,data ,function(response){
			alert(response);
		});
		return false;
	});
})
</script>
</head>
<body>
<form id="testF" method="post">
  <label for="iusername">รหัสผู้ใช้</label>
  <input type="text" name="iusername">
  <br />
  <label for="ipassword">รหัสผ่าน</label>
  <input type="password" name="ipassword">
  <input type="submit" name="isubmit" value="ส่งข้อมูล">
</form>
</body>
</html>
<?php
}

ajax คืออะไร jQuery ทำไมใช่และไม่ใช่ ajax

มีคนเข้าใจผิดว่า การใช้ JQuery ในเว็บแล้วจะทำให้เว็บนั้นเป็น Ajax ไปด้วย หรือถ้าจะเขียน ajax ต้องใช้ jQuery การอธิบายต้องเริ่มจากวิวัตนาการของเว็บตั้งแต่เริ่มแรกครับ

ในยุคแรกเว็บแบบดังเดิมมีเพียงภาษา html เพื่อแสดงผลที่ทำสำเร็จรูปเอาไว้แล้วเท่านั้น ใครก็ตามที่เข้าไปอ่านข้อมูลจะพบกับข้อมูลเดียวกัน เหมือนหนังสือเล่มเดียวกันที่ทุกคนจะอ่านเนื้อหาเดียวกันเพราะว่าภาษา html มีต้นแบบมาจากการกำหนดในการทำต้นฉบับหนังสือ จึงเรียกเว็บแบบ static
ต่อมามีการนำภาษาฝั่งเว็บเซิร์ฟเวอร์ มาใช้เพื่อตอบสนองความต้องการเฉพาะบุคลขึ้นมาเป็นเว็บแบบ dynamic โดยเว็บเซิร์ฟเวอร สร้างหน้าเว็บจากต้นแบบ (โดยใช้ภาษาสำหรับเขียนเว็บบนเว็บเซิร์ฟเวอร เช่น php ,asp ,cgi คำนวณและส่งผลลัพธ์ออกมาเป็นภาษา html ) โดยเริ่มจากระบบเว็บเมล์ (คงไม่อยากให้ใครมาอ่านเมล์คุณเหมือนยุคที่ 1 นะครับ) การกระทำกิจกรรมแต่ละครั้ง เช่น login เข้าสู่ระบบจะมีขั้นตอน

เข้าหน้าล็อกอิน
โปรแกรมเว็บเบราว์เซอร์จะสร้างหน้าจาก html ที่ได้จาก server
พิมพ์ข้อมูลและส่ง
ส่งข้อมูลให้ server ถ้า net ช้าเราจะเห็นหน้าขาวๆ เพราะเว็บเบราว์เซอร์ไม่มีหน้าเว็บที่จะแสดง ระหว่างรอผลตอบกลับจาก server
ถ้าชื่อผู้ใช้และรหัสผ่านถูกต้องก็จะเห็นหน้าต้อไป ถ้าไม่ก็จะโดนสั่งให้ไปหน้า login อีกครั้ง

เว็บยุคต่อมาเนื่องจากภาษา html ทำได้แค่แสดงหน้าตา ทำลิงค์และจัดข้อความเท่านั้นจึงมีการนำภาษา JavaScript ซึ่งทำงานบนเว็บเบราว์เซอรมาช่วย เรียกว่า dhtml (dynamic html) โดยมันใช้เพื่อ

นำมาตรวจสอบข้อมูล เช่น ถ้าผู้ใช้ลืมใส่รหัสผ่านและกดปุ่ม login ระบบจำส่งข้อมูลไปตรวจสอบบนเว็บเซิร์ฟเวอร์ โดยผลลัพธ์แน่นอนว่าจะต้องโดนปฏิเสธไม่ให้เข้าระบบ JavaScript จะช่วยตรวจสอบเบื้องต้นเช่น ถ้าไม่ได้กรอกชื่อผู้ใช้หรือรหัสผ่าน ก็จะมีข้อความเตือนให้กรอกข้อมูลให้ครบก่อน การบังคับให้กรอกอีเมล์ ให้ใส่ได้เฉพาะตัวเลข ก่อนจะยอมให้ส่งข้อมูลไปตรวจสอบบนเว็บเซิร์ฟเวอร์ เมื่อข้อมูลทั้งหมดถูกต้อง
ตกแต่งให้หน้าเว็บมีความน่าสนใจมากขึ้น มี animation เช่น ทำเป็นรูปตัวการ์ตูนวิ่งตามเมาส์ ตัวหนังสือวิ่ง ซ่อนบางส่วนไว้ไม่แสดงจนกว่าคลิกที่บางจุด
คำนวณเล็กๆ น้อยๆ เช่นบวกราคาสินค้าที่ต้องจ่าย
อำนวยความสะดวกมักจะเป็น ปุ่มเลือก / ทั้งหมดในอีเมล์เป็นต้น

วิธีนี้มีข้อดีคือ

เว็บเซิร์ฟเวอร์ทำงานน้อยลง เพราะบางส่วนจะทำที่เครื่องผู้ใช้
ผู้ใช้ไม่ต้องเสียเวลารอและกรอกข้อมูลใหม่ทั้งหมด โอกาสที่จะรอการทำงาน ซึ่งเห็นเป็นหน้าขาวน้อยลง (ช่วยให้รู้สึกว่าเร็วขึ้น )
ผู้ใช้ได้ใช้เว็บที่สวยงาม น่าสนใจใช้สะดวก
นอกจากนี้ยังนำ JavaScript มาช่วยในการคำนวณเล็กๆน้อย เข่น บวกราคาสินค้าทั้งหมด

ต่อมา พ.ศ. 2545 บริษัทไมโครซอฟท์ได้ทำการคิดค้น XMLHttpRequest ขึ้นมาเป็นทางเลือกในการเขียนโปรแกรมบนเว็บเพจ เพื่อใช้ติดต่อกับเว็บเซิร์ฟเวอร์ ในการแลกเปลี่ยนข้อมูลโดยไม่ต้องส่งข้อมูลหน้าเว็บทั้งหมดมาใช้ใน Outlook Web Access ที่มาพร้อมกับ Microsoft Exchangeเว็บเซิร์ฟเวอร 2000 โดยต้องใช้กับ ไออี (อินเทอร์เน็ตเอกซ์พลอเรอ) เท่านั้นต่อมาเว็บเบราว์เซอร์อื่นๆ เช่นจาก มอซิลลา ไฟร์ฟอกซ์ได้นำแนวคิดของ XMLHttpRequest ไปใส่ในเบราว์เซอร์ของตนด้วยจนปัจจุบันได้กลายเป็นมาตรฐานที่ทุกเว็บเบราว์เซอร์ต้องมี เมื่อ กูเกิล ได้เปิดบริการจีเมล ซึ่งใช้ XMLHttpRequest จึงเริ่มทำให้มีการใช้อย่างกว้า
งขวางขึ้น
เทคนิคนี้ไม่มีชื่อเรียกอย่างเป็นทางการจน Jeese Jams Garett นั้นเป็นผู้ที่ได้บัญญัติคำว่า เอแจ็กซ์ ขึ้นเมื่อปีพ.ศ. 2548 ซึ่งนึกขึ้นได้ระหว่างที่เขากำลังอาบน้ำ เพื่อหาคำสั้นๆ สำหรับอธิบายให้ลูกค้าของเขาทราบเกี่ยวกับเทคโนโลยีต่างๆ ที่ต้องการจะนำเสนอ
เอแจ็กซ์ (AJAX – Asynchronous JavaScript And XML) เป็นชื่อของเทคนิคที่จะเปลี่ยนแปลงบางส่วนของหน้าเว็บเท่าที่เปลี่ยนไปจริงๆ โดยไม่ต้องเปลี่ยนส่วนที่ไม่เกี่ยวข้อง
หลักการทำงานคือ
วิธีการทำงานของเว็บแอปพลิเคชันแบบดังเดิมนั้น โดยปกติแล้วเมื่อผู้ใช้ทำการร้องขอข้อมูลจากเซิร์ฟเวอร์ ตัวเว็บเบราว์เซอร์จะทำการส่งข้อมูลการร้องขอกับเว็บเซิร์ฟเวอร์ และที่เว็บเซิร์ฟเวอร์จะทำการประมวลผลจากการร้องขอที่ได้รับ และส่งผลลัพธ์เป็นหน้า HTML กลับไปให้ผู้ใช้ วิธีการข้างต้นเป็นวิธีการแบบการร้องขอและการตอบรับ (Request and Response) ซึ่งผู้ใช้จะต้องรอระหว่างที่เซิร์ฟเวอร์ประมวลผลอยู่ ซึ่งเป็นหลักการทำงานแบบ Synchronous
แต่การทำงานของเว็บแอปพลิเคชันที่ใช้เทคนิคเอแจ็กซ์จะเป็นการทำงานแบบ Asynchronous หรือการติดต่อสื่อสารแบบไม่ต่อเนื่อง โดยเซิร์ฟเวอร์จะทำการส่งผลลัพธ์เป็นเว็บเพจให้ผู้ใช้ทันทีโดยไม่ต้องรอให้ ประมวลผลเสร็จก่อน หลังจากนั้นเว็บเพจที่ผู้ใช้ได้รับจะทำการดึงข้อมูลในส่วนต่างๆทีหลัง หรือจะดึงข้อมูลก็ต่อเมื่อผู้ใช้ต้องการเท่านั้น (ทำงานอยู่เบื้องหลัง)

วิธีนี้มีข้อดีคือ

สามารถเรียกดูข้อมูลได้ทันที โดยไม่ต้องรีเฟรชหน้านั้นๆ บ่อย และไม่เสียเวลากับส่วนที่ไม่จำเป็น ไม่ว่าจะเป็น ต้องสร้างหน้าเว็บใหม่ทั้งหมด เพราะจะเปลี่ยนเฉพาะบริเวณที่ต้องการเท่านั้น
ลดการใช้เครือข่ายเพราะ ทำให้ขนาดข้อมูลนั้นเล็กลงในครั้งต่อๆไป เพราะสามารถส่งเพียงข้อมูล และคำสั่งจาวาสคริปต์ลงมาเฉพาะส่วนที่มีการเปลี่ยนแปลง แทนที่จะต้องส่งข้อมูลใหม่หมดมาทั้งหน้า
ความรวดเร็วในการตอบสนอง เนื่องจากการใช้เทคนิค เอแจ็กซ์นั้นทำให้การเปลี่ยนแปลงต่างๆ เช่นการแก้ไข เพิ่มเติม ลบทิ้งรายการข้อมูล หรือการดึงข้อมูลที่ต้องการจะค้นหานั้น สามารถทำได้ในฉากหลัง ทำให้ผู้ใช้รู้สึกการตอบสนองนั้น คล้ายคลึงกับโปรแกรมบนเครื่องคอมพิวเตอร์มากกว่าเว็บปกติที่ต้องรอโหลดใหม่ทั้งหน้าสำหรับการเปลี่ยนแปลงต่างๆ

เพราะว่า เว็บเบราว์เซอร์แต่ละตัวมีความแตกต่างกันมาก การเขียนโปรแกรมต้องคำนึงถึงความแตกต่างของแต่ละตัว โดยเฉพาะไออีต่างเวอร์ชั่นกันก็อาจจะเขียนต่างกันอย่างสิ้นเชิง จึงมีการเขียนไลบรารี่ (Library) มาช่วยแก้ปัญหานี้หลายตัว เช่น dojo ,ext และ JQuery เป็นหนึ่งในนั้น โดยเป็นไลบรารี่ที่สามารถใช้เขียนงานที่เป็น dhtml และ ajax

สรุปคือ

เป็น dhtml เมื่อใช้ javascript เช่นพวก accordion tab เปลี่ยนการแสดงผลหน้าเว็บ
เป็น Ajax ถ้ามีการทำงานโดยแลกเปลี่ยนข้อมูลกับเว็บเซิร์ฟเวอร์ เฉพาะที่จำเป็นเท่านั้น เช่น ใช้คำสั่งส่งข้อมูลไปเว็บเซิร์ฟเวอร์และรับข้อมูลมาเปลี่ยนเฉพาะที่เปลี่ยนไปจริงๆ

PlusMagi's Blog By Pitt Phunsanit

Tag Archive เอเจ็ก

Fetch API: Download

ส่งข้อมูลแบบ Ajax ด้วย JQuery

ajax คืออะไร jQuery ทำไมใช่และไม่ใช่ ajax