| 제목 | ajaxcall - How can I make an AJAX call without jQuery? | ||
|---|---|---|---|
| 글쓴이 | darkninja | 작성시각 | 2023/06/17 23:45:03 |
|
|
|||
|
How can I make an AJAX call without jQuery? https://stackoverflow.com/questions/8567114/how-can-i-make-an-ajax-call-without-jquery https://developer.mozilla.org/en-US/docs/Web/HTTP/Status https://github.com/codeigniter4/CodeIgniter4/blob/develop/system/HTTP/Response.php 실무에 바로 적용하기에는 모자람이 있습니다 충분히 검토하고 보완해서 사용하세요! index.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Ajaxcall</title>
<style type="text/css" media="screen">
</style>
</head>
<body>
<div style="border: 1px solid #ddd; padding: 10px;">
ajax_formdata
<div id="ajax_formdata"></div>
</div><br/>
<div style="border: 1px solid #ddd; padding: 10px;">
ajax_info
<div id="ajax_info"></div>
</div><br/>
<div style="border: 1px solid #ddd; padding: 10px;">
ajax_result
<div id="ajax_result"></div>
</div>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
var ajax_formdata = document.getElementById("ajax_formdata");
var ajax_info = document.getElementById("ajax_info");
var ajax_result = document.getElementById("ajax_result");
var formData = {
id : '_id',
subject : '_subject',
contents : '_contents',
time : '_time'
};
ajax_formdata.innerText = "obj_param: "+obj_param(formData);
//ajax_formdata.innerText = "obj_param: "+JSON.stringify(formData);
function loadtext() {
Ajaxcall({
url: "get.php",
type: "POST",
data: formData,
//contentType: "json",
async: true, //synchronous request. Default value is true
timeout: 10000, //default timeout 20000
beforeSend: function() {
ajax_info.innerText = "loading...";
},
dataType: 'text',
success: function(result, status) {
if (status == "success") {
if (result) {
ajax_info.innerText = "success...";
ajax_result.innerText = result;
}
else {
ajax_info.innerText = "resule none...";
ajax_result.innerText = "";
}
}
else {
ajax_info.innerText = "timeout...";
ajax_result.innerText = "";
}
},
error: function(status, statusText) {
alert("error code: " + status + "\n" + "error message: " + statusText);
}
});
}
loadtext();
</script>
</body>
</html>
get.php
<?php
$data = file_get_contents("php://input");
echo "file_get_contents('php://input')"."\n";
echo $data."\n";
if (isset($_GET) && count($_GET) > 0) {
parse_str($data, $input);
echo "\n";
echo "parse_str data to input"."\n";
print_r($input);
echo "\n";
echo "_GET"."\n";
print_r($_GET);
echo "id => ".$_GET["id"];
}
else if (isset($_POST) && count($_POST) > 0) {
parse_str($data, $input);
echo "\n";
echo "parse_str data to input"."\n";
print_r($input);
echo "\n";
echo "\n";
echo "_POST"."\n";
print_r($_POST);
echo "id => ".$_POST["id"];
}
else {
//contentType: "json"
$param = json_decode($data, false);
echo "\n";
echo "json"."\n";
echo "id => ".$param->id."\n";
echo "subject => ".$param->subject."\n";
echo "contents => ".$param->contents."\n";
}
?>
ajaxcall.js //https://stackoverflow.com/questions/8567114/how-can-i-make-an-ajax-call-without-jquery //https://developer.mozilla.org/en-US/docs/Web/HTTP/Status //https://github.com/codeigniter4/CodeIgniter4/blob/develop/system/HTTP/Response.php var ajax_load_process = false; var xhr_statusCodes = { // 1xx: Informational 100 : 'Continue', 101 : 'Switching Protocols', 102 : 'Processing', // http://www.iana.org/go/rfc2518 103 : 'Early Hints', // http://www.ietf.org/rfc/rfc8297.txt // 2xx: Success 200 : 'OK', 201 : 'Created', 202 : 'Accepted', 203 : 'Non-Authoritative Information', // 1.1 204 : 'No Content', 205 : 'Reset Content', 206 : 'Partial Content', 207 : 'Multi-Status', // http://www.iana.org/go/rfc4918 208 : 'Already Reported', // http://www.iana.org/go/rfc5842 226 : 'IM Used', // 1.1; http://www.ietf.org/rfc/rfc3229.txt // 3xx: Redirection 300 : 'Multiple Choices', 301 : 'Moved Permanently', 302 : 'Found', // Formerly 'Moved Temporarily' 303 : 'See Other', // 1.1 304 : 'Not Modified', 305 : 'Use Proxy', // 1.1 306 : 'Switch Proxy', // No longer used 307 : 'Temporary Redirect', // 1.1 308 : 'Permanent Redirect', // 1.1; Experimental; http://www.ietf.org/rfc/rfc7238.txt // 4xx: Client error 400 : 'Bad Request', 401 : 'Unauthorized', 402 : 'Payment Required', 403 : 'Forbidden', 404 : 'Not Found', 405 : 'Method Not Allowed', 406 : 'Not Acceptable', 407 : 'Proxy Authentication Required', 408 : 'Request Timeout', 409 : 'Conflict', 410 : 'Gone', 411 : 'Length Required', 412 : 'Precondition Failed', 413 : 'Content Too Large', // https://www.iana.org/assignments/http-status-codes/http-status-codes.xml 414 : 'URI Too Long', // https://www.iana.org/assignments/http-status-codes/http-status-codes.xml 415 : 'Unsupported Media Type', 416 : 'Requested Range Not Satisfiable', 417 : 'Expectation Failed', 418 : "I'm a teapot", // April's Fools joke; http://www.ietf.org/rfc/rfc2324.txt // 419 (Authentication Timeout) is a non-standard status code with unknown origin 421 : 'Misdirected Request', // http://www.iana.org/go/rfc7540 Section 9.1.2 422 : 'Unprocessable Content', // https://www.iana.org/assignments/http-status-codes/http-status-codes.xml 423 : 'Locked', // http://www.iana.org/go/rfc4918 424 : 'Failed Dependency', // http://www.iana.org/go/rfc4918 425 : 'Too Early', // https://datatracker.ietf.org/doc/draft-ietf-httpbis-replay/ 426 : 'Upgrade Required', 428 : 'Precondition Required', // 1.1; http://www.ietf.org/rfc/rfc6585.txt 429 : 'Too Many Requests', // 1.1; http://www.ietf.org/rfc/rfc6585.txt 431 : 'Request Header Fields Too Large', // 1.1; http://www.ietf.org/rfc/rfc6585.txt 451 : 'Unavailable For Legal Reasons', // http://tools.ietf.org/html/rfc7725 499 : 'Client Closed Request', // http://lxr.nginx.org/source/src/http/ngx_http_request.h#0133 // 5xx: Server error 500 : 'Internal Server Error', 501 : 'Not Implemented', 502 : 'Bad Gateway', 503 : 'Service Unavailable', 504 : 'Gateway Timeout', 505 : 'HTTP Version Not Supported', 506 : 'Variant Also Negotiates', // 1.1; http://www.ietf.org/rfc/rfc2295.txt 507 : 'Insufficient Storage', // http://www.iana.org/go/rfc4918 508 : 'Loop Detected', // http://www.iana.org/go/rfc5842 510 : 'Not Extended', // http://www.ietf.org/rfc/rfc2774.txt 511 : 'Network Authentication Required', // http://www.ietf.org/rfc/rfc6585.txt 599 : 'Network Connect Timeout Error' // https://httpstatuses.com/599 } function obj_param(obj) { var parts = []; for (var key in obj) { if (obj.hasOwnProperty(key)) { parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key])); } } return parts.join('&'); } //create an XMLHttpRequest object function GetXMLHttpRequest() { var xhr = false; if (typeof XMLHttpRequest !== 'undefined') { xhr = new XMLHttpRequest(); if (xhr.overrideMimeType) { xhr.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { //var versions = [ "MSXML2.XmlHttp.6.0", "MSXML2.XmlHttp.5.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.2.0", "Microsoft.XmlHttp" ]; //for (var i = 0; i < versions.length; i++) { // try { xhr = new ActiveXObject(versions[i]); break; } catch (e) {} //} try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} } } if (!xhr) { return 0; } return xhr; } function Ajaxcall(param, response) { if (ajax_load_process == true) { return; } if (param.async == undefined) { param.async = true; } if (param.async == false) { ajax_load_process = true; } if (param.beforeSend != undefined) { param.beforeSend(); }; var xhr = GetXMLHttpRequest(); if (!xhr) { return 0; } if (param.timeout != undefined) { xhr.timeout = param.timeout; } else { xhr.timeout = 20000; } if (param.type != "GET") { xhr.open(param.type, param.url, param.async); if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) { } else if (param.contentType != undefined && param.contentType == "json") { xhr.setRequestHeader("Content-type", "application/json; charset=utf-8"); } else if (param.contentType != undefined || param.contentType == true) { xhr.setRequestHeader('Content-type', param.contentType); } else { xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } } else { if (param.data) { xhr.open(param.type, param.url + "?" + obj_param(param.data), param.async); } else { xhr.open(param.type, param.url, param.async); } } xhr.onprogress = function(loadTime) { if (param.progress != undefined) { param.progress({ loaded: loadTime.loaded }, "success"); } } xhr.ontimeout = function () { this.abort(response); param.success("timeout", "timeout"); ajax_load_process = false; }; xhr.onerror = function() { if (param.error != undefined) { param.error(xhr, xhr_statusCodes[xhr.status], xhr.statusText); } ajax_load_process = false; }; xhr.onreadystatechange = function() { if(xhr.readyState == 0) { //UNSENT Client has been created. open() not called yet. } else if(xhr.readyState == 1) { //OPENED open() has been called. } else if(xhr.readyState == 2) { //HEADERS_RECEIVED send() has been called, and headers and status are available. } else if(xhr.readyState == 3) { //LOADING Downloading; responseText holds partial data. } else if (xhr.readyState == 4) { //DONE The operation is complete. if (xhr.status == 200) { //request succesfull } else { //request failled } } } xhr.onload = function() { if (xhr.status == 200) { var data; if (param.dataType != undefined) { if (param.dataType == "document") { data = xhr.responseXML; } else if (param.dataType == "json") { try { data = JSON.parse(xhr.responseText); } catch (err) { data = null; } } else if (param.dataType == "stringify") { data = JSON.stringify(xhr.responseText); } else if (param.dataType == "text") { data = xhr.responseText; } else { //"arraybuffer", "blob", "html" data = xhr.response; } } else { data = xhr.responseText; } param.success(data, "success"); } else { if (param.error != undefined) { param.error(xhr, xhr_statusCodes[xhr.status], xhr.statusText); } } ajax_load_process = false; }; if (param.data != null || param.data != undefined) { if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) { xhr.send(param.data); } else if (param.contentType != undefined && param.contentType == "json") { xhr.send(JSON.stringify(param.data)); } else { xhr.send(obj_param(param.data)); } } else { xhr.send(); } this.abort = function(response) { if (XMLHttpRequest != null) { xhr.abort(); ajax_load_process = false; if (response != undefined) { response({ status: "success" }); } } } } /********** function loadsatimg() { var satimg = document.getElementById("satimg"); Ajaxcall({ url: "<?php echo site_url(); ?>/home/satimg", type: "GET", data: null, contentType: null, dataType: 'json', async: true,//synchronous request. Default value is true timeout: 10000,//default timeout 20000 beforeSend:function(){ satimg.src = "<?php echo base_url(); ?>images/ajax-loading.gif"; satimg.width = "150"; satimg.height = "150" }, success:function(result, status){ if (result) { //alert(result['imgsrc']); satimg.src = result['imgsrc']; satimg.title = result['title']; } else satimg.src = "<?php echo base_url(); ?>images/no-image.gif"; }, error:function(xhr,statusCodes,statusText){ alert("status:"+xhr.status+"\n"+"statusCodes:"+statusCodes+"\n"+"statusText:"+statusText+"\n"+"responseText:"+xhr.responseText); } }); } //for abort previous requests my_ajaxCall.abort(function(result) { console.log(result); }); */
|
|||
| 다음글 | PHP 8.2 CLI Xdebug 사용 방법 | ||
| 이전글 | 풀다운 메뉴(pulldown menu) css, js | ||
|
darkninja
/
2024/05/03 23:40:14 /
추천
0
|
수정 : ontimeout에서 param.timeout을 호출하는데
param.timeout은 xhr.timeout에 대응하는 값이므로 사용할수 없는 이름입니다;
param.abort가 비슷한 역할을 하여 메세지만 다르게 전달하여 공통으로 사용합니다.
생각보다 많은 관심을 보여주셨는데
미흡한 부분에 대한 지적은 아무도 안하시네요;
실력이 부족하다 보니 업데이트가 년단위로 진행됩니다.
함수 호출에서 xhr를 리턴하여 외부에서 취소를 하는 코드를 추가하였습니다.
async를 false로 할때 timeout값을 내부에서 0으로 만듭니다.
관련 코드를 없애고 호출시에 timeout값을 0으로 주어도 되겠죠.
async값이 false일때 responseType값이 있으면 에러가 나더군요 이것도 timeout값과 같은 방식으로 처리하면 되겠네요.
windows 11 Edge에서만 테스트 했습니다.
저는 실력이 부족한 초보이므로 저의 지식과 코드조각들은 완벽하지 않습니다!