집 >웹 프론트엔드 >JS 튜토리얼 >기본 JS에서 Ajax 요청 함수 작성

기본 JS에서 Ajax 요청 함수 작성

不言원래의: 2018-07-02 16:58:431322검색

이 글에서는 Ajax용 Native JS를 기반으로 작성한 요청 기능을 공유하겠습니다. 필요하신 분들은 참고하시면 됩니다.

일반적으로 웹페이지를 작성할 때 Ajax를 사용한다면 요청 서버는 모두 비교적 간단한 JQuery와 같은 캡슐화된 라이브러리를 사용하여 호출됩니다.

하지만 일반적으로 이러한 라이브러리에는 기능이 많고 필요하지 않은 내용이 너무 많이 포함되어 있습니다. 단일 기능으로 간단한 페이지를 작성해야 한다면 그렇게 큰 라이브러리를 참조할 필요가 없습니다. 파일.

특정 코드는 다음과 같습니다.

var ajax = {};
ajax.x = function () {
 if (typeof XMLHttpRequest !== &#39;undefined&#39;) {
 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);
});

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트를 주목하세요!

기본 JS에서 Ajax 요청 함수 작성

관련 기사