ajax

1.ajax，asynchronous javascript and xml，用来与服务器交换数据，提高用户体验，减少网络数据的传输量。

2.ajax中的回调函数类似于setTimeout中的定时函数，先定义后执行。

3.登录

<script type="text/javascript">
   window.onload = function(){
      var btn = document.getElementById('btn');
      btn.onclick = function(){
         var username = document.getElementById('username').value;
         var password = document.getElementById('password').value;
         // 创建对象;
         var xhr = null;
      //IE情况下;
         if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
         }else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
         }

         //初始化;
         var url = 'check.php?username='+username+"&password="+password;
         xhr.open('get',url,true);

         xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
               if(xhr.status == 200){
                  var data = xhr.responseText;
                  if(data == 1){
                     document.getElementById('show').innerHTML = '用户名或密码错误';
                  }else if (data == 2){
                     document.getElementById('show').innerHTML = '登录成功';
                  }
               }
            }
         }

         xhr.send(null);
         }
   }
</script>

<?php 
$username = $_GET['username'];
$password = $_GET['password'];

if($username == 'admin' && $password == '123'){
   echo 2;
}else{
   echo 1;
}
?>

4.封装ajax

function ajax(data){
   // 创建xhr对象;
   var xhr = null;
   if(window.XMLHttpRequest){  // 标准浏览器下;
      xhr = new XMLHttpRequest();
   }else{
      xhr = new ActiveXObject('Microsoft.XMLHTTP');
   }

   // 准备发送前的配置;
   var type = data.type == 'get'?'get':'post';
   var url = '';
   if(data.url){
      url = data.url;
      if(type == 'get'){
         url += '?' + data.data + '&_t=' + new Date().getTime();
      }
   }
   var flag = data.asyn == 'true'?'true':'false';
   xhr.open(type,url,flag);

   // 执行发送的动作;
   if(type == 'get'){
      xhr.send(null);
   }else if(type == 'post'){
      xhr.setRequsetHeader('Content-Type','application/x-www-form-urlencoded');
      xhr.send(data.data);
   }


   // 指定回调函数;
   xhr.onreadystatechange = function(){
      if(this.readyState == 4){
         if(this.status == 200){
            if(typeof data.success == 'function'){
               var d = data.dataType == 'xml'?xhr.responseXML:xhr.responseText;
               data.success(d);
            }
         }else {
            if(typeof data.failure == 'function'){
               data.failure();
            }
         }
      }
   }
}

5.jQuery的ajax

$.ajax({
   type: 'get',
   async: true,
   url: url,
   dataType: 'jsonp',
   jsonp: 'cb',
   jsonpCallback: 'callback',
   success: function(data){

   },
   error: function(){
      console.log("fail");
   }
});

6.解决ajax跨域的三种方式：

    跨域：不同的域之间相互请求数据。

   1) iframe，用来嵌套一个网页；

   2) jsonp（最常用）：

       a. script的src方式加载js文件；
       b. 加载的js文件内进行函数调用；
       c. 数据以函数参数的形式传递；
       d. 回调函数中获取参数数据。；

   3) 服务器端解决：

// 指定允许其他域名访问  解决跨域的问题
header('Access-Control-Allow-Origin:*');

7.三级联动

<script type="text/javascript">
   $(function() {
      //获取列表数据的通用方法
      function getList(code,flag,callback){
         $.ajax({
            url:'./data.php',
            type:'get',
            dataType:"jsonp",
            data:{citycode:code,flag:flag},
            success:callback
         });
      }
      //获取地区信息的回调函数
      var area = function(data){
         $.each(data,function(i,element){
            var op = $("<option></option>").attr("value",element.code).append(element.name);
            $("#area").append(op);
         });
      }
      //获取市信息的回调函数
      var city = function(data){
         $.each(data,function(i,element){
            var op = $("<option></option>").attr("value",element.code).append(element.name);
            $("#city").append(op);
         });
         //判断是否为直辖市
         if(data.length == 1){
            var citycode = $("#city").children("option").eq(0).attr("value");
            getList(citycode,3,area);
         }

      }
      //获得省份信息的回调函数
      var province = function(data){
         $.each(data,function(i,element){
            var op = $("<option></option>").attr("value",element.code).append(element.name);
            $("#province").append(op);
         });
         //默认北京市
         getList('110000',2,city);
         getList('110100',3,area);
      }
      
      //发送请求获取省份信息
      getList(0,1,province);

      //给省份信息设置选择事件
      $("#province").change(function() {
         $("#city").children("option").remove();
         $("#area").children("option").remove();
         var pcode = $(this).val();
         getList(pcode,2,city);
      });
      
      //给省份信息设置选择事件
      $("#city").change(function() {
         $("#area").children("option").remove();
         var citycode = $(this).val();
         getList(citycode,3,area);
      });

   });
</script>

8.动态添加评论

<script type="text/javascript">
   $(function(){
      $('#more').click(function(){
         var last = $('#last').val();
         var url = './data.php?last='+last+'&amount=2';
         queryComment(url);
      });
   });

   function queryComment(url){
      $.ajax({
         type : "get",
         async: true,
         url : url,
         dataType : "json",
         success : function(data){
            if(data == 1){
               $('#more').html('没有更多评论!').unbind('click');
               return false;
            }
            $.each(data,function(i,element){
               var nickname = element.nickname;
               var content = element.content;
               var time = element.time;
               var imgpath = element.imgpath;
               var info = $('<li class="comment"><div class="left"><img src="'+imgpath+'"></div><div class="right"><div>'+nickname+'</div><div></div>'+content+'</div></li><hr>');
               $('#contentList').append(info);
            });
            var now = parseInt($('#last').val()) + 2;
            $('#last').val(now);
         },
         error:function(){
             console.log('fail');
         }
      });
   }
</script>

9.get和post：

    在使用的方向下：大多数情况用get；有加密性或隐私性的数据，或传递数据量比较大的时候，用post。

    在监视和请求的方向下：get在给服务器传递数据时，数据在地址栏中，在请求过程中没有content-type；post在传递数据时，数据都是看不到的，数据都在请求当中，在请求数据时加请求头setRequestHeader，在请求过程中有content-type，用来告诉服务器，发给服务器的数据格式是和url参数一样的格式。

10.

<script id="tpl" type="text/html">
    <% for(var i = 0; i < data.length; i++){ %>
        <div class="all">
            <h2><%= data[i].title %></h2>
            <p class="intro"><%= data[i].imtro %></p>
            <% for(var j = 0; j < data[i].albums.length; j++){ %>
                <img src="<%= data[i].albums[j] %>">
            <% } %>
            <p class="zl">主料:<%= data[i].ingredients %></p>
            <p class="fl">辅料:<%= data[i].burden %></p>
            <div class="steps">
                <% for(var k=0; k< data[i].steps.length; k++) { %>
                <em class="xh"><%= k+1 %>.</em>
                <div class="c">
                    <p><%= data[i].steps[k].step %></p>
                    <p><img src="<%= data[i].steps[k].img %>"></p>
                </div>
                <% } %>
            </div>
        </div>
        <hr>
    <% } %>
</script>