Ajax的get/post两种请求方式及ajax封装函数

AJAX基本用法

引言

Ajax是浏览器提供的一套方法，可以用来实现页面无刷新更新数据，提高用户体验。主要有GET和POST两种请求方式。

1. GET请求处理

GET请求会将数据放到URL后面

GET请求对数据大小限制(2000个字符以下)

用于提交非敏感数据和小数据

2.POST请求处理

POST请求会将数据放到请求头中

POST请求对数据没有大小限制

用于提交敏感数据和大数据

3.上传文件

注意：

1. 上传文件一般使用POST提交
2. 上传文件必须设置enctype="multipart/form-data“
3. 上传的文件再PHP可以通过$_FILES获取
4. PHP中文件默认会上传到一个临时目录，接收完毕之后会自动删除

语法：

move_upload_file(file,newloc);
//file 规定要移动的文件位置
//newloc 规定文件的新位置

//1.获取上传文件对应的指点
$fileInfo = $_FILES["upFile"];
// print_r($fileInfo);
//2.获取上传文件的名称
$fileName = $fileInfo["name"];
//3.获取上传文件保存的临时路径
$filePath = $fileInfo["tmp_name"];

// echo $fileName;
// echo "
";
// echo $filePath;

//4.移动文件
move_uploaded_file($filePath, "../source/".$fileName);

默认情况下服务器对上传文件的大小是有限制的，如果想修改上传文件的限制可以修改php.ini文件。(ctrl+f搜索)

file_uploads = On：是否允许上传文件On/Off 默认是On

upload_max_filesize = 2048M ：上传文件的最大限制

post_max_size = 2048M：通过Post提交的最多数据

max_execution_time = 30000 ：脚本最长的执行时间 单位为秒

max_input_time = 30000：接收提交的数据的时间限制，单位为秒

memory_limit = 2048M：最大的内存消耗

AJAX GET基本使用

1. 创建一个异步对象
2. 设置请求方式和请求地址 open();
   method: 请求的类型(GET或POST)
   url：文件在服务器的位置
   async： true(异步)或false(同步)
3. 发送请求 send();
4. 监听异步对象状态的变化 onreadystatechange
5. 处理返回的结果

window.onload = function (ev) {
     
        var oBtn = document.querySelector('button');
        oBtn.onclick = function (ev1) {
     
            // 1.创建一个异步对象
            var xhrhttp = new XMLHttpRequest();
            // 兼容IE
            if (window.XMLHttpRequest) {
     
                xhrhttp = new XMLHttpRequest();
            } else {
     
                xhrhttp = new             ActiveXObject("Microsoft.HMLHTTP");
            }
            // 2.设置请求方式和请求地址
            /* 
            method: 请求的类型(GET或POST)
            url：文件在服务器的位置
            async： true(异步)或false(同步)
             */
            xhrhttp.open("GET", "ajax04_get.php", true);
            // 3.发送请求
            xhrhttp.send();
            // 4.监听异步对象状态的变化
            xhrhttp.onreadystatechange = function (ev2) {
     
                // 5.处理返回的结果
                if (xhrhttp.readyState === 4) {
     
                    if (xhrhttp.status >= 200 && xhrhttp.status < 300 || xhrhttp.status === 304) {
     
                        console.log("请求成功");
                    } else {
     
                        console.log("请求失败");
                    }
                }
            }
        }
    }

服务器响应

属性	描述
responseText	获得字符串形式的响应数据
responseXML	获得XML形式的响应数据

alert(xhrhttp.responseText);   //打印出php文件中的内容

XMLHttpRequest对象

所有现代浏览器均支持XMLHttpRequest对象(IE5和IE6使用ActiveObject)

用于在后台与服务器交换数据

//兼容IE
if (window.XMLHttpRequest) {
     
                xhrhttp = new XMLHttpRequest();
            } else {
     
                xhrhttp = new             ActiveXObject("Microsoft.HMLHTTP");
            }

POST基本使用

用 setRequestHeader() 像表单那样POST数据，添加HTTP头。

且应放到open和send中间

JSON 和 JS 的对象互转

JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串

var json = JSON.stringify(a:'hello',b:'world'); 
//结果是 "a":'hello',"b":'world'
var obj = JSON.parse("a":"hello",";b":"world");
//结果是 a:'hello',b:'world'

AJAX的封装代码

function obj2str(data) {
     
    /*
    {
        "userName":"lnj",
        "userPwd":"123456",
        "t":"3712i9471329876498132"
    }
    */
    data = data || {
     }; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
    data.t = new Date().getTime();
    var res = [];
    for (var key in data) {
     
        // 在URL中是不可以出现中文的, 如果出现了中文需要转码
        // 可以调用encodeURIComponent方法
        // URL中只可以出现字母/数字/下划线/ASCII码
        res.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key])); // [userName=lnj, userPwd=123456];
    }
    return res.join("&"); // userName=lnj&userPwd=123456
}
function ajax(option) {
     
    // 0.将对象转换为字符串
    var str = obj2str(option.data); // key=value&key=value;
    // 1.创建一个异步对象
    var xmlhttp, timer;
    if (window.XMLHttpRequest) {
     // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {
     // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 2.设置请求方式和请求地址
    /*
    method：请求的类型；GET 或 POST
    url：文件在服务器上的位置
    async：true（异步）或 false（同步）
    */
    if (option.type.toLowerCase() === "get") {
     
        xmlhttp.open(option.type, option.url + "?" + str, true);
        // 3.发送请求
        xmlhttp.send();
    } else {
     
        xmlhttp.open(option.type, option.url, true);
        // 注意点: 以下代码必须放到open和send之间
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send(str);
    }

    // 4.监听状态的变化
    xmlhttp.onreadystatechange = function (ev2) {
     
        /*
        0: 请求未初始化
        1: 服务器连接已建立
        2: 请求已接收
        3: 请求处理中
        4: 请求已完成，且响应已就绪
        */
        if (xmlhttp.readyState === 4) {
     
            clearInterval(timer);
            // 判断是否请求成功
            if (xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                xmlhttp.status === 304) {
     
                // 5.处理返回的结果
                // console.log("接收到服务器返回的数据");
                option.success(xmlhttp);
            } else {
     
                // console.log("没有接收到服务器返回的数据");
                option.error(xmlhttp);
            }
        }
    }
    // 判断外界是否传入了超时时间
    if (option.timeout) {
     
        timer = setInterval(function () {
     
            console.log("中断请求");
            xmlhttp.abort();
            clearInterval(timer);
        }, option.timeout);
    }
}