14-封装ajax

ajax

Ajax是一种使用现有技术集合，技术内容包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。用于浏览器与服务器之间使用异步数据传输(HTTP 请求),做到局部请求以实现局部刷新

• 作用
  • 不刷新页面而更新网页(局部刷新)
  • 在页面加载后从服务器请求数据
  • 在页面加载后从服务器接收数据
  • 前端和后端负载平衡
• 优点：
  • 在不刷新整个页面的情况下维持与服务器通信
  • 使用异步的方式与服务器通信，不打断用户的操作
  • 将一些后端的工作移到前端，减少服务器与带宽的负担
  • Ajax 使得界面与应用分离，也就是数据与呈现分离
• 缺点：
  • Ajax干掉了Back与History功能,即对浏览器机制的破坏
  • AJAX 技术给用户带来很好的用户体验的同时也对 IT 企业带来了新的安全威胁，Ajax 技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
  • 对搜索引擎支持较弱
  • 不能很好地支持移动设备
• 如何使用Ajax？
  • 创建XMLHttpRequest对象
  • 使用open方法设置和服务器的交互信息
    • URL是相对于当前页面的路径，也可以使用绝对路径
    • Open方法不会向服务器发送真正请求，它相当于初始化请求并准备发送。
    • 只能向同一个域中使用相同协议和端口的
      URL 发送请求，否则会因为安全原因报错
  • 设置requestHeader() request.setRequestHeader(属性名称, 属性值);
  • send() 设置发送的数据，开始和服务器端交互

    Post 传参：发送表单数据xhr.setRequestHeader(“Contenttype”,“application/x-www-formurlencoded; charset=utf-8”);

  • 取得响应，注册事件
    • Onreadystatechange(状态改变事件)
    • readyState 属性：请求状态
    • 0 ：请求未初始化(还没有调用 open())
    • 1 ：请求已经建立，但是还没有发送（还没有调用 send())
    • 2 ：请求已发送，正在处理中（通常现在可以从响应中获取内容头）
    • 3 :请求在处理中，通常响应中已有部分数据可用了，但是服务器还不有完成响应的生成。
    • 4 :响应已完成，您可以获取并使用服务器的响应了。

New Function 方法

function toJson(str){ var json = (new Function("return" + str))(); return json;
}

ajax封装

function ajax(url,fnWin,fnFaild){
    //1. 创建XMLHttpRequest对象
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    //2. 与服务器建立连接
    xhr.open('get',url,true)
    //3. 发送请求
    xhr.send();
    //4.等待响应 
    xhr.onreadystatechange  = function(){
        //1. 请求状态
        if(xhr.readyState === 4){
            //2. 响应状态码
            if(xhr.status === 200){
                if(fnWin instanceof Function){
                    fnWin(xhr.responseText);
                }else{
                    if(fnFaild instanceof Function){
                        fnFaild();
                    }
                }
            }
        }
    }
}

let ajax = {
    get(url,fnWin,fnFaild){
        //1. 手机
        let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
        //2. 打电话
        xhr.open('get',url,true);
        //3. 说话 
        xhr.send();
        //4. 听
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(/^(2|3)\d{2}$/.test(xhr.status)){
                    if(fnWin instanceof Function){
                        fnWin(xhr.responseText);
                    }
                }else{
                    if(fnFaild instanceof Function){
                        fnFaild();
                    }
                }
            }
        }
    },
    post(url,data,fnWin,fnFaild){
        //1. 手机
        let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
        //2. 打电话
        xhr.open('post',url,true);
        //在发送请求之前，一定要先设置请求头
        xhr.setRequestHeader('Content-type','Application/x-www-form-urlencoded;charset=utf-8');
        //3. 说话 
        xhr.send(data); //data的格式： key=value&key=value
        //4. 听
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(/^(2|3)\d{2}$/.test(xhr.status)){
                    if(fnWin instanceof Function){
                        fnWin(xhr.responseText);
                    }
                }else{
                    if(fnFaild instanceof Function){
                        fnFaild();
                    }
                }
            }
        }
    }
}

let $ = {
    ajax(json){
        //如果json中没有任何数据，怎么办？
        if(!json){ //undefined
            return;
        }
        //1. 初始化参数
        //type
        json.type = json.type.toUpperCase() || 'GET';
        //url
        json.url = json.url || '';
        //data
        json.data = json.data || null;
        //async
        json.async = json.async || true;
        //success 成功的回调函数
        json.success = json.success || function(){};
        //error 失败的回调函数
        json.error = json.error || function(){};
        //2. data   send('user=阿娇&age=18')
        //先判断传递的是字符串还是对象
        let arr = [];
        let str = '';
        if( json.data instanceof Object){ //
            // console.log(json.data);
            // {name:"john",location:"Boston"}
            // "name=John&location=Boston"
            // console.log(json.data.ps);
            for(let key in json.data){
                arr.push(key + '=' + json.data[key])
                console.log(arr);
                str = arr.join('&');
                console.log(str);
            }
        }else{
            str = json.data;
        }
        //3. 创建XMLHttpRequest对象
        let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
        //4. 与服务器建立连接
        if(json.type === 'GET'){
            //判断是通过url地址传递呢还是通过data传递
            //https://www.baidu.com/s?wd=1&rsv_spt=1&rsv_iqid=0xfaeee45800249487&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=0&rsv_dl=tb&rsv_sug3=2&rsv_sug1=2&rsv_sug7=101&rsv_btype=i&prefixsug=1&rsp=2&inputT=1850&rsv_sug4=2067
            if(json.url.includes('?')){
                xhr.open(json.type,json.url,json.async);
            }else{
                //https://www.baidu.com/s
                //'name=John&location=Boston'
                xhr.open(json.type,json.url + '?' + str,json.async);
            }
            xhr.send();
        }else if(json.type === 'POST'){
            xhr.open(json.type,json.url,json.async);
            //设置请求头
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded;charset=utf-8');
            //5. 发送请求
            xhr.send(str);
        }
        
        //6. 等待响应
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(/^(2|3)\d{2}$/.test(xhr.status)){
                    json.success(xhr.responseText);
                }else{
                    json.error();
                }
            }
        }
    }
}