AJAX - XMLHttpRequest
Table of Contents
#
AJAX - XMLHttpRequest
Use XMLHttpRequest object handle AJAX
client -> server Front-end - request -> back-end client <- server Front-end <- response - back-end
##
build XMLHttpRequest(old method)
JavaScript
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
}
}
}
New browser have XMLHttpRequest object now. MDN JavaScript
var xmlHttpRequest = new XMLHttpRequest();
##
2 type to post data to backend(send request)
1 FormData(if IE, 10 up)
// 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);
2 JSON
// obj is data want to post to backend
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');
// build content type
xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// obj to url string
function formUrlEncode(obj) {
var urlData = '';
for (var x in obj) {
urlData = urlData + x + '=' + obj[x] + '&';
}
urlData = urlData.substr(0, (urlData.length - 1));
return urlData;
}
// send request
xmlHttpRequest.send(formUrlEncode(obj));
// if want ajax get data
// use xmlHttpRequest.send();
// xmlHttpRequest.send('user=ted_shiu&password=123456');
##
Backend(handle request and response browser)
PHP
// ajax.php
<?php
if (isset($_POST['user'])) {
// do something
if ($_POST['password']) {
// do something
$output = array(
'status' => 'ok',
'message' => 'msg'
);
// echo is reponse browser, must use json_encode()
echo json_encode($output);
}
}
?>
// json.php
<?php
var_dump($_POST);
echo '<br>';
echo $_POST['user'];
echo '<br>';
echo $_POST['password'];
?>
Refer - 你不可不知的 JSON 基本介紹 Refer - Ajax and JSON
##
Response
AJAX handle response from backend check response state, use XMLHttpRequest properties
xmlHttpRequest.onreadystatechange = function() {
if (xmlHttpRequest.readyState == 4) {
// do something
if (xmlHttpRequest.status == 200) {
alert(xmlHttpRequest.responseText);
// parse response to object
var data = JSON.parse(xmlHttpRequest.responseText);
alert(data.status);
}
}
}