Native JS를 활용한 Ajax 요청 기능 작성 예시 공유

小云云
풀어 주다: 2017-12-23 15:25:08
원래의
1414명이 탐색했습니다.

일반적으로 웹 페이지를 작성할 때 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 == &#39;POST&#39;) {
 x.setRequestHeader(&#39;Content-type&#39;, &#39;application/x-www-form-urlencoded&#39;);
 }
 x.send(data)
};
ajax.get = function (url, data, callback, fail, async) {
 var query = [];
 for (var key in data) {
 query.push(encodeURIComponent(key) + &#39;=&#39; + encodeURIComponent(data[key]));
 }
 ajax.send(url + (query.length ? &#39;?&#39; + query.join(&#39;&&#39;) : &#39;&#39;), &#39;GET&#39;, null, callback, fail, async)
};
ajax.post = function (url, data, callback, fail, async) {
 var query = [];
 for (var key in data) {
 query.push(encodeURIComponent(key) + &#39;=&#39; + encodeURIComponent(data[key]));
 }
 ajax.send(url,&#39;POST&#39;, query.join(&#39;&&#39;), callback, fail, async)
};
로그인 후 복사

Usage: GET


ajax.get(&#39;/test.php&#39;, {foo: &#39;bar&#39;}, function(response,xml) {
 //success
},
function(status){
 //fail
});
POST
ajax.post(&#39;/test.php&#39;, {foo: &#39;bar&#39;}, function(response,xml) {
 //succcess
},function(status){
 //fail
});
로그인 후 복사

여기서 주목해야 할 문제가 있습니다.


var sendCmd = "?op_code=" + code + "&op_cmd=" + cmd;
ajax.post(&#39;/control&#39; + sendCmd,&#39;&#39;,function(response,xml) {
 console.log(&#39;success&#39;);
},
function(status){
 console.log(&#39;failed:&#39; + status);
});
로그인 후 복사

관련 권장사항:

jQuery의 ajax 기반 관련 메서드 종합 요약

AJAX 페이징 효과의 간단한 구현에 대한 자세한 설명

Ajax 비동기 요청 설명 예시가 포함된 기술

위 내용은 Native JS를 활용한 Ajax 요청 기능 작성 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿