Same Origin Policy:
For example, you are such www.xxxx.com, returned html page exists only in xxxxx js performed here at the time of execution when accessing a page, if there is another tab at the same time is www.yyyyy.com js execution in which only yyyyy return to this home page in the course of implementation.
When the browser loads js js will judge belongs 1 domain 2. 3. Protocol port
jsonp:
json is a data representation format, similar to xml of course, I am talking about is that they are worthy of similar data representation format, but the format is different implementations and, in this much to say.
jsonp = json + padding, why padding to increase, to be honest I did not quite understand, perhaps meaning that extend json format? .
jsonp for cross-domain requests, perfectly executed because the browser for html tags will not be cross-domain interception ( Cross-Domain ), but if you use the js ajax implemented, although the request is sent to the target address, but the corresponding parameters back It will be blocked, while the console will be given the information.
But if there is some cross-domain requests exist, or that we are to these requests on the white list, then you can request a jsonp way to achieve this is accessed using element node.
<script src="//cross-domain/xxxx？callback=test()"></script>
Cross-domain access destination address in this way.
Where the callback is required, that the name represents the callback function callback for jsonp service interface will be the interface callback parameters, and a callback function callback specified.
Of course, cross-domain requests of their own time to write back some trouble, such as dynamic access interface when writing a method to increase still have to delete the node, in order to prepare for the next request, would be more trouble, can be achieved by a number of preceding extension will a lot easier, such as jquery, document your own Baidu.
So jsonp personal understanding is a technical solution for cross-domain requests data interface.
3. With regard to blocking event
Commonly used are:
stopPropagation, stopImmediatePropagation : prevents the event up / down spread, attention is to stop up / down, but not stop the spread of itself, such as in div1 nested div2, the default is the bubbling event, div2 bound 2 events, use stopPropagation div2 in the first event in the bound,
So div2 of events after the implementation, div1 as a parent node will not continue, but div2 bound second event would be executed.
Trigger mechanism according to the order of events is bound to the decision, in order to bind the default is 1, 2, and we do not want to continue to spread down when the trigger event 1, including the binding event itself 2, you can use stopImmediatePropagation way to prevent continued propagation.
let p = document.querySelector('p');
p.addEventListener('click',function () {
// event.stopImmediatePropagation()
event.stopPropagation()
alert("p")
},false)
p.addEventListener('click',function () {
event.stopImmediatePropagation()
alert("p2")
},false)
The other is the return, the last line of the code execution will not return the up / down spread in an anonymous function, but the same does not prevent the spread of the event itself.
Then there is a preventDefault method, is to prevent the event itself trigger mechanism, it does not prevent the spread of the event, such as to have a form, which is an element input type submit, if you use preventDefault then, will not address the default request form action in .
The following example, a click event tag to a binding element, preventing the triggering event itself, a specified url anchor will not jump.
let a = document.querySelector('a');
a.addEventListener('click',function () {
event.preventDefault();
},false)
// 元素 <a href="http://www.baidu.com">百度</a>