jQuery에서 최고 성능으로 Ajax 요청을 작성하는 방법-JS 튜토리얼-php.cn

jQuery에서 최고 성능으로 Ajax 요청을 작성하는 방법

php中世界最好的语言

풀어 주다： 2018-03-15 15:05:17

원래의

1132명이 탐색했습니다.

이번에는 jQuery에서 최고의 성능을 발휘하는 ajax 요청 작성 방법과 노트가 무엇인지 알려드리겠습니다. 다음은 실제 사례입니다.

Foreword

jQuery는 JS 애플리케이션을 빠르게 개발하고 어느 정도 JavaScript 코드 작성 습관을 바꾸는 데 도움이 될 수 있는 매우 훌륭하고 가벼운 JS 프레임워크입니다.

더 이상 헛소리하지 말고 바로 본론으로 들어가겠습니다. jQuery의 ajax 방법은 사용하기 매우 쉽습니다. 이렇게 좋은 점을 고려하면 자신만의 ajax를 갖고 싶습니까? 다음으로 간단한 ajax를 직접 만들어 보겠습니다.

먼저 구성 파일이 필요합니다.

var api = {
 basePath: 'http://192.168.200.226:58080',
 pathList: [
  {
   name: 'agentHeartBeat',
   path:'/api/csta/agent/heartbeat/{{agentId}}',
   method:'post'
  },
  {
   name: 'setAgentState',
   path: '/api/csta/agent/state',
   method: 'post'
  },
  {
   name: 'getAgents',
   path: '/user/agent/{{query}}',
   method: 'get'
  }
 ]
}

로그인 후 복사

그런 다음 구성 파일

function WellApi(Config){
var headers = {};
var Api = function(){};
Api.pt = Api.prototype;
var util = {
 ajax: function(url, method, payload) {
  return $.ajax({
   url: url,
   type: method || "get",
   data: JSON.stringify(payload),
   headers: headers,
   dataType: "json",
   contentType: 'application/json; charset=UTF-8'
  });
 },
 /**
  * [render 模板渲染]
  * 主要用于将 /users/{{userId}} 和{userId: '89898'}转换成/users/89898，和mastache语法差不多，
  * 当然我们没必要为了这么小的一个功能来引入一个模板库
  * query字符串可以当做一个参数传递进来
  * 例如： /users/{{query}}和{query:'?name=jisika&sex=1'}
  * @Author Wdd
  * @DateTime 2017-03-13T19:42:58+0800
  * @param {[type]} tpl [description]
  * @param {[type]} data [description]
  * @return {[type]} [description]
  */
 render: function(tpl, data){
  var re = /{{([^}]+)?}}/;
  var match = '';
  while(match = re.exec(tpl)){
   tpl = tpl.replace(match[0],data[match[1]]);
  }
  return tpl;
 }
};
/**
 * [setHeader 暴露设置头部信息的方法]
 * 有些方法需要特定的头部信息，例如登录之后才能获取sesssionId,然后访问所有的接口时，必须携带sessionId
 * 才可以访问
 * @Author Wdd
 * @DateTime 2017-03-13T10:34:03+0800
 * @param {[type]} headers [description]
 */
Api.pt.setHeader = function(headers){
 headers = headers;
};
/**
 * [fire 发送ajax请求，this会绑定到每个接口上]
 * @Author Wdd
 * @DateTime 2017-03-13T19:42:13+0800
 * @param {[type]} pathParm [description]
 * @param {[type]} payload [description]
 * @return {[type]} [description]
 */
function fire(pathParm, payload){
 var url = util.render(this.path, pathParm);
 return util.ajax(url, this.method, payload);
}
/**
 * [for 遍历所有接口]
 * @Author Wdd
 * @DateTime 2017-03-13T19:49:33+0800
 * @param {[type]} var i [description]
 * @return {[type]} [description]
 */
for(var i=0; i < Config.pathList.length; i++){
 Api.pt[Config.pathList[i].name] = {
  path: Config.basePath + Config.pathList[i].path,
  method: Config.pathList[i].method,
  fire: fire
 };
}
return new Api();
}

로그인 후 복사

에서 인터페이스

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <script src="api.js"></script>
  <script src="jquery-ajax.js"></script>
</head>
<body>
<script type="text/javascript">
  var saas = WellApi(api);
  saas.agentHeartBeat.fire({agentId: '5001@1011.cc'})
  .done(function(res){
    console.log('心跳成功');
  })
  .fail(function(res){
    console.log('心跳失败');
  });
</script>
</body>
</html>

로그인 후 복사

을 생성하는 방법이 필요합니다. 사용해 보세요rrreee

장점 및 확장

[장점] : promise의 콜백 방식과 유사[장점]: 인터페이스를 추가하려면 구성 파일만 추가하면 되기 때문에 매우 편리합니다.

[확장]: json만 작성했습니다. 현재 ajax의 contentType에 관심이 있다면 다른 데이터를 확장할 수 있습니다 Type

[단점]: 함수 매개변수

에 대한 검증이 없습니다. 사례를 읽으신 후 메소드를 마스터하신 것 같습니다. 이 기사에서 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 자료:

두 개의 zTree가 서로 연결되는 방법

webpack을 사용하여 jquery 환경 구성을 작성하는 방법

jackson이 json 문자열을 구문 분석할 때 대문자와 소문자를 자동으로 변환하는 방법

🎜jQuery EasyUI 접이식 패널 사용🎜🎜🎜

위 내용은 jQuery에서 최고 성능으로 Ajax 요청을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!