일반적으로 웹 페이지를 작성할 때 Ajax를 사용하여 서버를 요청하면 JQuery 및 기타 캡슐화된 라이브러리를 사용하여 호출하는데 이는 비교적 간단합니다. 그러나 일반적으로 이러한 라이브러리에는 기능이 많고 필요하지 않은 항목이 너무 많이 포함되어 있습니다. 단일 기능으로 간단한 페이지를 작성해야 한다면 그렇게 큰 라이브러리 파일을 참조할 필요가 없습니다. 이 기사에서는 모든 사람에게 도움이 되기를 바라며 기본 JS에서 Ajax를 작성하는 요청 기능 기능을 주로 공유합니다.
우리는 우리만의 Ajax 요청 함수를 간단하게 구현할 수 있습니다. 구체적인 코드는 다음과 같습니다:
var ajax = {}; ajax.x = function () { if (typeof XMLHttpRequest !== 'undefined') { return new XMLHttpRequest(); } var versions = [ "MSXML2.XmlHttp.6.0", "MSXML2.XmlHttp.5.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.2.0", "Microsoft.XmlHttp" ]; var xhr; for (var i = 0; i < versions.length; i++) { try { xhr = new ActiveXObject(versions[i]); break; } catch (e) { } } return xhr; }; ajax.send = function (url, method, data, success,fail,async) { if (async === undefined) { async = true; } var x = ajax.x(); x.open(method, url, async); x.onreadystatechange = function () { if (x.readyState == 4) { var status = x.status; if (status >= 200 && status < 300) { success && success(x.responseText,x.responseXML) } else { fail && fail(status); } } }; if (method == 'POST') { x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); } x.send(data) }; ajax.get = function (url, data, callback, fail, async) { var query = []; for (var key in data) { query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key])); } ajax.send(url + (query.length ? '?' + query.join('&') : ''), 'GET', null, callback, fail, async) }; ajax.post = function (url, data, callback, fail, async) { var query = []; for (var key in data) { query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key])); } ajax.send(url,'POST', query.join('&'), callback, fail, async) };
Usage: GET
ajax.get('/test.php', {foo: 'bar'}, function(response,xml) { //success }, function(status){ //fail }); POST ajax.post('/test.php', {foo: 'bar'}, function(response,xml) { //succcess },function(status){ //fail });
여기서 주목해야 할 문제가 있습니다.
var sendCmd = "?op_code=" + code + "&op_cmd=" + cmd; ajax.post('/control' + sendCmd,'',function(response,xml) { console.log('success'); }, function(status){ console.log('failed:' + status); });
관련 권장사항:
AJAX 페이징 효과의 간단한 구현에 대한 자세한 설명
위 내용은 Native JS를 활용한 Ajax 요청 기능 작성 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!