AJAX - XMLHpptrequest introduction

1. XMLHttpRequest
Ted

2. AJAX
(Asynchronous JavaScript and XML)
● 非同步 javascript 與 xml
● 單純發送 request 到 server
● 不用重新載入頁面
● 減少 server 的負擔
● 增加使用者體驗
● 必須有良好的設計

3. check XMLHttpRequest(old method)
var httpRequest;
if (window.XMLHttpRequest) {
//IE7,Mozila,Safari...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//IE5, IE6
//找出最新版MSXML剖析器
var msxmls = ["MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Mircosoft.
XMLHttp"];
for (i = 0; i < msxmls.length; i++) {
try {
//建立XMLHttpRequest物件
httpRequest = new ActiveXObject(msxmls[i]);
break;
} catch (e) {
// do something
}
}
}

4. New browser have XMLHttpRequest object
var xmlHttpRequest = new XMLHttpRequest();

5. 2 type to post data to backend(send
request)
1. FormData(if IE, IE 10 up)
2. JSON

6. FormData
// init FormData
var formData = new FormData();
// add data
formData.append('user', 'Ted_Shiu');
formData.append('password', '123456');
// init XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();
// build poet method and backend target
xmlHttpRequest.open('POST', 'ajax.php');
// send request
xmlHttpRequest.send(formData);
PHP
echo $_POST['user'];
Demo

7. JSON
var obj = {
'user': 'ted_shiu',
'password': '123456'
},
jsonData;
// init XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();
// build poet method and backend target
xmlHttpRequest.open('POST', 'json.php', true);
// build content type
xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-
urlencoded');
// obj to string
jsonData = JSON.stringify(obj);
// send request
xmlHttpRequest.send('json=' + jsonData);
PHP
$request_json = json_decode($_POST['json'], true);
echo $request_json['user'];
Demo

8. Response
xmlHttpRequest.onreadystatechange = function() {
if (request.readyState == 4) {
// do something
if (xmlHttpRequest.status == 200) {
// parse response to object
var data = JSON.parse(xmlHttpRequest.responseText);
alert(data.status);
}
}
}

9. File upload
Use FormData objects
HTML
<form action="upload_one.php" method="post" enctype="multipart/form-data">
<label for="file">File:</label>
<input type="file" name="Upfile" id="select"><br>
<input type="submit">
</form>
JavaScript
formData.append('Upfile', document.getElementById('select').files[0]);
Demo

10. Refer
AJAX - XMLHttpRequest
file upload using ajax