ajax详解

时间 2019-11-17

标签 ajax 详解栏目 Ajax 繁體版

原文原文链接

　一,js中的ajaxphp

　ajax(Asynchronous Javascript And XML)即为异步的JavaScript和XML,顾名思义,这个技术是和咱们当前页面刷新无关的,由于它是异步的,在没有ajax的时候,咱们若是去请求数据库中的数据就要将当前页面进行刷新,最经常使用的你能够想到咱们的表单验证部分,之前都是填完了全部的表单去一次性验证,像这样的注册界面,你填错了就要刷新页面从头再来,因此,如今有了ajax你能够填一个表格就进行一次验证,并且页面并不会刷新.html

　　对于ajax,他的核心技术是对象,它的整个做用过程实际上是当前页面继续工做,它会本身开一个时空隧道和当前界面一块儿工做,就行两个平行空间同样,它的整个过程能够总结为先建立XMLHttpRequest对象,而后链接服务器,发送请求,最后接受服务器发送过来的数据,好了,XMLHttpRequest是一个可让咱们前端和后端链接起来的十分神奇的对象,咱们首先来建立一个XMLHttpRequest对象前端

 var xhr =null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject('Microsoft.XMLHTTP');

        }
//这里进行的是针对IE浏览器的兼容性处理,在IE中,咱们的xmlhttprequest对象就变成了activeobject,并且里边的参数是不能少的,IE就是这样倔强

　　当咱们拥有了一个xhr实例后,咱们就能够进行向数据库中发送请求,这里咱们先来看一下咱们须要用的方法,open()方法是创建前端到服务器的请求,而send方法是向服务器发送请求,也就是说,当咱们在叫外卖的时候,咱们用的美团就像是open()方法,创建咱们和店家的联系,而快递小哥就是咱们的send()方法,他将咱们的美味给咱们送过来,这里咱们先用get方法作一个示例,在下一块咱们再区看一下咱们的两种请求方法get和se的区别:ajax

var url ="index.php?id=1";
xhr.open('get',url,'true');//open中有三个参数,第一个参数用来指定使用get仍是post方式提交,第二参数是指定要发送的url地址,第三个参数指定是否使用异步,第三个参数默认是true;
xhr.send();

　　这是咱们已经使用get方式向index.php发送了一个请求,咱们穿过去的参数为"id=1";那么咱们先来看一下和get和post区别,get和post都是用来进行发送数据的方式,从字面意思来看,get(获得)是从数据库获得东西的请求方式,而post(发送)是要给服务器传送数据的,并且post方式传送数据是通过加密的,post传送的数据放在请求体里边,而get方式只有请求头,没有请求体,因此get也能够传给数据库少许数据,发送的方式是在url地址后边用?作表示,若是有多个参数用&隔开,咱们先来看一下post的用法:chrome

var url = "index.php";
var data = "id=1";
xhr.open('post',url,true);
xhr.setRequestHeader('Contenttype','application/x-www-form-urlencoded')//post请求须要设置请求头信息
xhr.send(data);//在这里将数据发送过去,

　　那么如今咱们已经简单的向服务器端发送了请求,咱们正常的一个流程是,服务器会根据咱们的参数或者是它自身运算的结果来给咱们返回数据,这里咱们并非必定要发送给数据库参数的,举个例子,服务器里有一个数组["0":"苹果","1":"橘子","2":"香蕉"],如今若是咱们不传参,服务器会将这一个数组都return给咱们,若是咱们穿一个id=1,这时返回的数据就是橘子,咱们要理解的就是,咱们传的参数和数据对于咱们得到数据只是一个辅助做用,真正起做用的仍是服务器内部的结构,那么咱们如今发送了请求后,咱们面临一个问题,咱们怎么判断请求是否发送成功以及服务器时候处理了咱们的请求,还有若是服务器响应了,它返给咱们的数据咱们该怎么去获取呢?数据库

　　好的,让咱们来看一下,xhr实例上有一个readystate属性,这个属性的表明着当前xmlHttpRequest的状态:json

　　　　0:请求没有发出(在调用open以前)后端

　　　　1:请求已经创建但尚未发出api

　　　　2:请求已经发出跨域

　　　　3:请求正在处理当中

　　　　4:请求已经被服务器处理完毕,相应准备就绪

　　每当readystate状态改变的时候,就会调用onreadystatechange()这个函数,因此咱们能够在onreadystatechange进行相应状态的判断以及相应返回数据的获取,当readystate为4时,表明着咱们的请求被服务器成功的执行,但咱们还须要判断,咱们的须要的数据是否成功被返回了呢?咱们还有一个status属性,而这个status也有不少的状态码表明着不一样的响应状态,其中200表明着响应成功,而且将响应的数据返回到了前端中:

xhr.onreadystatechange = function(){
     if(xhr.readystate == 4){//请求已经成功被处理
         if(xhr.status == 200){//成功的从服务器获得了响应
             //这里进行处理返回的数据
        }
    }
}

　　获得了响应以后,responseText表示字符串形式的相应数据,responseXML表示获取XML形式的响应数据,getAllResponseHeader():获取全部的响应报头,这里咱们来完整的写一个ajax请求:

 var xhr =null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');

    }
    var url ="index.php?id=1";
    xhr.open('get',url,'true');//open中有三个参数,第一个参数用来指定使用get仍是post方式提交,第二参数是指定要发送的url地址,第三个参数指定是否使用异步,第三个参数默认是true;
    xhr.send();

    xhr.onreadystatechange = function(){
        if(xhr.readystate == 4){//请求已经成功被处理
            if(xhr.status == 200){//成功的从服务器获得了响应
                   alert(responseText);
                }
        }
    }相应的后端会在后边用php实现一个小的demo

二,XML和json

　　当咱们完成了发送请求而且从后端获取了数据后,咱们应该再进一步的去思考,那么我能够指定从后端传过来的数据吗?那么接下来就出现了咱们的json和XML数据格式,这两种都是咱们进行前端和后端进行传送数据的格式,那么咱们先来看一下XML,XML数据其实你也能够看作咱们的html标签,只不过它是咱们能够自定义的标签,你能够给它的标签名取的颇有意义,那样就会很方便你去使用:

<china>
    <province name='河南'>
     <city>郑州</city>
    </province>
    
</china>
//这就是一个简单的XML格式的数据,咱们对于这样的数据进行操做的时候可使用js操做DOM对象的方法,
//xml数据必须有一个根节点

　　另一种常用的数据格式就是json了,json是一种独立于语言的数据格式,就是说它是能够在不少种语言中使用的,不限定于某一个特定的语言,并且它相较于xml来讲代码量较小,并且易于解析,xml就有些数据量庞大解析不便了,可是碍于json出现的较晚,因此如今大部分人仍是使用的xml,无奈与不少后端数据都是用xml存储,json的格式有些相似于咱们的JavaScript中的对象字面量:

{"name":"james",
  "hobby":"basketball",
    "son" : {"littleson":"er","bigson":"san"}
}//这种就是一个简单的json格式数据,json数据代码量较小,可是可读性来讲
仍是xml看着比较顺眼,可是人看着不顺眼的代码块偏偏是机器最喜欢的

　　获得了数据,咱们还须要去解析一下才可以使用,相较于xml有些dom同样的解析方法,xml的解析在js中最长用的解析方法就是json.parse()了,而将js对象转化为json对象咱们使用json.stringify(),固然了,json和xml的区别还有不少,这里我献上一个前辈的总结,很详细的一个总结: http://www.cnblogs.com/SanMaoSpace/p/3139186.htm

三,ajax在jQuery中

　　那么咱们以前已经看了ajax在js中的应用,jQuery号称是js的最强悍的一个封装库,怎能没有ajax的封装呢?咱们先来简略的看一下jQuery源码中对于ajax的封装:

//它的大概位置在七千行左右
jQuery.extend({

    ajax: function( url, options ){}
});
//从这个大概形式中,咱们能够看得出来,ajax时封装在jQuery的工具方法中,是在jQuery上直接封装的,因此调用的时候直接使用jQuery这个函数就行,因此咱们对于它的调用就是$.ajax();

　　那么咱们仍是写一个简单的post请求方式在jQuery中的应用:

 $.ajax({
                    type:"post",  //请求方式
                    url:"a.php", //服务器的连接地址
                    dataType:"json", //传送和接受数据的格式
                    data:{
                        username:"james",
                        password:"123456"
                    },
                    success:function(data){//接受数据成功时调用的函数
                       console.log(data);//data为服务器返回的数据
                    },
                    error:function(request){//请求数据失败时调用的函数
                        alert("发生错误:"+request.status);
                    }
});

有了post请求方式的例子,想必get方式的写法你们也不在话下,看着jQuery的例子,是否是感受很简单呢,不少兼容性的处理jQuery都已经帮咱们作好了,就是这个feel.

四,跨域请求

　　在上边的例子中,咱们使用ajax请求的都是在本地和咱们同源的文件,由于JavaScript在设计时出于安全方面的考虑,不容许跨域请求,那么什么状况才算是跨域呢?

　　上边的就是咱们的不一样源的状况,遇到这种状况,再去使用上边所讲的方式就不行了,那么咱们该怎样去解决跨域请求的问题呢?JSONP(JSON with Padding)是 JSON 的一种“使用模式”，可用于解决主流浏览器的数据访问问题,由于html的<script>元素标签能够从其余来源动态的加载数据,因此咱们能够利用<script>标签来实现跨域请求,这种方式就成为jsonp,固然了,jsonp和json可不是一回事,json是数据的一种传输格式,而jsonp是一种跨域请求方式,简单的理解就是:

<html>
<body>
    <script src='test.js'></script>
</body>
</html>
//script中的src没有同源限制,它能够加载其余任意文件.而jsonp利用的就是这一个功能展开的

对于jsonp这种跨域请求方式,咱们首先先来写一个例子,而后再根据这个例子去慢慢的介绍:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp</title>
</head>
<body>
<script src="http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=weather&code=131111"></script>
//这是360天气的一个天气预报的一个api接口,

</body>
</html>

　　当咱们运行上边例子后,在chrome浏览器中打开开发者模式->点击network->查看请求包->点击response,这时咱们能够查看到:

　　是的这时候远方的数据库中向咱们返回了一大串数据,仔细观察的话,不难发现,这一串数据的格式就是weather( 数据 );咦,这不是一个weather函数调用吗?是的,没错,咱们的数据库向咱们返回的就是一个函数调用,在看一下,咱们script中的url地址后边的参数_jsonp=weather,咱们将它改成tianqi发现返回的是一个tianqi().哦,原来_jsonp参数是指定服务器返还给咱们的函数名,那么函数中的参数就是服务器返还给咱们的数据,那么咱们也发现此时浏览器已经报错了:

　　那么也就是说咱们的代码中没有weather这个函数,加上上边的讲解,咱们这时应该去直接的说一下它的运行机制了,执行完script中的跨域调用后,会直接调用weather函数,因此这时候咱们要再代码中写一个为weather函数让script来执行,那么weather函数中的参数就是咱们要的数据,咱们这时就能够在weather函数中直接使用咱们的数据了,这里还要说明一点,jsonp只有get请求方式,也就是传参都要再url后边,并且其中的数据传输格式都为json,

<script>
    function weather(data){//回调函数
        console.log(data);
    }
</script>
<script src="http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=weather&code=111111"></script>

这时咱们就能够看到结果:

　　在这里咱们使用jsonp调用数据时,咱们须要先去了解一下后台数据的格式,由于咱们要去传一些参数进行获取数据,因此前端后端是不分家的,那么咱们当天也可使用动态加载script标签的方法来进行点击按钮获取数据

 function createScript(){
        var script = document.createElement('script');
        var url    = "http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=weather&code=";
        script.src = url+params;
        document.body.appendChild(script);
    }//使用这个函数就能够动态的加载数据了

　　那么下边咱们来看一下jQuery中jsonp的使用:

   $.ajax({
                type:'get',
                url:天气预报接口,
                async:'true', // 是否为异步调用
                dataType:'jsonp', 指定数据传输方式
                jsonp:'jsoncallback',     //回调函数名的key值 可省略
                jsonpCallback:'XBox',       //回调函数的函数名 可省略
                success:function(data){
                   //成功后执行的函数,data就是咱们要获取的函数值
                },
                error  :function(){
                     //失败时执行的函数
               }

　　得到数据咱们能够显示在HTML标签中,有了这种异步调用方式,咱们就能够去作一些很好玩的东西了,什么天气预报,快递查询,音乐播放器了,都不在话下,固然,跨域调用还有不少种,但我就对jsonp使用的多一点,其余中方法就不提啦,文章中可能会有一些知识点被漏掉,毕竟是本身的一个小总结,但愿能对你们有点小帮助.