ajax

来源：互联网发布：淘宝学习zz px 编辑：程序博客网时间：2024/06/17 22:05

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>

阅读全文

0 0