• 技术文章 >web前端 >js教程

    详细解密jsonp跨域请求_javascript技巧

    2016-05-16 16:04:13原创468
    1.什么是跨域请求:

    服务器A上的一个页面,要请求服务器B上的一个处理程序,这就叫做跨域请求

    本次的测试页面为:

    处理程序kimhandler.ashx,如下:

    %@ WebHandler Language="C#" Class="KimHandler" %>
    
    using System;
    using System.Web;
    
    public class KimHandler : IHttpHandler {
      
      public void ProcessRequest (HttpContext context)
      {
        string msg = "{\"name\":\"kim\",\"gender\":\"男\",\"age\":24}";
        context.Response.Write(msg);
      }
     
      public bool IsReusable {
        get {
          return false;
        }
      }
    }
    
    

    另一张处理程序handler.ashx如下:

    <%@ WebHandler Language="C#" Class="Handler" %>
    
    using System;
    using System.Web;
    
    public class Handler : IHttpHandler {
      
      public void ProcessRequest (HttpContext context)
      {
        string callbackName = context.Request.Params["callbackFun"];
        string msg = callbackName+ "({\"name\":\"kim\",\"age\":\"18\"});";
        context.Response.Write(msg);
      }
     
      public bool IsReusable {
        get {
          return false;
        }
      }
    
    }
    
    

    2.Ajax无法实现跨域请求

    
      
      
    
    

    查看监视器,发现没有返回任何请求报文体

    3.使用script标签,可以实现跨域请求

    测试代码如下:

    
    
    
    
      
      
    
    

    查看监视器,可以看到,有返回请求报文体

    在用json格式看下

    4.使用js方式,在浏览器端,读取响应是数据

    测试代码如下,注意换了一个处理程序

    
    
    
    
      
      
      
     
    

    通过后台代码,可知

    然后在监视器上看看

    发现在浏览器端,弹出了kim还有18

    5.使用Jq来实现跨域请求(内部原理就是为我们创建了一个script标签)

    代码如下

    
    
    
    
      
      
      
    
    

    点击按钮后,可以看到效果,再看下监视器


    以上所述就是本文的全部内容了,希望大家能够喜欢。

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:JavaScript使用Prototype实现面向对象的方法_javascript技巧 下一篇:jQuery遍历页面所有CheckBox查看是否被选中的方法_jquery
    大前端线上培训班

    相关文章推荐

    • innerhtml是jquery方法么• javascript 怎么将时间转毫秒• javascript怎么设置标签的背景颜色• jquery select 不可编辑怎么办• javascript怎么判断指定值是否是偶数

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网