javascript jsonp

ajax在使用中会受到同源策略限制，当目标url的协议，域名，端口之一与脚本所在文档不一致时就不能访问并获取数据。解决这一问题的方案有很多：

  1. 服务器端代理
  2. 跨域资源共享
  3. 通过含有src属性的元素请求资源：，<script>，<iframe>，<img>

其中jsonp属于第三种。主要思路是：

  1. 在请求文档中编写好对请求数据进行处理的回调函数
  2. 通过<script>请求需要的数据并以参数形式告知服务器，支持jsonp的服务器在响应时返回以json作为参数的函数调用表达式
  3. 在服务器端接收回调函数名并生成对应字符串
  4. 客户端收到服务器返回的字符串然后调用

 

下面是一个简单的例子。服务器端使用普通jsp文件

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 
 3 <%
 4     String users = "[{\"name\": \"zhao\", \"age\": \"24\"},"
 5                   + "{\"name\": \"qian\", \"age\": \"24\"},"
 6                   + "{\"name\": \"sun\",  \"age\": \"24\"},"
 7                   + "{\"name\": \"li\",   \"age\": \"24\"}"
 8                                 +"]";
 9     String callback = request.getParameter("callback");
10     
11     if (callback == null)
12     {
13         out.println(users);
14     } // end if
15     else
16     {
17         out.println(callback + "(" + users + ")");
18     } // end else
19 
20 %>

客户端使用普通html

 1 <!doctype html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta name="description" content="">
 7     <meta name="author" content="">
 8     
 9     <title>Template Index</title>
10     
11 </head>
12 <body>
13 <h1 id="jsonp">json-p</h1>
14 <div id="container">
15 </div>
16   <script>
17     var showUsers = function (list)
18     {
19       var container = document.getElementById("container");
20       list.forEach(function (d, i) {
21         var item = document.createElement("p");
22         item.innerHTML = "id: " + i + "  name:  " +d.name + " age: " + d.age;
23         container.appendChild(item);
24       });
25     }; // end showUsers()
26     
27     window.addEventListener("load", function () {
28       var url = "http://localhost:8080/ajax/userList.jsp"; // 根据实际url设置
29       var jsonp = document.getElementById("jsonp");
30       
31       jsonp.addEventListener("click", function () {
32         var script = document.createElement("script");
33         script.src = url + "?callback=showUsers";
34         var head = document.getElementsByTagName("body")[0];
35         head.appendChild(script);
36       });
37     });
38 
39   </script>
40 </body>
41 </html>

 

相比跨源资源共享和服务器端代理jsonp相对简单，也存在一定缺点：

  1. script标签的局限性使得只支持GET方法
  2. 缺少对传输的状态控制
posted @ 2013-11-20 17:45  我的百科全书  阅读(294)  评论(0)  编辑  收藏  举报