jquery跨域Ajax请求 - 飘零的云 - ITeye技术网站
博客分类：
关键：ajax的dataType为jsonp，并且在请求的url中加上"?jsoncallback=?"
前台代码：
&script type="text/javascript" src="jquery-1.7.2.min.js"&&/script&
&script type="text/javascript"&
function RegisterRequest2() {
/* getJSON method is ok also...
$.getJSON("http://192.168.1.154:7087/ClusterServer/Rigister?jsoncallback=?", { pwd: '123', username: 'tl' }, function(json) { alert(json.name); });　
url: "http://192.168.1.154:7087/ClusterServer/Rigister?jsoncallback=?",
type: "GET",
data: { pwd: '123', username: 'tl' },
dataType: "jsonp",
success: function(data) {
alert(data.name);
error: function(a, b, c) {
alert("error==" + b);
&input type="button" onclick="RegisterRequest2();"
value="StartRequest" /&
后台Servlet代码：
import java.io.IOE
import javax.servlet.ServletE
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
public class Rigister extends HttpServlet {
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String pwd = req.getParameter("pwd");
String username =req.getParameter("username");
System.out.println("get=="+username+"
==="+pwd);
String callback = req.getParameter("jsoncallback");
resp.getWriter().write(callback + "({name:'tzy',phone:'123'})"); //参数为json格式
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String pwd = req.getParameter("pwd");
String username =req.getParameter("username");
System.out.println("post=="+username+"
==="+pwd);
String callback = req.getParameter("jsoncallback");
resp.getWriter().write(callback + "({name:'tzy',phone:'123'})");
后台返回前台的时候取出jsoncallback回调函数名，将json格式的数据作为函数的参数，整个以字符串的形式返回给前台。。
浏览 12239
tonlion2046
浏览: 257577 次
来自: 杭州
支持分布式吗
qingchenyuji 写道您好，
看了您的博文，想向您请 ...
你的userId怎么传的啊？&当前域名访问 & 文件
&script type="text/javascript" src="/ajax/libs/jquery/1.4.4/jquery.min.js"&&/script&
$.getJSON('http://localhost/test.php?callback=?',{p1:'11'},function(msg){
//调用域localhost的test.php（其实两个文件在相同目录下）
console.dir(msg);
localhost/test.php　文件
die($_GET['callback'].'('.json_encode(array('msg'=&1)).')');
　getJSON 核心思想是 执行getJSON &注册一个以当前时间命名的function 然后再服务端执行该函数 （具体源码）
& & & & & &1、
getJSON: function( url, data, callback ) { return jQuery.get(url, data, callback, "json"); },
get: function( url, data, callback, type ) {
// shift arguments if data argument was ommited
if ( jQuery.isFunction( data ) ) {
callback =
data = null;
return jQuery.ajax({
type: "GET",
data: data,
success: callback,
dataType: type
// Build temporary JSONP function
if ( s.dataType == "json" && (s.data && s.data.match(jsre) || s.url.match(jsre)) ) {
jsonp = "jsonp" + jsc++;
// Replace the =? sequence both in the query string and the data
if ( s.data )
s.data = (s.data + "").replace(jsre, "=" + jsonp + "$1");
s.url = s.url.replace(jsre, "=" + jsonp + "$1");
// We need to make sure
// that a JSONP style response is executed properly
s.dataType = "script";
// Handle JSONP-style loading
window[ jsonp ] = function(tmp){
success();
complete();
// Garbage collect
window[ jsonp ] =
try{ delete window[ jsonp ]; } catch(e){}
if ( head )
head.removeChild( script );
阅读(...) 评论()使用JQuery的JSONP请求解决Ajax跨域问题
JQuery对于Ajax的跨域请求有两类解决方案，都是只支持get方式。分别是JQuery的 jquery.ajax
jsonp格式和jquery.getScript方式。
JSOP的API原文：如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数
callback=?
，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。也就是远程服务端需要对返回的数据做下处理，根据客户端提交的callback的参数，返回一个callback(json)的数据，而客户端将会用javascript的方式处理返回数据，来对json数据做处理。另外JQuery.getJSON也同样支持jsonp的数据方式调用。这里只介绍一下JSONP的处理方法。
客户端调用代码：
type : "get",
async:false,
url : "/ajaxJsonP.do",//请求地址
dataType : "jsonp",
"callbackparam",//服务端用于接收callback调用的function名的参数
jsonpCallback:"success_jsonpCallback",//callback的function名称
success : function(json){
& & alert(json);
json[0].msg;
error:function(){
& & alert('fail');
java服务端代码(如action):
public void ajaxJsonP(){
response.setContentType("Content-Type:text/charset=UTF-8");
String callbackFunName =
super.request.getParameter("callbackparam");
response.getWriter().write(callbackFunName + "([{
msg:\"success!\"}])");
} catch (IOException e1) {
e1.printStackTrace();
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。jquery 跨域请求什么实现？ jQuery &$.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的.，$.getJSON是$.ajax()的封装，可以参考jquery aip 的$.getJSON部分。
2、什么是 JSONP？ JSONP（JSON with Padding-填充json数据也就是常用的json跨域方式）：利用script标签，通过特定的src地址的调用，来执行一个客户端的js函数，在 服务器端生成相对的数据（json格式）并以参数的形式传递给这个客户端的js函数并执行这个函数，前提是需要服务器端的数据输出支持。 & & &&
3.为什么使用JSONP ？ 由于 JSON 只是一种含有简单括号结构的纯文本，因此许多通道都可以交换 JSON 消息。因为同源策略的限制，我们不能在与外部服务器进行通信的时候使用 XMLHttpRequest。而JSONP是一种可以绕过同源策略的方法，即通过使用 JSON 与 &script& 标记相结合的方法，从服务端直接返回可执行的JavaScript函数调用或者JavaScript对象。
4、JSONP原理 在 jQuery 1.2中，您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据，客户端传递的URL里要包含callback变量，如&myurl?callback=?&。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。( 注意：此行以后的代码将在这个回调函数执行前执行),服务端获取客户端传递的callback的值，和需要传递的json字符串构成 callback+”(“json“)” &传回给客户端。
(1)首先在客户端注册一个callback, 然后把callback的名字传给服务器,此时，服务器先生成 json 数据。 然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数callback
(2)最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）
5、先看看jQuery.ajax()方式，这种比较容易理解
async:false,
url: 'http://www.xxxxxxx.action',
// 跨域URL
type: 'GET',
dataType: 'jsonp',
jsonp: 'callback', //默认callback,也就是URL后面所带的 url?callback=?
data: mydata,
timeout: 5000,
beforeSend: function(){
//jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话，就已经不是ajax事件了
success: function (json) { //客户端jquery预先定义好的callback函数，成功获取跨域服务器上的json数据后，会动态执行这个callback函数
if(json.actionErrors.length!=0){
alert(json.actionErrors);
complete: function(XMLHttpRequest, textStatus){
$.unblockUI({ fadeOut: 10 });
error: function(xhr){
//jsonp 方式此方法不被触发
//请求出错处理
alert(&请求出错(请检查相关度网络状况.)&);
6、$.getJSON 方式
$.getJSON(&xxxxxx/user.html?callback=?&, {},function(json){
if(json.errorFlag==&OK&){
)}; java 后台代码
String callback = request.getParameter(&callback&);
JSONObject ret =new JSONObject();
ret.put(&errorFlag&, &OK&);
out.print(callback+ &(& + ret.toString() + &)&);