jQuery에서 최고 성능으로 Ajax 요청을 작성하는 방법
- php中世界最好的语言원래의
- 2018-03-15 15:05:171119검색
이번에는 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();
}에서 인터페이스 을 생성하는 방법이 필요합니다. 사용해 보세요rrreee 장점 및 확장 [장점] : promise의 콜백 방식과 유사[장점]: 인터페이스를 추가하려면 구성 파일만 추가하면 되기 때문에 매우 편리합니다. [확장]: json만 작성했습니다. 현재 ajax의 contentType에 관심이 있다면 다른 데이터를 확장할 수 있습니다 Type [단점]: 함수 매개변수 에 대한 검증이 없습니다. 사례를 읽으신 후 메소드를 마스터하신 것 같습니다. 이 기사에서 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 자료: webpack을 사용하여 jquery 환경 구성을 작성하는 방법 jackson이 json 문자열을 구문 분석할 때 대문자와 소문자를 자동으로 변환하는 방법 위 내용은 jQuery에서 최고 성능으로 Ajax 요청을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!<!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>