• Ajax


    一、Ajax封装

     function Ajax(options){
            var defalts = {
                type: 'get',
                url: '',
                data: {},
                header: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                success: function(){},
                error: function(){}
            }
            Object.assign(defalts, options);
    
            var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Microsoft.XMLHTTP');
        
            let params = [];
            for(let key in defalts.data){
                params.push(key+'='+defalts.data[key]);
            }
            params = params.join('&');
            if(defalts.type == 'get'){
                defalts.url = defalts.url + '?' + params + '&t=' + Math.random();
            }else{
                defalts.url = defalts.url + '?' + 't=' + Math.random();
            }
            // console.log(defalts.type, defalts.url)
            xhr.open(defalts.type, defalts.url);
            // xhr.setRequestHeader('Content-Type', 'Application/json');
        
            if(defalts.type == 'post'){
                let ContentType = defalts.header['Content-Type'];
                xhr.setRequestHeader('Content-Type', ContentType);
                if(ContentType == 'application/json'){
                    xhr.send(JSON.stringify(defalts.data));
                }else{
                    xhr.send(params);
                }
            }else{
                xhr.send();
            }
            xhr.onload = function(){
                let contentType = xhr.getResponseHeader('Content-Type');
                let responseText = xhr.responseText;
                if(contentType.includes('application/json')){
                    responseText = JSON.parse(responseText);
                }
                if(this.status == 200){
                    defalts.success(responseText);
                }else{
                    defalts.error(responseText, xhr);
                }
            }
        }

    调用:

      myAjax({
          type: 'get',
          url: '...',
          data: {
    
                },
       
    header: {
    'Content-Type': 'application/x-www-form-urlencoded'
    },
    success: function(){ },
    error:
    function(){ }
    })

    二、JSONP的封装

        function myJsonp(options){
                var script = document.createElement('script');
                var fnName = myjsonp+Math.random.toString().replace('.', '');
           window[fnName] = options.success;
    var params = []; for(var attr in options.data){ params.push(attr+'='+options.data[attr]); } params = params.join('&'); script.src = options.url + '?callback='+ fnName + '&' + params; document.body.appendChild(script); script.onload = function(){ document.body.removeChild(script); } }

    调用

          myJsonp({
              url: '',
              data: '',
              success: function(data){
    
              }
          })

    服务端

     (1)接收哭护短传递过来的函数名

     (2)将数据转换成字符串

     (3)将数据和函数拼接

     (4)发送回客户端

     注:// 以上流程在express中可以用  res.jsonp( {数据} ) 代替

    三、 CORS

      (1)客户端发送跨域请求是会自动在请求头上加一个: Origin : 请求地址

      (2)因为同源政策的影响,服务端接收此请求但不会做出响应

      (3)在服务端的响应头设置

         Access-Control-Allow-Origin: 地址或者(*) // 表示允许此地址的请求

        Access-Control-Allow-Methods: 'get, post'   // 表示允许get和post请求

      (4)在node的express中这样设置

        res.header(' Access-Control-Allow-Origin ', ' * ');

        res.header(' Access-Control-Allow-Methods ', ' get, post ');

    四、 服务端不受同源政策的影响,可以向其他服务端发送请求

       (1)客户端向自己的服务器发送一个请求

      (2)服务器向另一个服务器发送请求,将响应结果返回给客户端

      (3)express中引入第三方模块 request 发送跨域请求

        request('地址', (err, response, body)=>{

          body为响应数据

        })

    五、跨域请求时默认是不能访问cookie的

      想要访问cookie

      (1)、客户端设置

        xhr.withCredentials = true

      (2)、服务端设置

        res.header(' Access-Control-Allow-Credentials ', true)

    六、获取表单数据

      1、FormData

        ajax传递参数获取表单中的数据一项一项拼接肯定很麻烦,FormData将普通的表单转换成表单对象,,不能用get

        var formdata = new FormData('form');  传入form表单的DOM对象

        FormData增删改获取数据

        获取:

          formdata.get('key');

        修改或设置

          formdata.set('key', 'value');

          如果有这个键,则为修改,没有则为添加

        删除

          formdata.delete('key');

        追加

          formdara.append('key', 'value');

      在服务器端,ajax传递的表单参数不能用body-parser接收了,用formidable

       使用方法:(1)引入

            (2)创建formidable对象

              var form = new formidable.IincomingForm();

            (3)form.uploadDir = 文件保存路径

            (4)form.keepExtensions = true;     // 保留文件后缀

            (5)form.parse(req, (err, fields, files)=>{

                // fields 存储表单内容

                // files 上传的文件

              })  

       

      2、jquery中的serialize方法

      用于将表单中的数据自动拼接成字符串的参数

        “key=value&key2=value2”

      用法:var params = $('form').serialize();

      (1)、如果content-type为“application/json”时,参数应该为 JSON.stringify({......});

         此时就不能用serialize方法了,该用serializeArray(),

         它将表单内容转换成数组 : [ { name: 'username', value: '黄黄' }, { name: 'password', value: '123' } ];

        封装一个方法把它转换成对象格式

    function serializeObject(form){
        var params = form.serializeArray();
        var obj = {};
        $.each(params, (index, value)=>{
             obj[value.name] = value.value;
        })  
    
         return obj;
    }

        

  • 相关阅读:
    收藏:iBLC编码器
    蛙蛙推荐:怎样调试asp.net黄页错
    蛙蛙推荐:IE下3px bug研究
    蛙蛙推荐:winform入门
    蛙蛙推荐:蛙蛙牌云存储服务
    整理:个人知识管理相关链接
    蛙蛙推荐:c#编写网络电话
    蛙蛙推荐:蛙蛙教你解析网络包
    有用的SQL 语句(转) dodo
    .net 点击刷新验证码问题 dodo
  • 原文地址:https://www.cnblogs.com/hxblogs/p/13525894.html
Copyright © 2020-2023  润新知