zoukankan      html  css  js  c++  java
  • Extjs4.1 跨域异步请求实现

    Extjs4.1 跨域异步请求实现


    此文由来

        最近在搞一个站点的消息推送功能,原先一个站点下面基于Comet(ajax长连接)已经完成了功能。上线使用后发现之前的机制和原先网站在一个站点,对网站的性能和后期分布式扩展会带来不小的影响。最终拍拍屁股就打算把消息机制单独剥离出来,单独成站点,当然数据库还是原先的业务帐套。这个剥离第一想到的肯定是跨域Ajax请求了,还好EXTJS4.1,对跨域已经支持。基本原理无非就是Jsonp,通过添加脚步引用块来实现。技术准备妥当,开始动手。园子里面相关的文档也很多,大部分都是基于Ext.data.Store来现实的。比如:别人的东东

    对于一些只是简单的请求,其实大可不必这么绕,下文将针对单纯的异步请求进行说明。这里先引出今天的猪脚:Ext.data.JsonP类。他分装了大部分跨域的功能,拿来用就可以。源码就不黏贴了,ext自己找去:JsonP.js

    前台实现

        先黏贴处代码:

     1 //跨域请求,MsgUrl为其他站点地址
     2 Ext.data.JsonP.request({
     3             url: MsgUrl + '/Home/InitializeComet',
     4             timeout: 300000,
     5             params: { loginId: LoginId },
     6             callbackKey: "jsonPCallback",
     7             success: function(result) {
     8                 if (result.rettype == 'true') {
     9                     me.Comet.privateToken = result.msg;
    10                     me.RegisterComet();
    11                 } else {
    12                     alert(result.msg);
    13                 }
    14             },
    15             failure: function(result) {
    16                 alert(result);
    17             }
    18         });

        红色标出部分是跨域请求的要点,类名:Ext.data.JsonP不用多说,就是类名~!!

        “jsonPCallback”该名称将作为Jsonp请求的方法名传递到服务器端,获取该请求的URL:

    http://10.0.13.64:89/Home/InitializeComet?loginId=0001&jsonPCallback=Ext.data.JsonP.callback1&_dc=1370687739484

    可以发现该名称的意义了吧,当然在后台实现过程也会用到该值,当然取值随意,前后台统一就好。

    后台实现(Asp.net MVC4)

        按照惯例,先黏代码:

     1         /// <summary>
     2         /// 客户端注册
     3         /// </summary>
     4         /// <returns></returns>
     5         public void InitializeComet(string loginId, string jsonPCallback)
     6         {
     7             CommonAjax commonAjax = null;
     8 
     9             try
    10             {
    11                 CometManager.Comet.InitializeComet(loginId);
    12                 commonAjax=new CommonAjax("true", loginId);
    13             }
    14             catch (Exception ex)
    15             {
    16                 commonAjax =new CommonAjax("false", ex.Message);
    17             }
    18 
    19             this.Response.Write(jsonPCallback + "(" + Newtonsoft.Json.JsonConvert.SerializeObject(commonAjax) + ")");
    20         }

        发现参数了吧,传过来的值还得按照调用JS的形式返还回去,格式比如 jsonPCallback("我要返还值给客户端")

        客户端接到请求的串后,其实Ext.data.JsonP为我们进行的中转,直接把我们返会的东西带进了方法:success: function(result)里面。具体看源码。

    那么大致的实现就完成了!~

    还是按照惯例,不放全部源码了,都是签了保密协议的人,公司源码不可乱上传。

  • 相关阅读:
    βVAE学习
    条件GAN学习
    epoll的事件的状态
    RST报文产生的情况
    SIGPIPE信号产生原因
    methods事件
    for列表渲染
    if条件渲染
    data数据
    vue的简单上手
  • 原文地址:https://www.cnblogs.com/blogsfuh/p/3127340.html
Copyright © 2011-2022 走看看