![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
}
}
}](https://image.slidesharecdn.com/javscript-xmlhttprequest-140723201736-phpapp02/85/Jav-script-xml-httprequest-3-320.jpg)
![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](https://image.slidesharecdn.com/javscript-xmlhttprequest-140723201736-phpapp02/85/Jav-script-xml-httprequest-6-320.jpg)
![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](https://image.slidesharecdn.com/javscript-xmlhttprequest-140723201736-phpapp02/85/Jav-script-xml-httprequest-7-320.jpg)
![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](https://image.slidesharecdn.com/javscript-xmlhttprequest-140723201736-phpapp02/85/Jav-script-xml-httprequest-9-320.jpg)
Jav script xml-httprequest
- 2. AJAX (Asynchronous JavaScript and XML) ¢ 掲揖化 javascript c xml ¢ 亮l僕 request 欺 server ¢ 音喘嶷仟d秘中 ¢ p富 server 議 ¢ 奐紗聞喘宀w ¢ 駅嗤措挫議O
- 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