Ajax-jsonp跨域请求简单样例

Ajax-jsonp跨域请求说明

1.简要说明： 

跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。如果协议，端口和主机对于两个页面是相同的，则两个页面具有相同的源，否则就是不同源的。如果要在js里发起跨域请求，则要进行一些特殊处理了。或者你可以把请求发到自己的服务端，再通过后台代码发起请求，再将数据返回前端 。

我测试jsonp跨域请求，简单来说就是满足，客户服务器可以通过JavaScript访问我阿里云服务器的Java服务端。

2.先看下直接发起ajax请求会怎么样？

请求的结果如下图：可以看到跨域请求因为浏览器的同源策略被拦截了 

3. 如何发起跨域请求？

根据项目实际需求只测试了jquery的jsonp方式跨域请求。

Jquery代码：

function testJsonp(phone){
	$.ajax({
		url:"http://10.1.30.27:8080/DwrTest/TestJsServlet",
		type:"GET",
		data:{
			phone:phone
		},
		dataType:"jsonp",
		success:function(data){
			var result = JSON.stringify(data);
			console.log('response value: '+result);
			$("#text").val(result);
		},
		error:function(){
		    return "request error!";	
		}
	});
}

Java服务端servlet类代码：

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;

public class TestJsServlet extends HttpServlet {

	private static final long serialVersionUID = 3647057807691354890L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {		
            doPost(request, response);           
	}	

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		// 接收参数 :phone：我自定义的;callback：ajax自动生成的jsonp回调函数名称，支持自定义，未声明，自动把ajax success()当多回调函数处理
        String phone = request.getParameter("phone");
        String callback = request.getParameter("callback");
        // 返回json数据
        JSONObject json = new JSONObject();
        json.put("result", "you call phone is: "+phone);
        // 用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
        String result = callback + "(" + json.toString() + ")";
        out.write(result);
		out.flush();
		out.close();
	}

}

测试效果：

注：jsonp方式不支持POST方式跨域请求，就算指定成POST方式，会自动转为GET方式，而后端如果设置成POST方式了，那就无法请求了，此外jsonp默认会自动生成callback参数，这里就不具体介绍了