ajax 跨域获取数据jsonp使用

昨天帮同事从其他服务器传过来的json数据进行处理,遇到该问题。开始我的思路是用ajax直接请求把数据弄出来就OK了,然而出错了.原因是我使用的ajax 返回类型为json,默认ajax阻止跨服获取数据的。结合其他博文,ajax的dataType使用jsonp来解决此问题。开始觉得jsonp与json的使用类似,一步步的写着代码,如下:

$.ajax({
                    type:‘get‘,
                    async:false,
                    url:‘http://112.11.131.238/nanhunongjing/GetCollectInforByCollectId?serverTime=384‘,
                    dataType:‘jsonp‘,
                    cache:true,
                    contentType:‘application/x-www-form-urlencoded;charset=utf-8‘,
                    jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
                    jsonpCallback:"callBackFun",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名

                    success:function(data){
                       // var json = $.parseJSON(data);
                        alert(data[0].xxx);
                     },
	                error:function(XMLHttpRequest, textStatus, errorThrown){
     	                alert(XMLHttpRequest.status);
     	                alert(XMLHttpRequest.readyState);
     	                alert(XMLHttpRequest.responseText);
     	                alert(textStatus);
     	                alert(errorThrown);
     	                console.log(textStatus);
	                }
                 });

看着没问题,其实问题让人难一理解。执行上述代码始终执行error内的方法,用火狐查看调试,也看不出什么端倪。

页面alert输出

status  200
readyState  4
responseText  null
errorThrown  Error: callBackFun was not called
textStatus parsererror

我们看到这些信息,一般就上网上查。。。。。

jsonpCallback 默认不写会生成一个名字,如jQuery172031072511965160154_140679384671

这是回调函数的名字。

我出错的重点也在这里,不明白回调是什么意思,怎么个回调法????

借鉴http://www.cnblogs.com/know/archive/2011/10/09/2204005.html该博主的写法。发现jsonp处理返回是以

回调函数名("json")整体返回的(例callBackFun(“{‘x‘:‘x‘}”))。再请求时向后台传入了参数callback,也即回调函数名。

后台处理程序:

String callBackFun = hsRequest.getParameter("callback");
    				System.out.println("///"+callBackFun);
    				hsResponse.getWriter().print(callBackFun+"([{\"xxx\":1,\"hs\":\"测试\"}])");

类似以上代码处理。

要获得json数据,一定要注意返回数据的格式。

通过上述构思,不可能让我们跨域去写一个回调函数,这种显然不能够适合应用环境。

我就换了另一种获取数据的办法,利用httpClient去模拟请求获取远程服务端的数据,代码如下:

HttpClient client = new DefaultHttpClient();
    	HttpGet httpGet = new HttpGet("http://112.11.131.238/nanhunongjing/GetCollectInforByCollectId?serverTime=384");
    	try {
    		HttpResponse httpResponse = client.execute(httpGet);
    		//响应状态
    		System.out.println("响应状态:"+httpResponse.getStatusLine());
    		HttpEntity entity = httpResponse.getEntity();
    		if (entity != null)
    		{
    			/* 转化为文本信息
    			 * 并转码
    			 *  */
    				result = EntityUtils.toString(entity,"utf-8");
    				System.out.println(result);
    				result = new String(result.getBytes("utf-8"),"iso8859-1");
    				//hsResponse.getWriter().print(result);
    				String callBackFun = hsRequest.getParameter("callback");
    				System.out.println("///"+callBackFun);
    				hsResponse.getWriter().print(callBackFun+"([{\"xxx\":1,\"hs\":\"测试\"}])");
    		}
    	} catch (ClientProtocolException e) {
    		e.printStackTrace();
    	} catch (IOException e) {
    		e.printStackTrace();
    	}
    	finally{
    		  //关闭连接释放资源
    		client.getConnectionManager().shutdown();
    	}

在httpGet()写入自己的url

获取的数据一般已经是json数据了。如果不是,我猜你也知道怎么去写,我这就不多说了。其他详细介绍自己在网上搜吧!多看看总会有解决办法,不要坐等别人给你说给你写。

有些不足的地方请包涵,谢谢。希望对有问题的朋友有帮助!!!

ajax 跨域获取数据jsonp使用

时间: 2024-10-21 23:41:29

ajax 跨域获取数据jsonp使用的相关文章

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", dataType: "html&q

ajax 跨域请求数据 jsonp 示例

1.请求页面 <!doctype html><head><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jsonp调用方法</title></head><body> <script type="text/javasc

笔记-Ajax[4]-JSONP跨域获取数据。

JS的跨域:跨域名获取数据,a域名获取b域名中的数据. 解决跨域获取数据的方法也叫JSONP(JSON and Padding) JSONP方法: 1:服务器代理:XMLHttpRequest代理文件 2:script标签:jsonp(常用);//利用script标签的src引入外部文件的功能,src能够引入任何的文件的类型 3:location.hash方式:iframe 4:window.name方式 5:flash方式 6:html5的postMessage方式 例子:百度输入数据下拉框提

使用图片跨域方式获取图片数据 使用 jsonp 方式跨域获取数据

使用图片跨域方式获取图片数据 server.get(`/mockImg`, (req, res, next) => { // 使用图片跨域方式获取图片数据 req.headers.origin && res.setHeader(`Access-Control-Allow-Origin`, req.headers.origin) res.setHeader(`content-type`, `image/gif`) res.setHeader(`data`, `image/gif`) v

jquery Ajax 跨域请求( jsonp)

“Same-Origin Policy”(同源策略) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略). 这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容. 什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”.而跨域就是

ajax 跨域请求之jsonp

需求 遇到的问题 解决办法 需求 今天项目需要访问一个外部链接获取数据,是跨域的.使用ajax 请求一直提示: 遇到的问题 1. 如何使用ajax 跨域请求数据 2. 能不能post请求 解决办法 经过网上查找资料,能使用jsonp请求跨域数据. jsonp请求数据只能get,不支持post跨域请求 使用方法,见代码: $.ajax({ type: "post",//这里写post也没用,也是get请求 url: "url", dataType: "jso

XMLHTTPRequest对象不能跨域获取数据?!

写了一小段代码,是用XMLHTTPRequest对象来获取数据的,在本地服务器中,运行的很顺利,但是转向实际服务器(实质上就是转向http://gumball.wickedlysmart.com获取一个json文件过来),运行就跑不起来了. 这就涉及到跨域获取数据的问题了. 我运行时的环境是这样的: 本地服务器运行当前代码.转向http://gumball.wickedlysmart.com获取一个json文件过来. 结果:报错. XMLHttpRequest cannot load   No

利用window.name+iframe跨域获取数据详解

详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.iframe是html的一个标签,可以在网页中创建内联框架,有个src属性(指向文件地址,html.php等)可以选择内联框架的内容,可以看个例子(猛戳这里),大概了解下就行了.window.name(一般在js代码里出现)的值不是一个普通的全局变量,而是当前窗口的名字,这里要注意的是每个iframe都有包

NodeJS express跨域获取数据

这几天一直在研究NodeJS跨域获取数据的事情,然后找到了一个好用的模块request. 一.先把咱们的主要模块引用进来: 这里我使用的是express var express = require('express');var router = express.Router();var request = require('request');request需要安装,方法为:npm install ––save request 二.路由部分 router.get('/',function(req