jQuery で最高のパフォーマンスを発揮する Ajax リクエストを作成する方法-jsチュートリアル-php.cn

jQuery で最高のパフォーマンスを発揮する Ajax リクエストを作成する方法

php中世界最好的语言

リリース： 2018-03-15 15:05:17

オリジナル

1130 人が閲覧しました

今回は、jQuery で最高のパフォーマンスを発揮する Ajax リクエストの書き方と、注意事項についてお届けします。以下は実際的なケースです。見てみましょう。

はじめに

jQuery は確かに非常に優れた軽量 JS フレームワークで、JS アプリケーションを迅速に開発し、JavaScript コードを記述する習慣をある程度変えるのに役立ちます。

これ以上はナンセンスです。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 を記述しただけです興味がある場合は、他のデータを展開できますタイプ

[欠点]: 関数パラメータの検証がありません

事例を読んだ後、メソッドをマスターしたと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事にご注目ください。推奨読書:

2 つの zTree が相互にリンクされる方法

webpack を使用して jquery 環境設定を記述する方法

ジャクソンが json 文字列を解析するときに大文字と小文字を自動的に変換する方法

🎜jQuery EasyUI 折りたたみパネルの使用🎜🎜🎜

以上がjQuery で最高のパフォーマンスを発揮する Ajax リクエストを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。