Methods for cross-origin ajax access in WEX5, wex5ajax

Methods for cross-origin ajax access in WEX5, wex5ajax

1. Use jsonp

If jsonp is used for access, the frontend must pass the callback function name to the backend. After the backend is executed, the callback function must be sent back to the frontend. By default, ajax automatically generates a callback function name, the backend can use String callback = request. getParameter ("callback"); get the callback function name.

Front-end DEMO code:

1 $. ajax ({2 "type": "post", 3 "dataType": "jsonp", 4 "async": false, 5 "url": "http: // 192.168.0.24: 8080/WaterMIS_App/data ", 6" data ": {7" action ":" checkAddress ", 8}, 9" success ": function (xhr) {10 alert ("successful! ") 11} 12 });

Backend DEMO code:

1 public void service (ServletRequest request, ServletResponse response) throws ServletException, IOException {2 // request 3 String action = request. getParameter ("action"); 4 // callback function name 5 String callback = request. getParameter ("callback"); 6 // controller Part 7 if ("checkAddress ". equals (action) {8 response. setContentType ("text/html; charset = UTF-8"); 9 response. getWriter (). write (callback + "({});"); 10} 11}

The backend response must be functionName (JSON string); such a string is returned to the front end.

Improvement:

Jsonp-type requests can only be asynchronous, And the request fails without any prompts. Therefore, my solution is to use setTimeout to delay the execution of the successful callback function, set flag to determine whether a successful callback has been executed and whether the Code fails to be executed

Front-end DEMO code improvement:

1 var flag = 1; // whether the callback function has been executed; 1 is the initial value; 2 is the execution 0 is the response failed; 2 var time = 1000; // The unit of time setting. millisecond 3 $. ajax ({4 "timeout": time, 5 "type": "post", 6 "dataType": "jsonp", 7 "async": false, 8 "url ": "http: // 192.168.0.24: 8080/WaterMIS_App/data", 9 "data": {10 "action": "checkAddress", 11}, 12 "success ": function (xhr) {13 flag = 2; 14 alert ("successful! "); 15} 16}); 17 18 // if the request fails, set the method to time in milliseconds before execution. If the flag is not 2, the callback fails within the time range, 19 setTimeout (function () {20 if (flag! = 2) {21 flag = 0; 22 alert ("failed! "); 23} 24}, time + 1 ); 25 26 // request timeout when the time is time + 2 flag is also the initial value of 1, it is considered that successful callback and request failure are not executed, the request times out 27 setTimeout (function (xhr) {28 if (flag = 1) {29 alert ("timeout"); 30} 31}, time + 2 );

2. Set the Response Header for cross-origin requests

Set the response header to achieve the same effect as normal ajax requests.

Front-end DEMO code:

1 $. ajax ({2 "type": "post", 3 "async": false, 4 "dataType": "json", 5 "url": "http: // 192.168.0.24: 8080/WaterMIS_App/data ", 6" data ": {7" action ":" checkAddress ", 8}, 9" complete ": function (xhr) {10 if (xhr. readyState = 4 & xhr. status = 200) {11 alert ("successful! "); 12} else {13 alert (" failed! "); 14} 15} 16 });

Backend code Demonstration:

1 public void service (ServletRequest request, ServletResponse response) throws ServletException, IOException {2 // request 3 String action = request. getParameter ("action"); 4 5 // controller Part 6 if ("checkAddress ". equals (action) {7 response. setContentType ("text/html; charset = UTF-8"); 8 (HttpServletResponse) response ). addHeader ("Access-Control-Allow-Origin", "*"); 9 response. getWriter (). write ("{}"); 10} 11}

Note:

The json data obtained in the first method is automatically parsed into a json object and can be directly operated on a json object.

The second method is just a string. If it is a string in json format, it can be converted using eval () or JSON. parse ().