小试牛刀——AJAX课程

一.AJAX原理和封装

1.服务器环境的搭建

省略...

2.第一个ajax程序
  • 什么是Ajax
    Asynchronous Javascript and XML(异步的javascript和XML)
    -节省用户操作,时间,提高用户体验,减少数据请求
    -传输获取数据
  • 使用Ajax
    使用ajax获取某一个文本文件的内容
  • Ajax过程详解
    创建对象XMLHttpRequest()
    • Date()对象
      -ActiveXObject('Microsoft.XMLHTTP')
3.ajax流程对象的创建和兼容
window.onload=function(){
    var oBtn=document.getElementById("btn");
    oBtn.onclick=function(){
        /*1.创建一个ajax对象 ie6一下用的是new AcitveXObject('Mircosoft.XMLHTTP')*/
        var xhr=null
        if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else{
            xhr=new ActiveXObject("Microsoft.XMLHTTP")
        }
        /*
            try{
                xhr=new XMLHttpRequest();
            }catch(e){
                xhr=new AcitveXObject("Mirosoft.XMLHTTP")
            }
        */
        /*写入地址*/
        xhr.open("get","1.txt",true);
        /*发送*/
        xhr.send();
        /*监听*/
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4){
                alert(xhr.responseText)
            }
        }

    }
}
4.ajax流程-open方法和表单

表单:数据的提交
action : 数据提交的地址,默认是当前页面
method : 数据提交的方式,默认是get方式
1.get
把数据名称和数据值用=连接,如果有多个的话,那么他会把多个数据组合&进行连接,然后把数据放到url?后面传到指定页面
url长度限制的原因,我们不要通过get方式传递过多的数据
2.post
理论上无限制,
enctype : 提交的数据的格式,默认application/x-www-form-urlencoded

window.onload=function(){
    var oBtn=document.getElementById("btn");
    oBtn.onclick=function(){
        /*1.创建一个ajax对象 ie6以下用的是new AcitveXObject('Mircosoft.XMLHTTP')*/
        var xhr=null
        if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else{
            xhr=new ActiveXObject("Microsoft.XMLHTTP")
        }
     
        /*提交请求*/
        /*
        * open方法
        * 参数:
        *       1.打开方式
        *       2.地址
        *       3.是否异步
        *           异步:非阻塞 前面的代码不会影响后面的代码执行
        *           同步:阻塞 前面的代码会影响后面的代码执行 false 一般情况下是不会用同步的直接写在监听里就好了
        * */
        xhr.open("get","1.txt",true);
        /*发送请求*/
        xhr.send();
        /*监听等待服务器返回内容*/
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4){
                alert(xhr.responseText)
            }
        }

    }
}
5.ajax流程-数据的获取
请求状态监控
  • onreadystatechange
    • readyState 属性 : 请求状态
      0 (初始化) 还没有调用open() 方法
      1 (载入) 已调用send()方法, 已收到全部响应内容
      2 (载入完成) send()方法完成,已收到全部响应内容
      3 (解析) 正在解析响应内容
      4 (完成) 响应内容解析完成,可以再客户端调用了
    • status属性 : 服务器(请求资源)的状态
    • 返回的内容
      -responseText :返回以文本形式存放的内容
      -responseXML : 返回XML形式的内容
      /*监听等待服务器返回内容
       * readyState : ajax工作状态
       * responseText : ajax请求的内容就被存放到这个属性下面 类型是字符串类型
       * on readystate change : 当readyState改变的时候触发
       * status : 服务器状态---http状态码
       * */
       xhr.onreadystatechange=function(){
           if(xhr.readyState===4){
               if(xhr.status==200){
                   alert(xhr.responseText)
               }else{
                   alert(xhr.status)
               }
           }
       }
6.应用中get和post的区别处理

get请求

oBtn.onclick=function(){
    var xhr=null
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else{
        xhr=new ActiveXObject("Microsoft.XMLHTTP")
    }
    /*
    * 1.解决缓存问题 在url?后边连接一个随机数 时间戳
    * 2.乱码,编码encodeURI
    * */
    xhr.open("get",'get.php?username='+encodeURI("名字")+'&age=30&'+new Date().getTime(),true);
    xhr.send();
    xhr.onreadystatechange=function(){
        if(xhr.readyState===4){
            if(xhr.status==200){
                alert(xhr.responseText)
            }else{
                alert(xhr.status)
            }

        }
    }

}

post请求

oBtn.onclick=function(){
    var xhr=null
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else{
        xhr=new ActiveXObject("Microsoft.XMLHTTP")
    }
    xhr.open("post",'post.php',true);
    //post方式,数据放在send()里作为参数发送
    //告诉后端发送数据的类型 post没有缓存问题 无需编码
    xhr.setRequestHeader("content-type",'application/x-www-form-urlencoded');
    xhr.send('username=leo&age=30');
    xhr.onreadystatechange=function(){
        if(xhr.readyState===4){
            if(xhr.status==200){
                alert(xhr.responseText)
            }else{
                alert(xhr.status)
            }

        }
    }

}
7.ajax获取数据的处理和实例

注:严格的Json的key值一定要用双引号括起来
JSON.stringify() 可以把一个对象转化成对应字符串
JSON.parse() :可以把字符串转成对应对象

实例:ajax的封装及实例

//php:
    header("content-type:text/html;charset='utf-8'");
    error_reporting(0);
  $news=array(
    array('title'=>'法餐烹饪小知识 —— 法式煎蛋','date'=>'2017-1-4'),
    array('title'=>'自抱自泣！早知道我一个人住的小公寓就应该这样装！','date'=>'2017-2-5'),
    array('title'=>'坚持写手账二十一天，我收获了什么','date'=>'2017-3-6'),
    array('title'=>'过日子要有技术含量：这些东西让你的衣食住行更有质量','date'=>'2017-6-6'),
    array('title'=>'开胃易消化、补钙解便秘！宝宝吃惯了粥，换成这个更爱吃！','date'=>'2017-8-25'),
    array('title'=>'大衣指南|跟随时尚的小妖精来学穿大衣','date'=>'2017-9-12'),
    array('title'=>'情人节特辑，淘宝上有哪些值得你收藏的礼物','date'=>'2017-10-22'),
    array('title'=>'治疗失眠症的这4个方法，希望对你有用','date'=>'2017-11-22')
    
  );
  echo JSON_encode($news);
//js:
function ajax(method,url,data,success){
     var xhr=null
        if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else{
            xhr=new ActiveXObject("Microsoft.XMLHTTP")
        }
        if(method=='get'&& data){
            url+='?'+data;
        }
         xhr.open(method,url,true);
        if(method=='get'){
            xhr.send();
        }else{
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            xhr.send(data);
        }
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4){
                if(xhr.status==200){
                 success&&success(xhr.responseText);
                }else{
                    alert(xhr.status)
                }
            }
        }
}
window.onload=function(){
    var oBtn=document.getElementById("btn");
    oBtn.onclick=function(){
       ajax('get','get.php','',function(data){
            var data=JSON.parse(data);
            var oUl=document.getElementById("ul");
            var html="";
            for(var i=0;i<data.length;i++){
                html+='<li><a href="">'+data[i].title+' '+data[i].date+'</a></li>';
            }
            oUl.innerHTML=html;
       });      
     }
}

二.AJAX实例:留言板&瀑布流

瀑布流案例 :

*{margin:0;padding:0;}
#ul{width:1080px;margin:100px auto 0;}
li{width:247px;list-style:none;float:left;margin-right:10px;}
li div{border:1px solid #000;padding:10px;margin-bottom:10px;}
li div img{width:225px;display:block;}

<ul id="ul">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

function ajax(method,url,data,success){
    var xhr=null
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else{
        xhr=new ActiveXObject("Microsoft.XMLHTTP")
    }
    if(method==='get'&& data){
        url+='?'+data;
    }
    xhr.open(method,url,true);
    if(method==='get'){
        xhr.send();
    }else{
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.send(data);
    }
    xhr.onreadystatechange=function(){
        if(xhr.readyState===4){
            if(xhr.status===200){
                success&&success(xhr.responseText);
            }else{
                alert(xhr.status)
            }
        }
    }
}

window.onload=function(){
    var oUl=document.getElementById("ul");
    var aLi=oUl.getElementsByTagName("li");
    var iLen=aLi.length;
    var iPage=1;
    var onOff=true;
    getList();
    function getList(){
        ajax('get','getPics.php','cpage='+iPage,function(data){
            var data=JSON.parse(data);
            if(!data.length){//后续没有数据了
                return;
            }
            for(var i=0;i<data.length;i++){
                var _index=getShort();
                var oDiv=document.createElement("div");
                var oImg=document.createElement("img");
                oImg.src=data[i].preview;

                oImg.style.height=data[i].height*(225/data[i].width)+"px";
                oDiv.appendChild(oImg);
                var oP=document.createElement("p");
                oDiv.appendChild(oP);
                aLi[_index].appendChild(oDiv);
            }
            onOff=true;
        })
    }
    window.onscroll=function(){
        var _index=getShort();
        var oLi=aLi[_index];
        var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
        if(getTop(oLi)+oLi.offsetHeight<(document.documentElement.clientHeight+scrollTop)){
            if(onOff){
                onOff=false;
                iPage++;
                getList();
            }
        }
    }
    function getShort(){
        var index=0;
        var ih=aLi[index].offsetHeight;
        for(var i=0;i<iLen;i++){
            if(aLi[i].offsetHeight<ih){
                index=i;
                ih=aLi[i].offsetHeight;
            }
        }
        return index;
    }
    function getTop(obj){
        var iTop=0;
        while(obj){
            iTop=obj.offsetTop;
            obj=obj.offsetParent;
        }
        return iTop;
    }

}

//php内容
<?php
header('Content-type:text/html; charset="utf-8"');
/*
API:
    getPics.php

        参数
        cpage : 获取数据的页数
*/
$cpage = isset($_GET['cpage']) ? $_GET['cpage'] : 1;

$url = 'http://www.wookmark.com/api/json/popular?page=' . $cpage;

$content = file_get_contents($url);
$content = iconv('gbk', 'utf-8', $content);

echo $content;

?>

三.AJAX跨域解决方案:JSONP

1.问题的回复及跨域限制问题
  • 跨域的问题
    域:域名
    跨域请求(访问):一个域名下的文件请求另一个域名下的资源,就产生了跨域
  • 跨域的解决
    jsonp: json padding
2.跨域的解决

JSONP: JSON with Padding
1.script标签
2.用script标签加载资源是没有跨域问题的
在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据),函数里面利用这个参数做一些事情
然后需要的时候,通过script标签加载对应远程文件资源,当远程的文件资源被加载进来的时候,就会去执行我们前面定义好的函数,并且把数据当做这个函数的参数传入进去
比如:点击按钮时 创建script 写入地址 append进去

实例:百度下拉实例

<style>
        #q{width:300px;height:30px;padding:5px;border:1px solid #f90;font-size:16px;}
        #ul{border:1px solid #f90;width:310px;margin:0;padding:0;display:none;}
        li a{line-height:30px;padding:5px;text-decoration:none;color:#666;display:block;}
        li:hover{background:#f40;}
</style>
<input type="text" id="q">
<ul id="ul"></ul>

<script>
    function miaov(data){
        var oUl=document.getElementById("ul");
        var html="";
        if(data.s.length){
           for(var i=0;i<data.s.length;i++){
               html+='<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+data.s[i]+'</a></li>'
           }
           oUl.innerHTML=html;
            oUl.style.display='block';
        }else{
            oUl.style.display="none";
        }
    }
    window.onload=function(){
        var oQ=document.getElementById("q");
        var oUl=document.getElementById("ul");
        oQ.onkeyup=function(){
            if(this.value!=""){
                var oScript=document.createElement('script');
                oScript.src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+this.value+"&cb=miaov";
                document.body.appendChild(oScript);
            }
        }
    }
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,992评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,212评论 3赞 388
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,535评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,197评论 1赞 287
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,310评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,383评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,409评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,191评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,621评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,910评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,084评论 1赞 342
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,763评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,403评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,083评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,318评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,946评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,967评论 2赞 351

推荐阅读更多精彩内容

  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,644评论 18赞 139
  • Ajax的运用
    AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,190评论 0赞 7
  • JavaScript 通信 / Ajax
    Ajax 表单提交 在HTML中提供了表单提交的功能，我们可以通过表单把数据从前台提交到后台 在HTML的DOM中...
    羊烊羴阅读 712评论 0赞 4
  • MonkeyRunner启动脚本录制功能
    创建文件 recorder.py 1.把recorder.py放到sdk的tools目录2.cd到tools目录c...
    Mixqum阅读 264评论 0赞 0
  • 他们存在着（序）
    现在的我是个实习护士，每天做着关乎生命的工作，极尽耐心、爱心和责任心去守护生命，关怀心灵 。每天不断扩充着自己...
    郑漂亮yeol阅读 168评论 0赞 0