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;
}