ajax and jsonp

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/LXJRQJ/article/details/86487516

The purpose is to enable javascript ajax technology to send http request, to communicate with the background, access to data and information. Ajax principle of the technique is an example xmlhttp objects, using the object to communicate with the background. Ajax process does not affect the execution of subsequent communications javascript, thereby asynchronous.

Synchronous and asynchronous
real life, synchronization refers to do several things at the same time, asynchronous refers to finish a job to do another thing, synchronous and asynchronous program is to swap the concept of real life, that is, program asynchronous refers to the real-life synchronization, program synchronization refers to the real-life asynchronous.

No partial refresh and refresh
ajax partial refresh can be achieved, also called non-refresh, refresh-free refers to the entire page does not refresh, only a partial refresh, you can send your own http ajax request, not through the browser address bar, so the whole page will not refresh, ajax get to the back-end data, update parts of the page data show that it did partial page refresh.

Origin policy
ajax request a page or resource is only following the same domain resources, it can not be resources to other domains, which is based on safety considerations in the design of ajax. Feature error prompt:

CAN not the Load the XMLHttpRequest https://www.baidu.com/ . No
. 'Access-Control-the Allow-Origin' header IS ON Present at The requested Resource
. Origin 'null' IS THEREFORE not allowed Access
$ .ajax to use
common parameters:
1, url request address
2, type request mode, the default is 'GET', as well as commonly used 'the POST'
. 3, provided dataType return data format, commonly used 'json' format may be set to 'HTML'
. 4, setting data transmitted to the data server
5, success setting request after a successful callback
6, error settings request failed callback
7, async set whether asynchronous, the default value is 'true', showing asynchronous

Previous wording:

$.ajax({
    url: 'js/user.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
    success:function(data){
        ......
    },
    error:function(){
        alert('服务器超时，请重试！');
    }
});

The new wording (recommended):

$.ajax({
    url: 'js/user.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
})
.done(function(data) {
    ......
})
.fail(function() {
    alert('服务器超时，请重试！');
});

jsonp
ajax can only request the same data or resources under a domain, sometimes need to request data across domains, you need to use jsonp technology, jsonp can request data across domains, its main principle is to use the script tag can link resources across domains features.

jsonp works as follows:

<script type="text/javascript">
    function aa(dat){
        alert(dat.name);
    }
</script>
<script type="text/javascript" src="....../js/data.js"></script>

A function is defined on the page, a reference to an external file js, js external file address may be an address different domains, external js file contents as follows:

aa({"name":"tom","age":18});

External js file calls the function defined on page parameter transfers the data into it.

Guess you like