Perfectly solves the AJAX cross domain problem

2020-03-26 21:46:59
OfStack

The problem of XMLHttprequest objects not being able to make cross-domain requests has been with us since the days of AJAX. This seems like a classic question. This is due to javascript's same origin policy (not discussed here).

The solutions are as follows:

1. Use mid-tier transitions (which can be understood as "proxies") :

Intermediate transition, obviously, is to add a layer of transition in the middle of AJAX and different domain server communication, this layer of transition can be PHP, JSP, c++ and any other language with network communication function, from the middle layer to the server of different domain to read data operation. Take asp.net as an example, if you need to communicate with an asp.net of different domains, now the client xmlhttprequest first queries an asp. The train of thought is like this, believe the reader already very clear understanding.

2. Use < script > tags

This method USES the SRC in the < script > tag to query an aspx to get the response, because the SRC attribute of the < script > tag does not have cross-domain problems.

Here's an example to make things a little bit clearer:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ajax Cross-domain problem </title>
    <script type="text/javascript" src="" id="getAspx">
    </script>
    <script type="text/javascript">
        function get(url) {
            var obj = document.getElementById("getAspx");
            obj.src = url;
            (obj.readStatus == 200)
            {
                alert(responseVal);//If it works, Dylan will pop up
            }
        }
        function query() {
            get(getDemo.aspx);
        }
    </script>
</head>
<body>
<input type="button" value="Ajax Cross-domain test " onclick="query();"/>
</body>
</html>

Getdemo. aspx background code:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace LearnJS
{
    public partial class getDemo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Write("var responseVal='Dylan'");
        }
    }
}

This method is also called ajaj or ajax without xmlHttprequest, replacing x with j because the < script > tag is used instead of XML and xmlHttprequest. This approach seems a bit "offbeat", haha.

Now let's see how we can solve the cross-domain problem of ajax with jQuery:


<html>
<head>
<title>JQuery learning </title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    var oBtnTest = $("#btnTest");
    oBtnTest.click(function(){
        oBtnTest.disabled = true;    
        var oResult = $("#result");
        oResult.html("loading").css("color","red");
        jQuery.getScript("//www.jb51.net/test/js.txt", 
        function(){            
            oResult.html("name:" + Dylan.name + "<br/>email:" + Dylan.email).css("color","black");            
            oBtnTest.disabled = false;            
        });         
    });    
});    
</script>
</head>
<body>
<button id="btnTest">BtnTest</button>
<div id="result"></div>
</body>
</html>

The contents in js.txt on the remote server side are:
Var Dylan = {name: "Dylan", email:Dylan@163.com}

The author feels this kind of way is more concise. Ha ha. Of course, the reader can choose any implementation method according to the actual situation.

Well, it is actually very simple, I have seen many people are not willing to face up to the technical bottleneck of ajax, in fact, ajax should be ajax rather than ajax, highlighting the first A is to emphasize that ajax is actually A method of asynchronous transmission, rather than the specific use of which technology.