封装ajax

function ajax(opt) {
    opt = opt || {};
    opt.method = opt.method || 'GET';
    opt.url = opt.url || '';
    opt.async = opt.async || true;
    opt.data = opt.data || null;
    opt.raw = opt.raw || false;
    opt.success = opt.success || function () { };
    opt.error = opt.error || function () { };
    var xmlHttp = null;
    if (XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    else {
        xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
    }
    var params = [];
    for (var key in opt.data) {
        params.push(key + '=' + opt.data[key]);
    }
    var postData = params.join('&');
    var attch = 'rd=' + Date.now();
    if (postData) {
        attch = postData + '&rd=' + Date.now();
    }
    var meth = opt.method.toUpperCase();
    if (meth === 'POST') {
        xmlHttp.open(meth, opt.url, opt.async);
        if (opt.headers && Object.prototype.toString.call(opt.headers)==='[object Object]') {
            for (var customHead in opt.headers) { 
                xmlHttp.setRequestHeader(customHead,opt['headers'][customHead])
            }
        } else { 
            xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
            //xmlHttp.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
        }
        
        if (opt.raw) {
            xmlHttp.send(opt.data);
        } else { 
            xmlHttp.send(postData);
        }
        
    } else {
        if (opt.url.indexOf('?') > -1) {
            opt.url = opt.url + '&' + attch;
        } else {
            opt.url = opt.url + '?' + attch;
        }
        xmlHttp.open(meth, opt.url, opt.async);
        xmlHttp.send(null);
    }
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4) {
            if ((xmlHttp.status >= 200 && xmlHttp.status < 300) || xmlHttp.status == 304) {
                //xmlHttp.responseText无论是[],{},'',null得到的typeof都是string
                var data = xmlHttp.responseText;
                data = data.replace(/^\s*/, '')
                if (data[0] === '{') {
                    data = JSON.parse(data);
                }
                opt.success(data);
            } else {
                opt.error(xmlHttp.statusText, xmlHttp.status);
            }
        }
    };
    return xmlHttp;
}


function ajaxFD(opt) {
    opt.method = 'POST';
    opt.url = opt.url || '';
    opt.async = opt.async || true;
    opt.data = opt.data || null;
    opt.success = opt.success || function () { };
    opt.error = opt.error || function () { };
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open(opt.method, opt.url, opt.async);
    //使用FormData时,让浏览器自行设置Content-Type,无需自己指定multipart/form-data
    xmlHttp.send(opt.data);
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4) {
            if ((xmlHttp.status >= 200 && xmlHttp.status < 300) || xmlHttp.status == 304) {
                var data = xmlHttp.responseText;
                if (data[0] === '{') {
                    data = JSON.parse(data);
                }
                opt.success(data);
            } else {
                opt.error(xmlHttp.statusText, xmlHttp.status);
            }
        }
    };
    return xmlHttp;
}

php测试代码

<?php
$name = isset($_GET['rd'])? $_GET['rd'] : '没有随机数';
$arr = array('a' => $name);
echo json_encode($arr)
?>

php测试FormData代码,FormData里的文件用$_FILES

<?php
$name = isset($_FILES['ww'])? $_FILES['ww'] : '没有文件';
$arr = array('a' => $name);
echo json_encode($arr)
?>

 

xhr的readyState状态码含义

0初始化，刚刚创建,即new XMLHttpRequest那一刻

1已连接 xhr.open那一刻

2已发送

3已接收-head

4已接收-body

 

例外application/x-www-form-urlencoded和 application/json的区别

 

application/json和application/x-www-form-urlencoded都是表单数据发送时的编码类型。

 

EncType：

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码。

 

如下图所示Content-Type：

 

 

 

application/x-www-form-urlencoded编码类型的发送和接收

窗体数据被编码为名称/值对

客户端：

发送"test=I'm Egret"，浏览器按F12，Network中查看发送数据

 

服务端：

接收test数据

 

 application/json的发送和接收

 序列化后的 JSON 字符串

 

客户端：

发送JSON格式字符串 '{"test":"I'm Client."}'

 

服务端：

1. 用file_get_contents拿Post数据。$_POST['test']取不到数据。

2. 然后使用json_decode解码。 原始file_get_contents是字符串？

3. php中json访问方式 $json->test。php中没有{test:"I'm Client"}这种格式的，$json = {test:"I'm Client"}会报错。

4. 返回数据时将数组json_encode编码。php中json格式没有，用数组代替。

 

使用json格式，php头部需要加上如下代码，否则会报错

1	header('Access-Control-Allow-Headers:x-requested-with,content-type');

　出处：https://www.cnblogs.com/gamedaybyday/p/7028128.html