ajax跨域请求

前端之家收集整理的这篇文章主要介绍了ajax跨域请求前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

比较通用的有如下两种方式,一种是从服务器端下手,另一种则是从客户端的角度出发。二者各有利弊,具体要使用哪种方式还需要具体的分析。

  • 服务器设置响应头
  • 服务器代理
  • 客户端采用脚本回调机制。

方式一 Access-Control-Allow-Origin

Access-Control-Allow-Origin关键字只有在服务器端进行设置才
会生效。

如果知道客户端的域名或者请求的固定路径,则最好是不使用通配符的方式,来进一步保证安全性。如果不确定,那就是用*通配符好了。

Response.AddHeader("Access-Control-Allow-Origin","*");


方式二 jsonp方式

JSONP(JSON with Padding)HTML页面中script标签内容跨域跨域加载,对于script的src属性对应的内容,浏览器总是会对其进行加载

在服务器端组装出客户端预置好的json数据,通过回调的方式传回给客户端。

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>ajax 测试</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
</head>
<body>
<input type="text" name="talk" id="talk">
<input type="button" value="Test" id="btn">
<div id="content"></div>
<script type="text/javascript">

function jsonpcallback(result) {
    for(var i in result) {
        alert(i+":"+result[i]);
    }
 }
 var JSONP = document.createElement("script");
 JSONP.type='text/javascript';
 JSONP.src='http://192.168.1.125:8080/logtest/log?callback=jsonpcallback';
 document.getElementsByTagName('head')[0].appendChild(JSONP);


</script>

</body>
</html>
上面是用原生的js请求,用jquery ajax请求直接的话

$.ajax({
             url: "http://" + ipPort + "/user/getUser",type: 'GET',dataType: 'jsonp',jsonp: 'callback',success: function (data) {
                   alert('success:'+data);
             },fail: function () {
                   alert('fail');
             }
});


服务器端:

package logtest;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.log4j.Logger;


public class LogServlet extends HttpServlet {
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	Logger log = Logger.getLogger(LogServlet.class);

	@Override
	protected void doGet(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException {
		//跨域请求方式一
        //  resp.setHeader("Access-Control-Allow-Origin","*");
		//跨域请求方式二
		String callback = req.getParameter("callback");
		resp.getWriter().print(callback+"({\"result\":\"succe\"})");
		
	}


}
原文链接:https://www.f2er.com/ajax/161016.html

猜你在找的Ajax相关文章