手动封装ajax兼容性写法

大家好，我是Counterrr，生命不息学习不止。

Talk is cheap, Show me the bug.

本文目录

ajax介绍；
手动封装兼容性ajax；
利用自己封装的兼容性ajax进行请求测试；

1、ajax介绍：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

正是有ajax的技术新兴，使得前后端分离，前端工程师的概念就越来越深入人心。

2、手动封装兼容性ajax：

ajax使用五步骤：

ajax对象
初始化ajax
请求数据
监听数据
使用数据

代码如下：

function ajax(method, url, callback, data, flag) {
    
    
    var xml = null;
    if ( window.XMLHttpRequest ) {
    
    
        xml = new XMLHttpRequest();
    }
    else {
    
    
        xml = new ActiveXObject('Microsoft.XMLHttp');
    }
    method = method.toUpperCase();
    if ( method == 'GET' ) {
    
    
        var date = new Date();
        var timer = date.getTime();
        xml.open(method, url + '?' + data + '&timer=' + timer, flag);
        xml.send();
    }
    else if ( method == "POST" ) {
    
    
        xml.open(method, url, flag);
        xml.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xml.send(data);
    }

    xml.onreadystatechange = function () {
    
    
        if ( xml.readyState == 4 ) {
    
    
            if ( xml.status == 200 ) {
    
    
                callback(xml.responseText);
            }
        }
    }
}

代码解读：

这里接收了5个参数，第一个参数接收请求的方法，第二个参数请求地址，第三个参数回调函数，第四个参数传递的参数，第五个参数同步或者异步，现在一般都是异步。

ajax对象：
XMLHttpRequest( )，首先判断浏览器是否支持，因为在ie6及以下可能不存在这个对象，所以我们要用ActiveXObject('Microsoft.XMLHttp')去兼容。
初始化ajax：
我们通过new XMLHttpRequest( )或者new ActiveXObject('Microsoft.XMLHttp')对象，把这个对象赋值给我们的xml，xml.open（）接收3个参数，第一个参数请求方法，第二个参数请求地址，第三个参数异步或者同步。调用这个方法传值，就完成ajax初始化。我们可以看到如果是GET请求方法，我们把时间戳拼接到url目的是为了使每次请求都不一样，就不会从缓存中去数据了；如果是POST我们直接传递这三个参数，不过要设置这段代码xml.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');意味的内容类型是提交表单。
请求数据：
我们通过xml.send();去请求我们的数据，但是在方法为POST的时候我们需要将传递过来的data给当做参数发送出去。
监听数据：
我们通过xml.onreadystatechange， xml.readyState去监听数据，那么xml.readyState有5种状态码：

0：未初始化，还没调用send( )方法；
1：已调用send( )方法，正在发送请求；
2：send( )方法执行完成，已经接受所有响应内容；
3：正在解析响应内容；
4：响应内容解析完成，客户端可以使用了；

那在这五种转态中，我们要用数据，直接监听xml.readyState == 4的时候数据就可以使用了。
使用数据：
那xml.responseText就是响应内容了，我们直接在回调函数中传入这个响应内容，那么就可以在原先定义的方法去按照我们的想法去运行这段请求的响应内容了。

3、利用自己封装的兼容性ajax进行请求测试：

目录结构：

ajax
├── ajax.js
├── data.json
├── index.html
├── post.php

ajax.js代码：

// 1，浏览器
// 2，ajax对象
// 3，初始化ajax
// 4，请求数据
// 5，监听数据
// 6，使用数据

function ajax(method, url, callback, data, flag) {
    
    
    var xml = null;
    if ( window.XMLHttpRequest ) {
    
    
        xml = new XMLHttpRequest();
    }
    else {
    
    
        xml = new ActiveXObject('Microsoft.XMLHttp');
    }
    method = method.toUpperCase();
    if ( method == 'GET' ) {
    
    
        var date = new Date();
        var timer = date.getTime();
        xml.open(method, url + '?' + data + '&timer=' + timer, flag);
        xml.send();
    }
    else if ( method == "POST" ) {
    
    
        xml.open(method, url, flag);
        xml.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xml.send(data);
    }

    xml.onreadystatechange = function () {
    
    
        if ( xml.readyState == 4 ) {
    
    
            if ( xml.status == 200 ) {
    
    
                callback(xml.responseText);
            }
        }
    }
}

data.json代码如下：

{
    
    
    "name": "Counterrr",
    "age": 26,
    "methods": "GET"
}

index.html代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax</title>
</head>
<body>
    姓名:<input id="i" type="text">
    年龄:<input id="n" type="text">
    <button id="sub">POST请求</button>
    <button id="btn">GET请求</button>
    <script src="./ajax.js"></script>
    <script>

        sub.onclick = function () {
    
    
            var value1 = i.value;
            // console.log(value1);
            var value2 = n.value;
            var data = 'username=' + value1 + '&age=' + value2;
            ajax('POST', './post.php', postCbs, data, true);
        }

            function postCbs(msg) {
    
    
                console.log(msg);
            }


        btn.onclick = function () {
    
    
            ajax('GET', './data.json', getCbs, '', true);
        }

        function getCbs(data) {
    
    
            console.log(data)
        }
    </script>
</body>
</html>

post.php代码如下：

<?php 
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

$username = $_POST['username'];
$age = $_POST['age'];

echo "名字: {$username}, 年龄: {$age}";

我们将这个文件夹拖到wamp安装目录下www文件夹下运行测试：
在这里插入图片描述
好的一切如预期。
在真正开发项目的过程中一般都是用第三方库去使用ajax，但是我们还是要了解下原理是什么。