How to do a simple cross domain ajax call to that returns an html page

Question

I have looked at several sites that discuss cross domain calls using ajax. They all seem overly complicated or specific. Below is the simple html page that I want to be able to send the request parameters to a specific JSP on my server.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery AJAX POST Form</title>
    <meta charset="utf-8">
</head>
<body>

<div id="response">
    <pre></pre>
</div>

<form id="my-form">
    <input type="text" id="userName" name="first-name" placeholder="User Name" />
    <input type="text" id="password" name="last-name" placeholder="Password" />

    <button type="submit">Submit</button>
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    (function($){
        function processForm( e ){
            $.ajax({
                url: 'myserver.com:8080/myApp/user-login.jsp',
                crossDomain: true,
                dataType: 'html',
                type: 'post',
                contentType: 'application/x-www-form-urlencoded',
                data: $(this).serialize(),
                success: function( data, textStatus, jQxhr ){
                    $('#response pre').html( data );
                },
                error: function( jqXhr, textStatus, errorThrown ){
                    console.log( errorThrown );
                }
            });

            e.preventDefault();
        }

        $('#my-form').submit( processForm );
    })(jQuery);
</script>
</body>
</html>

I can do this from a simple web page that doesn't use jQuery or ajax, for example, in the browser:

http://myserver.com:8080/myApp/user-login.jsp?userName=bloaty&password=narf

I get an html page showing that I have logged in.

When I try it using the above, I get that cross domain queries aren't supported. The JSP being called, will return an HTML page. What am I missing here?

The JSP page needs to add a CORS header as shown here: http://stackoverflow.com/q/20881532/101087 — NineBerry, Feb 26 '17 at 17:30
I don't have access to every jsp I want to call from my web page. I can enter the URL with parameters as I showed and it works. How to do the same thing from jQuery? — John Wooten, Feb 26 '17 at 18:30
If I can't make a cross domain request in jQuery, can I invoke a php page on my server, and from it get the response from a remote web page, then bring that back into the jQuery page? I'm trying to build a web page that invokes several other remote sites, brings their data back and merges it together. I can't expect those remote sites to have CORS headers just for me. — John Wooten, Feb 27 '17 at 15:55

score 0 · Answer 1 · answered Feb 28 '17 at 10:18

This is very common error that everyone has faced but the solution of this error is Jsoup. first call the servlet using ajax call & put the code that i have written in the below ajax call and also servlet after the execution you will get whole html page... pass the url of servlet in url of ajax call

 <html>
        <head>
            <title>jQuery AJAX POST Form</title>
            <meta charset="utf-8">
        </head>
        <body>

        <div id="response">
            <pre></pre>
        </div>

        <form id="my-form">
            <input type="text" id="userName" name="first-name" placeholder="User Name" />
            <input type="text" id="password" name="last-name" placeholder="Password" />

            <button type="submit">Submit</button>
        </form>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>

            (function($){ 
                function processForm( e ){
                    $.ajax({
                        url: 'gethtmlservlet?urlofjsp=myserver.com:8080/myApp/user-login.jsp', 
                        type: 'post',
                        success: function( data, textStatus, jQxhr ){
                          cosnole.log(data);
                        },
                        error: function( jqXhr, textStatus, errorThrown ){
                            console.log( errorThrown );
                        }
                    });
                    e.preventDefault();
                }
                $('#my-form').submit( processForm );
            })(jQuery);
        </script>
        </body>
        </html>

In servlet if you are using maven then add the dependency of Jsoup in pom.xml or else you can include .jar file accordingly. This out.println line send html to ajax success. now print the htmldocument, it gives you a whole html page. Now if you want to find some node or element you can do it using below code.
i want to find iframe element from html so i used below code , you can write any tag name that you want to find.

import org.jsoup.Jsoup;
  import org.jsoup.nodes.Document;
  import org.jsoup.nodes.Element;

     public class gethtmlservlet extends HttpServlet {   

     protected void processRequest(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {

            response.setContentType("text/html;charset=UTF-8");
            PrintWriter out = response.getWriter();

            try {
            String jspurl = request.getparameter("urlofjsp"); 

             Document htmldocument = Jsoup.connect(jspurl).get();
                 out.println(htmldocument);
             Elements iframe = productdocument.select("iframe");

              }
              catch(Exception e)
              {
                 System.out.println(e);
              }
            }
        }

Note that it's not my servlet and not on my servers. I believe I need to get the HTML back and capture as a string, then "cut" out what I need, then assemble with data captured similarly from other feeds and create my aggregation. — John Wooten, Feb 28 '17 at 14:22

score 0 · Accepted Answer · answered Mar 08 '17 at 13:06

I know its too late but may be this one will helpfull for someone.

$.ajax({
 xhrFields: {
    withCredentials: false
      },
                        url: 'gethtmlservlet?urlofjsp=myserver.com:8080/myApp/user-login.jsp', 
                        type: 'post',
                        success: function( data, textStatus, jQxhr ){
                          cosnole.log(data);
                        },
                        error: function( jqXhr, textStatus, errorThrown ){
                            console.log( errorThrown );
                        }
                    });

How to do a simple cross domain ajax call to that returns an html page

2 Answers2