Solve the problem of ajax cross-domain request

Reference address: http://www.cnblogs.com/sunxucool/p/3433992.html

Ajax asynchronous requests in the foreground often encounter cross-domain requests for data and no return. What is a cross-domain request? If in website A, we want to use Ajax to get specific content in website B, if website A and website B are not in the same domain, then there is a cross-domain access problem. The cross-domain access problem of Ajax is a common problem encountered by existing Ajax developers, and it is generally solved by jQuery's jsonp.

jsonp is a jQuery class specially used to solve cross-domain problems;

Compare the difference between json and jsonp formats:

json format:

{
    "message":"Get success",
    "state":"1",
    "result":{"name":"工作组1","id":1,"description":"11"}
}

jsonp format

callback({
    "message":"Get success",
    "state":"1",
    "result":{"name":"工作组1","id":1,"description":"11"}
})

You can see the difference. The parameter passed from the callback to the background in the url is Shenma. Callback is Shenma. jsonp has one more layer than json, callback(). That way you know what to do with it. So modify the background code.

Next, we use two different tomcats on one machine to simulate cross-domain requests, and open two tomcat ports as 8080 and 8013 respectively.

The tomcat with port 8080 is used as the server, and the server servlet code is as follows:

package com.servlet;

import java.io.IOException;
import java.io.Writer;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONException;
import org.json.JSONObject;

public class KuaYuTestServlet extends HttpServlet {
	public KuaYuTestServlet() {
		super();
	}

	public void destroy() {
		super.destroy();
	}

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

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Writer writer = response.getWriter();
		//The show doesn't understand why it is written like this, but it must be written
		String callback = request.getParameter("callback");
		
		//Add json test data
		JSONObject json = new JSONObject();  
		try {
			json.put("ret", "ret");
			json.put("msg", "msg");  
			json.put("zoneid","zoneid");  
		} catch (JSONException e) {
			e.printStackTrace ();
		}  
		
	    response.setContentType("text/html");
	    response.setCharacterEncoding("utf-8");
	    //write data
	    writer.write(callback + "(" + json + ")");
	}

	public void init() throws ServletException {
		
	}
}

The tomcat with port 8013 is used as the customer service terminal, and the page calling code is as follows:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <title>Cross Domain Test 2</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
		$.ajax({
			url : "http://127.0.0.1:8080/kuaYu2/KuaYuTestServlet",
			dataType : 'jsonp',
			processData : false,
			type : 'get',
			success : function(data) {
				alert (data.ret);
			},
			error : function(XMLHttpRequest, textStatus,errorThrown) {
				alert(XMLHttpRequest.status);
				alert(XMLHttpRequest.readyState);
				alert (textStatus);
			}
		});
	</script>
  </head>
  
  <body>
  	<input type="text" value="">
  </body>
</html>

Attach the test project and publish the project to two servers respectively.

Solve the problem of ajax cross-domain request

Guess you like