WEB前端第六十二课——自封装Ajax、跨域、分页

1.Ajax封装方法

　　自封装Ajax请求文件，其实就是将原生的Ajax的请求代码抽象为一个函数，

　　然后单独生成一个js文件保存，用到Ajax的时候引入文件，调用函数的过程。

　　封装Ajax大致步骤如下：

　　　　⑴ 提供创建xhr对象的兼容性函数

　　　　⑵ 提供发送请求的对外接口

　　　　⑶ 设计并约定对外接口的参数规格

　　　　⑷ 实现对外接口中参数处理

　　　　⑸ 实现对外接口中相应处理

　　　　⑹ 实现对外接口中发送处理

　　　　⑺ 设置命名空间，避免全局变量污染

2.Ajax封装实现

　　代码示例：

    
    
    


    发送测试
    

//模拟jQ中的Ajax创建myAjax方法，
function myAjax(paramsObj) {
    //判断参数对象中的请求方式，请求方式为“get”时
    if (paramsObj.type.toLowerCase()=='get'){
        var arr=[];
        for (var ki in paramsObj.data){
            //paramsObj.data为对象类型数据，通过for in方法将其转为数组
            var str=ki+'='+paramsObj.data[ki];
            arr.push(str);
        }
        //   由于get方法传参需要是字符串格式，通过join方法将数组转为字符串,并使用“&”拼接。
        var paramStr=arr.join('&');

        //   将字符串格式的参数拼接到“url”，但拼接之前有必要判断一下调用Ajax时，
        //   url是否已有部分参数或传参符号“?”，通过三目运算使用indexof方法遍历查找“?”。
        paramsObj.url+=paramsObj.url.indexOf('?')==-1?'?'+paramStr:'&'+paramStr;

        //   判断参数对象中的请求方式，请求方式为“post”时
    }else if (paramsObj.type.toLowerCase()=='post'){
        var formData=new FormData();
        for (var ki in paramsObj.data){
            formData.append(ki,paramsObj.data[ki]);
        }
    }else{
        console.log('无该种请求方式！')
    }
//    创建xhr对象
    var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('');
    xhr.onreadystatechange=function () {
        if (xhr.readyState==4){
            if (xhr.status==200){
                //调用回调函数，并将后台返回的数据解析后传参。
                paramsObj.success(JSON.parse(xhr.responseText));
            }
        }
    }
//    准备发送请求
    xhr.open(paramsObj.type, paramsObj.url, true);
//    发送请求
    if (paramsObj.type.toLowerCase()=='get'){
        xhr.send(null);
    }else if (paramsObj.type.toLowerCase()=='post'){
        xhr.send(formData);
    }else {
        console.log('无该种请求方式，请求发送失败！')
    }
}
/*自封装Ajax函数的创建过程，本质就是以参数化的形式实现原生Ajax请求，
上述代码中从第4行到第26行，都是为了判断请求方式，进而根据不同的请求方式生成“url”或“ForMData”*/

//myAjax方法创建完成后，可以将其封装到“(function(){}())”这个自执行函数中，
/*(function (){
    function myAjax(paramsObj) {...}
//   可以将创建好的myAjax方法绑定到“window”对象，通过window调用
    window.myAjax=myAjax;
}());*/

<?php
    $suc=array('msg'=>'ok');
    if($_POST){
        $suc['info']=$_POST;
    }else if($_GET){
        $suc['info']=$_GET;
    }else{
        $suc['info']='无此种请求方式';
    };
    echo json_encode($suc);
?>

3.跨域

　　所谓跨域，是指前台访问路径不符合同源政策时即为跨域。

　　同源政策，是两个路径是否在同一台服务器下的判断标准。

　　判断标准，三要素（网络协议、主域名或IP、端口号）相同则视为同一台服务器，否则反之。

　　Ajax不能发送跨域请求，出现跨域时会报错。

　　解决Ajax跨域问题两种常用方法：

　　　　⑴ 通过后台请求跨域文件解决，后台不存在跨域问题；

　　　　　　PHP中访问跨域url路径，使用“file_get_contents('跨域url')”方法

　　　　　　后台获取跨域文件后，前台再使用Ajax方法获取后台数据

　　　　⑵ 使用“jsonp”通过前台解决。

　　　　　　jsonp解决方案不使用Ajax方法，而是使用其它既具有前后台交互、请求异步以及

　　　　　　链接PHP后台这三个核心功能，又可以访问外部文件的标签替代Ajax。

<?php
//  通过前台 callback 参数接收方法名。
    $fn=isset($_GET['callback'])?$_GET['callback']:'cross';
    $info=file_get_contents('http://blog.sina.com.cn');
    $info=json_encode($info);
    echo "{$fn}({$info})";
?>

4.分页案例

<?php
    $dbBase=new PDO('mysql:host=localhost;dbname=dbTest;charset=utf8','root','');
    $res=$dbBase->query('select * from news where 1');
    if($res){
        $data=$res->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($data);
    }else{
        echo '没有数据！';
    }
?>