大前端—ajax、json和jsonp

一、json

json 是JavaScript Object Notation首字母的缩写，译为JavaScript对象表示法，这里说的json指JavaScript对象的一种数据格式。目前前后端都是用json这种数据格式来传送数据的。

JavaScript自定义对象：

var person = {
       name:"John",
       age:24,
       sex:male;
}

属性和值之间用’:’，不同属性之间用’逗号’，最后一个属性值以’分号’结束。

json数据格式：

{
   "name":"John",
   "age":24
}

json数据格式的属性名称和字符串值都需要用双引号引起来，注意：用单引号或者不用引号会导致读取数据错误。

二、ajax

Ajax技术的目的是让JavaScript发送http请求，与后台进行通信，从而获取数据和信息。
（1）特点：

1. 实现异步
   Ajax通信的过程并不会影响后续JavaScript的执行，因此可以实现异步；

2. 局部刷新
   局部刷新也叫“无刷新”，指整个页面不刷新，只是局部刷新；Ajax可以自己发送http请求，不用通过浏览器的地址栏，因此，页面整体不会刷新，Ajax获取到后台数据，更新页面显示数据的部分，然后完成了页面局部刷新。

3. 同源策略
   Ajax请求的页面或者资源必须只能是同一个域下面的资源，不能跨域请求，否则不能读取数据，这是基于安全方面的考量。如果需要跨域请求数据，则需要用到jsonp技术，jsonp利用script标签可以跨域链接资源的原理实现跨域请求数据。

（2）Ajax读取后台数据(json)代码块：

<script type="text/javascript">
		$(function(){


			$.ajax({
			//请求地址
			url:'data.json',
			//请求方式：get和post
			type:'get',
			//返回的数据格式是json
			dataType:'json'
			})
			//function()括号里面传的什么数据，下面的console.log()括号里就写什么数据，如下所示：
			.done(function(dat){
				$('#username').html(dat.name);
			    $('#userage').html(dat.age);
			})
			.fail(function(){
				alert('服务器超时啦')；
			})
		})	
	</script>

（3）Ajax读取后台数据(jsonp)代码块：

<script type="text/javascript">
		$(function(){
			$.ajax({
			//请求地址 data.js里的代码是 fnback({"name":"John","age":24});
			url:'js/data.js',
			//请求方式：get和post
			type:'get',
			//返回的数据格式是jsonp
			dataType:'jsonp',
			jsonpCallback:'fnback'
			})
			.done(function(dat){
				alert(dat);
			})
			.fail(function(){
				alert('服务器超时啦')；
			})
		})	
	</script>

注意：如果要开发jsonp的接口的话需要有jsonpCallback:XXX，且请求数据url的.js文件数据为XXX({“name”:“名字”,“age”:24}); （不要忘了后面的分号）