深入理解jquery跨域请求方法


Posted in Javascript onMay 18, 2016

项目中关于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跨域请求方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
原生JS实现pc端轮播图效果
Dec 21 Javascript
判断是否存在子节点的实现代码
May 18 #Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 #Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 #Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 #Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 #Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 #Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 #Javascript
You might like
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
纯JS实现简单的日历
2017/06/26 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
网络教育自我鉴定
2013/11/01 职场文书
计算机专业大学生的自我评价
2013/11/14 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
交通事故委托书范本
2014/09/28 职场文书
小学优秀教师材料
2014/12/15 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书