深入理解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 相关文章推荐
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
将函数的实际参数转换成数组的方法
Jan 25 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
javaScript Array api梳理
Mar 31 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
判断是否存在子节点的实现代码
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
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
英国著名的药妆网站:Escentual
2016/07/29 全球购物
JSF的标签库有哪些
2012/04/27 面试题
人力资源求职信
2014/05/25 职场文书
意向协议书
2015/01/27 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书