Ajax与JSONP详解-优快云博客

ajax目的是让JavaScript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化的xmlhttp对象，使用此技术与后台通信。ajax通信的过程不会影响后续JavaScript的执行，从而实现异步。

局部刷新和无刷新

ajax可以实现局部刷新，也叫作无刷新，无刷新是指整个页面不刷新，只是局部刷新。ajax可以发送自己的http请求，不通过浏览器的地址栏，所以整个页面不会刷新，ajax获取到后台的数据，刷新页面现实数据的部分，就做到了页面的局部刷新。

json数据包

{
  "name":"tom",
  "age":18,
  "info":["male","student"]
}

ajax

获取json数据报，将name和age加到span块内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
            url:'data.json',
            type:'get',
            dataType:'json'
        })
            .done(function (data) {
            $("#username").html(data.name);
            $("#userage").html(data.age);
        })
            .fail(function () {
                alert("服务器超时");
            })
        })
    </script>
</head>
<body>
    <p>姓名：<span id="username"></span></p>
    <p>年龄：<span id="userage"></span></p>
</body>
</html>

jsonp

ajax只能请求同一个域下的数据或者资源，有时候需要跨域请求数据，就需要用到jsonp技术。jsonp可以跨域请求数据，他的原理主要是利用了script标签可以跨域链接资源的特性，jsonp和ajax原理完全不一样，不过jquery将他们封装成同一个函数。

$.ajax({
	url:"js/data.js",
	type:'get',
	dataType:'jsonp',
	jsonpCallback:'fnBack'
})
.done(function(data){
	alert(data.name);
})
.fail(function(){
	alert('服务器超时');
})
//data.js里面的数据：fnBack({"name":"tom","age":18})