json

json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。

javascript对象字面量：

var tom = {
name:'tom',
age:18
}

json格式的数据：

{
"name":'tom',
"age":18
}

与json对象不同的是，json数据格式的属性名称需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

json的另外一个数据格式是数组，和javascript中的数组字面量相同。

['tom',18,'programmer']

ajax

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

同步和异步
现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。

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

同源策略
ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。特征报错提示：

XMLHttpRequest cannot load https://www.baidu.com/. No
'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.

$.ajax使用方法

常用参数：
1、url 请求地址
2、type 请求方式，默认是'GET'，常用的还有'POST'
3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是'true'，表示异步

以前的写法：

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

新的写法(推荐)：

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

幻灯片

html结构很简单，两个列表，一个代表图片列表，一个是右下角序号列表。

<pre><div id="box">
<ul class="list">
<li><img src="01.jpg" width="490" height="170" /></li>
<li><img src="02.jpg" width="490" height="170" /></li>
<li><img src="03.jpg" width="490" height="170" /></li>
<li><img src="04.jpg" width="490" height="170" /></li>
<li><img src="05.jpg" width="490" height="170" /></li>
</ul>
<ul class="count">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div></pre>

布局的大致想法是图片全部绝对定位重合，透明度为1，右下角序号给选中的添加样式。样式都很简单。

关于JS方面，自己还是捉摸了很久，刚开始实现时，当鼠标移入右下角对应序列号时图片能够准时切换，但是鼠标移出时便不能自动播放，关于setInterval和clearInterval自己的处理还是不是很好。借鉴了网上的案列之后，具体的实现逻辑简单为，先写一个图片的展现方法，和鼠标移出图片时的定时函数。这样可以在事件中直接调用，值得注意的一点就是在鼠标移入时，记得清除定时器。

这是图片展示函数，参数为当前的展示的index。先让所有图片透明度为0；所有下标没有样式，然后给当前的加上样式，透明度为1；

<pre> function show(a){ for(var i=0;i<oLi.length;i++){
oLi[i].style.opacity= 0;
oImg[i].className = '';
}
oLi[a].style.opacity = 200;
oImg[a].className = 'current';
}</pre>

然后写一个鼠标移除时的定时器，图片自动轮播函数：

<pre> function autoplay(){
time = setInterval(function(){
b++; if(b>=oImg.length){
b=0;
}
show(b);
},1000);
}
autoplay();//自动运行</pre>

最后是鼠标移入移出事件：

<pre> for(var i=0;i<oImg.length;i++){
oImg[i].index = i;
oImg[i].onmouseover=function(){
clearInterval(time);
show(this.index)
}
oImg[i].onmouseout=function(){
autoplay();
}
}</pre>