常用场景：

一个页面需要提交各种文字数据，还包括图片或者文档数据，如何实现页面无刷新的提交；

很久以前我的一篇博文是这样处理的：

今天上午花了2个小时研究解决了一个问题，就是使用Jquery，在发送跨域ajax请求的情况下，IE和火狐下面的表现是不一样的。

昨天在本地编写代码，非常方便的使用Jquery的$.post()，发送请求到远程的服务器，在360浏览器中，返回的结果是正确的。

在IE中，会有提示访问远程地址，面临完全问题。在火狐中，则完全没有数据。

原来的代码如下：

简单的测试代码，但是在IE中的结果：

然后提示正确结果：

在360浏览器中没有最上面的警告框，显示正确，而在firefox中，提示的结果为空：结果如下：

我在其他很多网站查找了一些相关的消息，总是有些觉得不明确：

比如在Javaeye中，有篇是比较简单的介绍了一下，可是我比较怀疑它是否能正确显示：

他是这样描述的：

Jsonp原理：

首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时，服务器先生成 json 数据。

然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

我实在也没有完全读懂这段话。不通俗。

还有另一位同行：

http://www.javaeye.com/topic/260647(主题：Jquery的跨域调用)，采用的jsp方法写的，我想应该也可以返回。

String jsoncallback=request.getParameter(“jsoncallback”);

…

out.print(jsoncallback+”({/”account/”:/”XX/”,/”passed/”:/”true/”,/”error/”:/”null/”})”);

Jquery取得的数据可能如下：

JQUET0988788({“account”:”XX”,”passed”:”true”,”error”:”null”})

总结，用JSONP要做两件事：

1/请求地址加参数：jsoncallback=?

2/服务器段把jsoncallback的值作为方法名传回来，如JQUET098788(…)

我按照他的思路，也没有搞定，很郁闷，我就觉得很奇怪了，在JQUERY手册中，有个现实的例子，

HTML 代码:

jQuery 代码:

我测试过了，在不同的浏览器中完全能得到图片。于是我决定使用getJSON()的方法进行跨域请求。

html页面的js代码如下：

结果是所有的浏览器都没有数据了。我想一定是我的服务器端代码的什么地方出现了错误。

服务器端的代码如下：

问题依旧。

我通过使用Firebug进行了详细的调试，我在我的浏览器中输入：

JavaScript

http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json

jsonFlickrFeed({

"title": "Recent Uploads tagged cat",

"link": "http://www.flickr.com/photos/tags/cat/",

"description": "",

"modified": "2010-06-11T02:37:21Z",

"generator": "http://www.flickr.com/",

"items": [

{

"title": "",

"link": "http://www.flickr.com/photos/nijntje/4689263097/",

"media": {"m":"http://farm5.static.flickr.com/4022/4689263097_83d02815a9_m.jpg"},

"date_taken": "2010-06-11T11:37:21-08:00",

"description": "

nijntjee posted a photo:

"published": "2010-06-11T02:37:21Z",

"author": "nobody@flickr.com (nijntjee)",

"author_id": "22628426@N06",

"tags": "film cat 35mm pentax takumar spotmatic sp2 kodakgold"

}

]

});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json

jsonFlickrFeed({

"title":"Recent Uploads tagged cat",

"link":"http://www.flickr.com/photos/tags/cat/",

"description":"",

"modified":"2010-06-11T02:37:21Z",

"generator":"http://www.flickr.com/",

"items":[

{

"title":"",

"link":"http://www.flickr.com/photos/nijntje/4689263097/",

"media":{"m":"http://farm5.static.flickr.com/4022/4689263097_83d02815a9_m.jpg"},

"date_taken":"2010-06-11T11:37:21-08:00",

"description":"

1

2

3

4

5

6

7

8

target="creategameform2_frame"enctype="multipart/form-data">

.

.

.

服务器端输出：

PHP

echo '';

1

echo''.$callback.'('.json_encode($json_data).');';