The ArcGIS API for Javascript development tutorial has come to an end. Although many of them are not very clear, I still have some experiences. I would like to share my experiences with you and like to share with you.
A persistent technical man, once encountering a problem, first wants to solve the problem, and then thinks about why such a problem occurs, second, there may be several ways to solve such problems. If you can clarify these issues, you can give a reason. I think this technology will be very deep, and I like to read such blog posts, in particular, there are some explorations about what, or the operating mechanism, so that, in essence, even more powerful bloggers directly put some underlyingCodeFor a blog or blogger like this, I can only look back and sigh. I also like to write similar blog posts, because these are my own experience, but the qualifications are mediocre. I can only talk about them in general, and it is not a good job.
The topic starts from cross-origin. When I write the ArcGIS API for Javascript development tutorial, this error is often encountered when I send an XMLHttpRequest request to the server, although I cannot tell the root of the problem or point out the cause, I like to record it, we only hope to get the correct solution in constant hits. The reason for this problem is that the browser only allows requests to resources of the Current Source (domain name, protocol, Port). When the browser finds that the two requests are not in the same domain, an error is returned. If the browser stipulates this, we can only accept it. If that sentence cannot be changed, we can accept it silently!
The browser is correct, because for security reasons, JavaScript code is not allowed to perform cross-origin operations. For example, Ajax in the liuyu.com site can only access resources under the liuyu.com site, but cannot access resources in the esrichina.com site across regions. This is a cross-origin Ajax problem. Now that we know the problem, we want to bypass cross-origin.
Proxy is a solution, and proxy is also the most used.
The proxy actually acts as a transit request. When machine A requests data from server C, machine A can forward the request by machine B, then machine A obtains the result of proxy server B and server C from the generation. the proxy is also running on a Web server. Dynamic Web pages (ASP. NET, PHP, JSP, etc.) are often used as proxy pages for such transit requests. The above relationship should be clear and clear, without a doubt, the proxy can be seen in the ArcGIS API for Javascript development tutorial, which is not mentioned here.
Why can I directly use the online API on the ESRI website during development?
When a page is submitted, the browser performs form authentication (form is a form, and each page has a form tag). When you obtain data from different domains, the browser rejects access because it deems it unsafe. The SRC In the tag script does not require Form authentication when requesting remote service data, because the tag is not included in form, therefore, you can use this method to request data from different domains.
Test and create a new JS file with the following content:
Function add (a, B) {return a + B;} alert (add (1, 2); <! 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 ">
We deploy this JS file on the server, which is similar to calling ESRI's online API.
<! 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 ">
As you can see, both of them can get the correct results, indicating that the script tag is not affected by cross-origin. Based on this, we can also create a script tag and dynamically process it as follows:
Functionscripttag (SRC) {var script = document. createelement ('script'); script. setattribute ("type", "text/JavaScript"); script. src = SRC; document. body. appendchild (SCRIPT);} window. onload = function () {scripttag ("http: // localhost/crosstest. JS ");}
Http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html
Jsonp, which is also common when using ESRI. Request.
Jsonp is the alias of JSON with padding. It is an unofficial protocol that allows the server to integrate SCRIPT tags to return to the client and implement cross-origin access through javascript callback (this is only a simple implementation form of jsonp)
Jsonp implements cross-origin through a callback function. When constructing HTTP request parameters, the following code is displayed: jsonptest. ashx? Callback = callback & A = 3 & B = 4. Callback is a function on the client. After the server completes processing, the client function will be called for callback processing. Let's take a look at it, ESRI. the structure of the request.
The structure of ESRI. Request is roughly as follows:
ESRI. Request ({
URL: "yoururl ",
Content: Params,
Callbackparamname: "Callback ",
Load: function (result ){
// Omitted
},
Error: function (error ){
// Omitted
});
}
This means that when the execution is successful, the function of the load object will be processed, and the function corresponding to error will be processed if the execution fails.
We can simulate this process by ourselves. The following is the server code:
Public class jsonptest: ihttphandler {public void processrequest (httpcontext context) {// get the callback function name string callback = context. request. querystring ["Callback"]; javascriptserializer JS = new javascriptserializer (); string a = context. request. querystring ["A"]; string B = context. request. querystring ["B"]; // JSON data stringbuilder STR = new stringbuilder (); context. response. contenttype = "application/JSON"; Js. serialize (New {message = callback, result = add (convert. todouble (A), convert. todouble (B)}, STR); context. response. write (callback + "(" + STR + ")");} public double add (double A, double B) {return a + B ;} public bool isreusable {get {return false ;}}}Client code. Here you can get the correct value.
Function callback (data ){
Alert (data. Result );
}
The simulation is to better understand the problem and only explain the problem. Of course, you may have a better method. Now many frameworks provide the jsonp method, so we don't have to go over it ourselves.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
