jQuery+ajax 함수 구현

이번에는 jQuery+ajax 함수 구현에 대해 소개해 드리겠습니다. jQuery+ajax 함수 구현에 관한 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

구현 기능

jq의 ajax 메소드는 내장된 deferred 모듈을 사용하므로 Promise 모드를 구현한 것이므로 여기서는 다루지 않았으므로 이 모드는 사용하지 않겠습니다.

우리는 ajax 메소드만 정의했는데, 간단히 get, post, jsonp 요청을 할 수 있습니다~~

var ajax = function () {
 // 做一些初始化，定义一些私有函数等
 return function () {
 // ajax主体代码
 }
}()
ajax({
 url: myUrl,
 type: 'get',
 dataType: 'json',
 timeout: 1000,
 success: function (data, status) {
 console.log(data)
 },
 fail: function (err, status) {
 console.log(err)
 }
})

우리 ajax 메소드의 최종 기능은 위와 같으며 이는 jq와 매우 유사합니다. 그럼 우리는 무엇을 기다리고 있습니까? 시작합시다.

전체 아이디어

우리의 ajax 메소드는 객체를 전달해야 합니다. 이 객체에서 우리는 원하는 일부 속성을 정의할 수 있으며 다양한 속성을 초기화해야 합니다

//默认请求参数
 var _options = {
 url: null, // 请求连接
 type: 'GET', // 请求类型
 data: null, // post时请求体
 dataType: 'text', // 返回请求的类型，有text/json两种
 jsonp: 'callback', // jsonp请求的标志，一般不改动
 jsonpCallback: 'jsonpCallback', //jsonp请求的函数名
 async: true, // 是否异步
 cache: true, // 是否缓存
 timeout:null, // 设置请求超时
 contentType: 'application/x-www-form-urlencoded',
 success: null, // 请求成功回调函数
 fail: null // 请求失败回调
 }

위에서 우리는 많은 일련의 요청을 정의했습니다 관련 그런 다음 ajax 기본 함수 작성을 시작합니다. 현재 ajax 메소드는 다음과 같습니다

var ajax = function () {
 //默认请求参数
 var _options = {
 url: null,
 type: 'GET',
 data: null,
 dataType: 'text',
 jsonp: 'callback',
 jsonpCallback: 'jsonpCallback',
 async: true,
 cache: true,
 timeout:null,
 contentType: 'application/x-www-form-urlencoded',
 success: null,
 fail: null
 }
 // ...
 return function (options) {
  // ...
 }
}()

생각해 보면 ajax 메소드가 객체를 전달하는데, 이 객체에 속성을 설정해야 합니까? 초기화_옵션 위의 속성은 반드시 필요합니다. 그런 다음 먼저 다음과 같이 간단한 상속을 작성해 보겠습니다.

var ajax = function () {
 //默认请求参数
 var _options = {
 url: null,
 type: 'GET',
 data: null,
 dataType: 'text',
 jsonp: 'callback',
 jsonpCallback: 'jsonpCallback',
 async: true,
 cache: true,
 timeout:null,
 contentType: 'application/x-www-form-urlencoded',
 success: null,
 fail: null
 }
 // 内部使用的继承方法
 var _extend = function(target,options) {
 if( typeof target !== 'object' || typeof options !== 'object' ) {
  return;
 }
 var copy ,clone, name;
 for( name in options ) {
  if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
  target[name] = options[name];
  }
 }
 return target;
 };
 // ...
 return function (options) {
 // 没有传参或者没有url，抛出错误
 if( !options || !options.url ) {
  throw('参数错误！');
 }
 // 继承操作
 options.type = options.type.toUpperCase();
 _extend(options,_options);
  // ...
 }
}()

이 상속 방법에서는 초기화된 _options를 옵션에 상속합니다. 이유는 무엇입니까? _options 객체가 ajax 메서드 내부에 없기 때문에 이를 사용해야 하지만 변경할 수 없습니다. 변경하면 다음에 ajax 메서드가 중단됩니다. 따라서 구성된 옵션 객체에 없는 속성을 초기값으로 설정합니다.

이제 요청을 보내볼까요? 등! jsonp 요청은 xhr 요청이 아닌 것으로 보입니다. 요청 URL을 script 태그의 src 값으로 페이지 본문에 삽입하여 구현한 것 같습니다. 아, 그런데 jsonp 요청을 먼저 처리한 후 시작하겠습니다. xhr 요청을 위한 코드를 작성합니다.

var ajax = function () {
 //默认请求参数
 var _options = {
 url: null,
 type: 'GET',
 data: null,
 dataType: 'text',
 jsonp: 'callback',
 jsonpCallback: 'jsonpCallback',
 async: true,
 cache: true,
 timeout:null,
 contentType: 'application/x-www-form-urlencoded',
 success: null,
 fail: null
 }
 // 内部使用的继承方法
 var _extend = function(target,options) {
 if( typeof target !== 'object' || typeof options !== 'object' ) {
  return;
 }
 var copy ,clone, name;
 for( name in options ) {
  if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
  target[name] = options[name];
  }
 }
 return target;
 };
 // jsonp处理函数
 function _sendJsonpRequest(url,callbackName,succCallback) {
 var script = document.createElement('script');
 script.type="text/javascript";
 script.src=url;
 document.body.appendChild(script);
 // 如果用户自己定义了回调函数，就用自己定义的，否则，调用success函数
 window[callbackName] = window[callbackName] || succCallback;
 }
 // ...
 return function (options) {
 // 没有传参或者没有url，抛出错误
 if( !options || !options.url ) {
  throw('参数错误！');
 }
 // 继承操作
 options.type = options.type.toUpperCase();
 _extend(options,_options);
 /*jsonp部分，直接返回*/
 if( options.dataType === 'jsonp' ) {
  var jsonpUrl = options.url.indexOf('?') > -1 ? options.url: options.url +
  '?' + options.jsonp+ '=' + options.jsonpCallback;
  return _sendJsonpRequest(jsonpUrl,options.jsonpCallback,options.success);
 }
  // ...
 }
}()

우리는 _sendJsonpRequest 함수를 정의했습니다. 첫 번째는 jsonpUrl이고, 두 번째는 jsonp의 콜백 함수이며, 세 번째는 이 함수에 src를 생성합니다. jsonpUrl 요소를 본문에 추가하고 동시에 콜백 함수를 결정합니다. (jsonpCallback 함수를 정의하면 이를 호출하고, 그렇지 않으면 성공 콜백을 호출합니다. 일반적으로 우리는 전역 jsonpCallback 함수를 정의하지 않고 성공을 전달합니다. jsonp 요청을 완료하기 위한 콜백).

좋아요, jsonp 요청을 처리한 후 xhr 요청 처리를 시작합니다.

var ajax = function () {
 //默认请求参数
 var _options = {
 url: null,
 type: 'GET',
 data: null,
 dataType: 'text',
 jsonp: 'callback',
 jsonpCallback: 'jsonpCallback',
 async: true,
 cache: true,
 timeout:null,
 contentType: 'application/x-www-form-urlencoded',
 success: null,
 fail: null
 }
 // 内部使用的继承方法
 var _extend = function(target,options) {
 if( typeof target !== 'object' || typeof options !== 'object' ) {
  return;
 }
 var copy ,clone, name;
 for( name in options ) {
  if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
  target[name] = options[name];
  }
 }
 return target;
 };
 // jsonp处理函数
 function _sendJsonpRequest(url,callbackName,succCallback) {
 var script = document.createElement('script');
 script.type="text/javascript";
 script.src=url;
 document.body.appendChild(script);
 // 如果用户自己定义了回调函数，就用自己定义的，否则，调用success函数
 window[callbackName] = window[callbackName] || succCallback;
 }
 // json转化为字符串
 var _param = function(data) {
 var str = '';
 if( !data || _empty(data)) {
  return str;
 }
 for(var key in data) {
  str += key + '='+ data[key]+'&'
 }
 str = str.slice(0,-1);
 return str;
 }
 //判断对象是否为空
 var _empty = function(obj) {
 for(var key in obj) {
  return false;
 }
 return true;
 }
 // ...
 return function (options) {
 // 没有传参或者没有url，抛出错误
 if( !options || !options.url ) {
  throw('参数错误！');
 }
 // 继承操作
 options.type = options.type.toUpperCase();
 _extend(options,_options);
 /*jsonp部分，直接返回*/
 if( options.dataType === 'jsonp' ) {
  var jsonpUrl = options.url.indexOf('?') > -1 ? options.url: options.url +
  '?' + options.jsonp+ '=' + options.jsonpCallback;
  return _sendJsonpRequest(jsonpUrl,options.jsonpCallback,options.success);
 }
  //XMLHttpRequest传参无影响
 var xhr = new (window.XMLHttpRequest || ActiveXObject)('Microsoft.XMLHTTP');
 // get搜索字符串
 var search = '';
 // 将data序列化
 var param= _param(options.data)
 if( options.type === 'GET' ) {
  search = (options.url.indexOf('?') > -1 ? '&' : '?') + param;
  if(!options.cache) {
  search += '&radom='+Math.random();
  }
  param = null;
 }
  // ...
 }
}()

우선, xhr 객체를 생성하는 것이 IE와 호환됩니다. XMLHttpRequestConstructor 매개변수 전달은 효과가 없습니다. 그런 다음 검색 및 매개변수라는 두 가지 보조 변수를 정의합니다. 후자는 게시에 사용됩니다. 요청의 전송 내용에 대해 객체를 전송 메소드 매개변수 모드로 변환하는 _param 메소드를 정의했습니다. 아래에서 우리는 합리적인 검색과 매개변수 할당을 수행했습니다. 받아 게시하세요. 다음으로 가장 흥미로운 콘텐츠 작성 요청을 보낼 수 있습니다.

최종 코드는 다음과 같습니다

;
var ajax = function () {
 //默认请求参数
 var _options = {
 url: null,
 type: 'GET',
 data: null,
 dataType: 'text',
 jsonp: 'callback',
 jsonpCallback: 'jsonpCallback',
 async: true,
 cache: true,
 timeout:null,
 contentType: 'application/x-www-form-urlencoded',
 success: null,
 fail: null
 }
 // json转化为字符串
 var _param = function(data) {
 var str = '';
 if( !data || _empty(data)) {
  return str;
 }
 for(var key in data) {
  str += key + '='+ data[key]+'&'
 }
 str = str.slice(0,-1);
 return str;
 }
 //判断对象是否为空
 var _empty = function(obj) {
 for(var key in obj) {
  return false;
 }
 return true;
 }
 var _extend = function(target,options) {
 if( typeof target !== 'object' || typeof options !== 'object' ) {
  return;
 }
 var copy ,clone, name;
 for( name in options ) {
  if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
  target[name] = options[name];
  }
 }
 return target;
 };
 // 自定义text转化json格式
 var parseJSON = function(text) {
 if(typeof text !== 'string') {
  return;
 }
 if( JSON && JSON.parse ) {
  return JSON.parse(text);
 }
 return (new Function('return '+text))();
 }
 // jsonp处理函数
 function _sendJsonpRequest(url,callbackName,succCallback) {
 var script = document.createElement('script');
 script.type="text/javascript";
 script.src=url;
 document.body.appendChild(script);
 // 如果用户自己定义了回调函数，就用自己定义的，否则，调用success函数
 window[callbackName] = window[callbackName] || succCallback;
 }
 return function (options) {
 // 没有传参或者没有url，抛出错误
 if( !options || !options.url ) {
  throw('参数错误！');
 }
 // 继承操作
 options.type = options.type.toUpperCase();
 _extend(options,_options);
 /*jsonp部分，直接返回*/
 if( options.dataType === 'jsonp' ) {
  var jsonpUrl = options.url.indexOf('?') > -1 ? options.url: options.url +
  '?' + options.jsonp+ '=' + options.jsonpCallback;
  _sendJsonpRequest(jsonpUrl,options.jsonpCallback,options.success);
  return;
 }
  //XMLHttpRequest传参无影响
 var xhr = new (window.XMLHttpRequest || ActiveXObject)('Microsoft.XMLHTTP');
 // get搜索字符串
 var search = '';
 // 将data序列化
 var param= _param(options.data)
 if( options.type === 'GET' ) {
  search = (options.url.indexOf('?') > -1 ? '&' : '?') + param;
  if(!options.cache) {
  search += '&radom='+Math.random();
  }
  param = null;
 }
 xhr.open( options.type, options.url + search, options.async );
 xhr.onreadystatechange = function() {
  if( xhr.readyState == 4 ) {
  if( xhr.status >= 200 && xhr.status < 300 || xhr.status == 304 ) {
   var text = xhr.responseText;
   // json格式转换
   if(options.dataType == 'json') {
    text = parseJSON(text)
   }
   if( typeof options.success === 'function') {
   options.success(text,xhr.status)
   }
  }else {
   if(typeof options.fail === 'function') {
   options.fail('获取失败', 500)
   }
  }
  }
 }
 xhr.setRequestHeader('content-type',options.contentType);
 // get请求时param时null
 xhr.send(param);
 // 如果设置了超时，就定义
 if(typeof options.timeout === 'number') {
  // ie9+
  if( xhr.timeout ) {
  xhr.timeout = options.timeout;
  }else {
  setTimeout(function() {
   xhr.abort();
  },options.timeout)
  }
 }
 }
}()

보시다시피, 우리는 xhr 코드에 익숙합니다. 여기서는 반환된 문자열을 구문 분석하여 json 형식 개체를 형성하는parseJSON 메서드를 작성해야 합니다. 위에 표시된 대로 jq에서 .

요청 타임아웃이 설정되어 있는 경우에는 타임아웃 코드도 설정해야 합니다.

참고: 위 코드에서는 게으름으로 인해 요청 헤더를 설정하는 줄이 게시물 요청에 속하는지 여부를 결정하지 않습니다. 직접 설정할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

jQuery Ajax 분석 전체 컬렉션

Native js는 ajax 요청 메서드를 구현합니다

위 내용은 jQuery+ajax 함수 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!