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

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无法实现跨域请求

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script>
    var requestUrl = "http://qxw1192430265.my3w.com/kimhandler.ashx";
    window.onload = function () {
      document.getElementById("btnAjax").onclick = function() {
        var xhr = new XMLHttpRequest();
        xhr.open("get", requestUrl, true);
        xhr.setRequestHeader("If-Modified-Since", 0);
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4 && xhr.status == 200) {
            var res = xhr.responseText;
            alert(res);
          }
        }
        xhr.send(null);
      }
    }
  </script>
</head>
<body>
  <input type="button" id="btnAjax" value="点击" />
</body>
</html>

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

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

测试代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script src="http://qxw1192430265.my3w.com/kimhandler.ashx"></script>
</head>
<body>

</body>
</html>

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

在用json格式看下

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

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script>
    function getData(data) {
      for (var key in data) {
        alert(data[key]);
      }
    }
  </script>
  <script src="http://qxw1192430265.my3w.com/handler.ashx?callbackFun=getData"></script>
 </head>
<body>

</body>
</html>

通过后台代码,可知

然后在监视器上看看

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

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

代码如下

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script src="jquery-1.9.0.js"></script>
  <script>
    var requestUrl = "http://qxw1192430265.my3w.com/handler.ashx";
    window.onload = function () {
      document.getElementById("btnJq").onclick = function() {
        $.ajax(requestUrl, {
          type: "get", //请求方式
          dataType: "jsonp", //数据发送类型
          jsonp: "callbackFun", //服务器端接收的参数
          jsonpCallback: "fun", //js处理方法
          success: function () {
            alert("成功");
          }
        });
      }
    }

    function fun(data) {
      for (var key in data) {
        alert(data[key]);
      }
    }
  </script>
</head>
<body>
  <input type="button" id="btnJq" value="Jq按钮" />
</body>
</html>

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

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jsonp跨域
, jsonp跨域请求
jsonp跨域的原理
javascript jsonp跨域、ajax跨域请求 jsonp、jsonp跨域请求范例、jsonp跨域请求、jsonp 跨域post请求,以便于您获取更多的相关知识。

时间: 2024-12-03 17:31:52

详细解密jsonp跨域请求_javascript技巧的相关文章

JavaScript如何实现跨域请求_javascript技巧

什么是跨域请求? 简单的理解就是向不在同一个域名的服务器文件发出请求.这个还是用实际的例子来说明一下吧,比如baidu.com向cxyblog.com发送请求,这两个域名是不同的,那么这就是跨域了,出于安全性的考虑,这样是不允许的.另外需要注意的是不同子域名或者同域名不同端口之间或者相同域名不同协议等发送的请求也都算是跨域的,基本上可以为归为下面几类: (1)http://www.baidu.com向http://www.cxyblog.com发送请求 (2)http://www.cxyblog

使用JQuery进行跨域请求_javascript技巧

以上程序是今天偶然看到的,分享一下! 原文地址:  Cross-domain-request-with-jquery 当然,还有以上的那个 Demo,我直接拿过来改了下,原地址:Demo 复制代码 代码如下: $(document).ready(function(){ var container = $('#target'); container.attr('tabIndex','-1'); $('.ajaxtrigger').click(function(){ var trigger = $(

JSONP跨域请求实例详解_javascript技巧

JSOP简介 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSON

jsonp跨域请求数据实现手机号码查询实例分析_jquery

本文实例讲述了jsonp跨域请求数据实现手机号码查询的方法.分享给大家供大家参考,具体如下: 前言 网上有很多开放的api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果不借助php等,仅仅通过js怎么解决跨域的问题呢?或许jsonp是个不错的选择. 知识准备 之前一篇<说说JSON和JSONP 也许你会豁然开朗>对jsonp已经介绍的很详细了,这里就不多介绍了,直接上实例吧 代码: <!DOCTYPE HTML> <html> <head&

Ajax jsonp跨域请求实现方法_AJAX相关

什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 具体策略限制情况可看下表:   URL 说明 允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许

JSONP 跨域请求实例

JSONP 跨域请求实例 跨域请求的方式有很多种, 1,iframe 2,document.domain 3,window.name 4,script 5,XDomainRequest (IE8+) 6,XMLHTTPRequest (Firefox3.5+) 7,postMessage (HTML5) 8,后台代理 ... 它们有各自的优缺点,返回的数据格式也各不同,应根据需求慎重选择.比如iframe返回html片段就比较适合,费老劲用它返回JSON就得不偿失了.这篇开始我将打造一个实用的跨

Jsonp post 跨域方案_javascript技巧

近期在项目中遇到这样一问题,关于jsonp跨域问题,get传值是可以的,但post传值死活不行啊,于是网上看了一大堆关于这方面的资料,最终问题得以解决,今天抽空与大家分享下. 说明: http://www.t1.com/index.php 服务端URL 当然这是我本地配置的,需要改为自己对应的地址. 客户端代码: <script> $(function(){ var url = 'http://www.t1.com/index.php'; $.ajax({ type: 'post', url:

深入浅析同源策略和跨域访问_javascript技巧

1. 什么是同源策略      理解跨域首先必须要了解同源策略.同源策略是浏览器上为安全性考虑实施的非常重要的安全策略.     何谓同源:         URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源.    同源策略:         浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性. (白帽子讲web安全[1])         从一个域上加载的脚本不允许访

深入分析Javascript跨域问题_javascript技巧

跨域是什么? 假设a.com/get.html需要获取b.com/data.html中的数据,而这里a.com和b.com并不是同一台服务器,这就是跨域跨域会涉及到Javascript的同源策略,简单来说就是为了保护网站的安全,不被外域(非同源)服务器的js修改本网站内容. 引用一个表格,看一下引起跨因的条件有哪些: 但是有时候我们确实需要这么做,那么我们有哪些方法呢? 1.JsonP 提到跨域不能不先提及jsonp.jsonp其实是JavacScript Object Notation wit