深入理解jquery跨域请求方法

项目中关于ajax jsonp的使用，

出现了问题：可以成功获得请求结果，但没有执行success方法

总算搞定了，记录一下

function TestAjax()
 {
  $.ajax({
    type : "get",
    async : false,
    url : "ajaxHandler.ashx", //实际上访问时产生的地址为: ajax.ashx?callbackfun=jsonpCallback&id=10
    data : {id : 10},
    cache : false, //默认值true
    dataType : "jsonp",
    jsonp: "callbackfun",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
    jsonpCallback:"jsonpCallback",
      //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
      //如果这里自定了jsonp的回调函数，则success函数则不起作用;否则success将起作用
    success : function(json){
      alert(json.message);
    },
    error:function(){
      alert("erroe");
    }
  });
}

function jsonpCallback(data) //回调函数
{
  alert(data.message); //
}

public class ajaxHandler : IHttpHandler
{
  public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "text/plain";
    string callbackfun = context.Request["callbackfun"];
    context.Response.Write(callbackfun + "({name:\"John\", message:\"hello John\"})");
    context.Response.End();
  }
  public bool IsReusable {get {return false;}
}

ajax请求参数说明：

dataType string 服务器返回的数据类型。

如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。

可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。

注意：在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

"json": 返回 JSON 数据 。

"text": 返回纯文本字符串

"jsonp":jsonp格式。使用jsonp形式调用函数时，

访问url时会自动将url后面添加上如"callback=callbackFunName" 以执行回调函数(callbackFunName)。

jsonp string

在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种get或post请求中url参数里的"callback"部分，

比如 jsonp:'callbackfun' 则将会生成"callbackfun=?"传给服务器。

jsonpCallback String  此参数为jsonp请求指定一个回调函数名。

这个值将用来取代jQuery自动生成的随机函数名。 即上面"callback=?"中的问号部分

这主要用来让jQuery生成度独特的函数名，这样请求更容易，也能方便地提供回调函数和错误处理。

也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。

ajax jsonp与普通的ajax请求的主要区别在于——请求响应结果的处理。如上面代码所示的响应结果为：

jsonpCallback({ name:"world",message:"hello world"});

实际上就是调用jsonp回调函数jsonpCallback,并将要响应的字符串或json传入此方法，

关于自定了jsonp的回调函数， success函数则不起作用

大概其底层的实现(当然这是默认的回调函数的时候，否则就不会执行success的方法吧)：

function default_jsonpCallback(data)
{
  success(data); //在默认的回调方法中执行
}

最后一个比较简单的方法，

$.getJSON("GetUserbyName.aspx?name=ww&callback=?",
function(date)
{
//....
}
)

以上这篇深入理解jquery跨域请求方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery使用ajax跨域请求获取数据

    跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一. var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld"; jQuery.support.cors = true; //之前没有加这句老是提示no tr

  • java 结合jQuery实现跨域名获取数据的方法

    一.什么是跨域? 由于浏览器出于安全的考虑,采取了同源策略的限制,使得jQuery无法直接跨域名互相操作对象或数据.例如:a.com 域名下的 a.html页面利用jQuery无法操作b.com 域名下b.html页面的对象或是数据, 并且默认情况下也不能操作test.a.com域名下的 test.html的 对象或是数据 .只要满足下面条件的jQuery都会视为跨域名: 1.主域相同,子域不同,如xxx.aaa.com和yyy.aaa.com 2.域名相同,端口不同,如xxx.aaa.com:

  • JQuery 的跨域方法推荐_可跨任何网站

    因发现有不少博友发园内短信问及JS的跨域问题,我想很多程序员的脑海里面还认为JS是不能跨域的,其实这是一个错误的观点:有很多人在网上找其解决方法,教其用IFRAME去解决的文章很多,真有那么复杂吗?其实很简单的,如果你用JQUERY,一个GETJSON方法就搞定了,而且是一行代码搞定. 下面开始贴出方法. //跨域(可跨所有域名) $.getJSON("http://user.hnce.com.cn/getregion.aspx?id=0&jsoncallback=?",fun

  • 利用JQuery和Servlet实现跨域提交请求示例分享

    原理:JavaScript的Ajax不可以跨域,但是可以通过向本地的一个Servlet发出请求,由Servlet完成跨域.再把远程的结构返回给客户端.这样Ajax就可以跨域了.在后面,再发一个PHP版本的,请大家关注啊.下面是代码 JS代码: 注意:在Post方式时,param1和param2为向远程发送的参数值,可以有多个. 复制代码 代码如下: //GET方式function reqeustCrossDomainProxyGet(){    var url = "http://www.bai

  • jquery跨域请求示例分享(jquery发送ajax请求)

    jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数.原型如下: jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据. url: 发送请求的地址data : (可选) 待发送key/value参数callback: (可选) 载入成功时的回调函数主要用于客户端获取服务器JSON数据.简单示例: 服务器脚本,返回JSON数据: 复制代码 代码如下: // $.getJSON.php$

  • jquery的ajax跨域请求原理和示例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.

  • jQuery跨域问题解决方案

    jQuery跨域问题解决方案

    通过XMLHTTPRquest请求不同域上的数据,原来js跨域访问是后台有个处理路径"/test"的函数.下面把具体解决方案介绍如下. 后台处理路径"/test"的函数: 复制代码 代码如下: //路径处理 app.get("/test",user.test); //处理函数 exports.test=function(req,res){     res.end("alert('JS跨域访问')"); }; 外部有一个网页需要

  • jQuery 获取跨域XML(RSS)数据的相关总结分析

    前段时间项目,需要前端JS获取跨域XML(RSS),最先打算使用jQuery.ajax方法获取,但是在ie9以下,提示"拒绝访问的" 略尴尬,网上查找了相关资料总结了以下几种方法: 一.google的jGFeed:相信很多同学对这个应该不陌生,使用也相对简单: 源码: (function($){ $.extend({ jGFeed : function(url, fnk, num, key){ // Make sure url to get is defined if(url == n

  • jquery中ajax处理跨域的三大方式

    由于JS同源策略的影响,因此js只能访问同域名下的文档.因此要实现跨域,一般有以下几个方法: 一.处理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已经实现了跨域访问.但ie10以下不支持 只需要在服务端填上响应头: header("Access-Control-Allow-Origin:*"); /*星号表示所有的域都可以接受,*/ header("Access-Control-Allow-Methods:G

  • jquery中ajax跨域方法实例分析

    本文实例分析了jquery中ajax跨域.分享给大家供大家参考,具体如下: JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问 方法一: jsonp之 getJSON js var url = "http://localhost/mytest/jsonp_php.php?callback=?"; $.getJSON(url, { "age": 21, "name

  • jquery+ajax实现跨域请求的方法

    本文实例讲述了jquery+ajax实现跨域请求的方法.分享给大家供大家参考.具体实现方法如下: 说明:这里的dataType 为  "jsonp"  :type 只能为 GET 前台请求代码如下: 复制代码 代码如下: $.ajax({  type: "GET",  url: "http://www.xxx.com/Rest/ValidAccountsExists.aspx?accounts=admin",  dataType: "j

  • jQuery使用ajax跨域获取数据的简单实例

    jQuery使用ajax跨域获取数据的简单实例 var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld"; jQuery.support.cors = true; //之前没有加这句老是提示no transport,我没去深想. $.ajax ({ type: "POST", contentType: "application/x-www-form-urlencoded",

随机推荐