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

今天在项目中需要做远程数据加载并渲染页面，直到开发阶段才意识到ajax跨域请求的问题，隐约记得Jquery有提过一个ajax跨域请求的解决方式，于是即刻翻出Jquery的API出来研究，发
JQuery对于Ajax的跨域请求有两类解决方案，不过都是只支持get方式。分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。

什么是jsonp格式呢？API原文：如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理，根据客户端提交的callback的参数，返回一个callback(json)的数据，而客户端将会用script的方式处理返回数据，来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。

客户端JQuery.ajax的调用代码示例：

代码如下:

$.ajax({
type : "get",
async:false,
url : "http://www.xxx.com/ajax.do",
dataType : "jsonp",
jsonp: "callbackparam",//服务端用于接收callback调用的function名的参数
jsonpCallback:"success_jsonpCallback",//callback的function名称
success : function(json){
alert(json);
alert(json[0].name);
},
error:function(){
alert('fail');
}
});

服务端返回数据的示例代码：

代码如下:

public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
String callbackFunName = context.Request["callbackparam"];
context.Response.Write(callbackFunName + "([ { name:\"John\"}])");
}

赞 (0)

相关推荐

  • JavaScript用JSONP跨域请求数据实例详解

    前言 最近因为工作需要,需要把爱词霸的每日一句引入到页面上,爱词霸向外开放了 API, 接口返回 json 数据,为了让页面更轻巧,我没有用 jQuery,而是直接纯 js 写了一段代码: <script type="text/javascript"> function httpGetAsync(theUrl, callback) { xmlHttp = null; if (window.XMLHttpRequest) {// code for IE7, Firefox,

  • 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",

  • AJAX跨域请求json数据的实现方法

    我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果. 让我们看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的. jQuery的JSONPjQuery.getJSON方法: Js代码 复制代码 代码如下: jQuery.getJSON("http://search.twitter.

  • js跨域请求数据的3种常用的方法

    js跨域请求数据的3种常用的方法

    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求. 那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理: 1.JavaScript    在原生js(没有jQuery和ajax支持)的情况下,通常客户端代码是这样的(我假设是在localhost:8080的端口下的http://localhost:8080/webs/i.mediapower.mobi/wutao/index.html页面的body标签下面加入以下代码): <scr

  • AJAX跨域请求数据的四种方法(实例讲解)

    由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据 请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象 var xhr = new XMLHttpRequest(); 注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP");  记住要进行兼容处理哦  在这里我就不写了 通过该对象进行获取 获取数据的四种状态  xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请

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

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

  • JQuery的Ajax跨域请求原理概述及实例

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

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

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

  • 浅谈jquery中ajax跨域提交的时候会有2次请求的问题

    我们平时在同域中请求页面什么的时候不会有这种情况,这种情况大多发生在移动端的跨域请求中发生的. 解决方法就是在服务端中加一层过滤HTTP请求的类型,把OPTION等不用的类型过滤掉.就是当请求为非 HTTP中的 GET 和 POST的时候就不执行下面的代码,这样就可以只执行一次请求了. 在ASP.NET中我们用 Request.ServerVariables["REQUEST_METHOD"] == "POST" 或者 Request.ServerVariables

  • jQuery.ajax 跨域请求webapi设置headers的解决方案

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 1.第一步 服务端设置响应头,在webapi的web.config做如下设置 <system.webServer> <httpProtocol> <!--跨域配置开始--> <customHeaders> <add name="Access-Control-All

  • Ajax如何进行跨域请求?Ajax跨域请求的原理

    Ajax如何进行跨域请求?Ajax跨域请求的原理

    本文实例为大家分享了Ajax跨域请求的具体实现过程,供大家参考,具体内容如下 下面我们在本地建两个站点演示一下 第一步首先我们在本地搭建好一个Apache服务器:下载地址: 第二步服务器配置好以后,在本地配置好两个虚拟的域名: 第三步我们在C盘建一个文件夹命名为"HTML5": 第四步找到Apache虚拟主机的配置文件,然后打开配置文件 第五步在第三步建的HTML5文件夹下分别建一个文件夹a和文件夹b; 第六步修改Apache虚拟主机的配置文件,如图 第七步修改一下host文件,添加a

  • AJAX跨域请求JSONP获取JSON数据的实例代码

    Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.使用XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器.Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序. 不过,由于受到浏览器的限制,该方法

  • 浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法

    浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法

    由于同源策略的缘故,ajax不能向不同域的网站发出请求. 比如a站localhost需要向b站请求数据,地址为:http://www.walk-sing.com/api.php 请求的代码如下: <html> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $.get

  • 完美解决ajax跨域请求下parsererror的错误

    ajax请求报parsererror错误是很宽泛的概念,很多情况下都报这个错, 在很多时候,即使ajax提交.返回都正常 XMLHttpRequest.status=200  (正常响应) XMLHttpRequest.readyState=4 (正常接收) ajax也会提示一个parseerror的错误. 出现这个错误,大都是不良书写习惯,或者语法不当造成的. 关于ajax的错误,请使用: error:function(XMLHttpRequest, textStatus, errorThro

  • 解决ajax跨域请求数据cookie丢失问题

    前端: 以jquery为例: 需要加入 复制代码 代码如下: xhrFields: {             withCredentials: true         },         crossDomain: true, $.ajax({         type: postType,         url: url,         data: postData || '',         xhrFields: {             withCredentials: tru

随机推荐