ajax技术详解

导语：今天来讲一下ajax的有关知识点。

ajax概念

ajax全称叫Asynchronous JavaScript and XML,意思是异步的 JavaScript 和 XML。

ajax是现有标准的一种新方法，不是编程语言，可以在不刷新网页的情况下，和服务器交换数据并且更新部分页面内容，不需要任何插件，只需要游览器允许运行JavaScript就可以。

而传统的网页（不使用ajax的）如果需要更新页面内容，就需要重新请求服务器，返回网页内容，重新渲染刷新页面。

ajax的原理

原理：ajax的运行过程包括以下几个方面

• Browser游览器通过事件触发方法，本地通过XMLHttpRequest对象，创建并且发送请求通过互联网到服务器；
• Server服务器收到请求的内容，响应请求，发送所需数据到游览器；
• Browser游览器通过XMLHttpRequest对象的onreadystatechange的方法收到请求的数据后，解析和渲染数据到页面中。

注意：ajax依赖的标准有以下几个

• XMLHttpRequest对象,异步的与服务器交换数据
• JavaScript/DOM,信息显示/交互
• XML,作为转换数据的格式

ajax的使用

创建XMLHttpRequest对象,通过new实例化一个XMLHttpRequest对象。

var xhr = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP'); // 兼容ie和Firefox，google chrome,opera,safari

发送请求使用XMLHttpRequest对象的open和send方法

open方法使用

open(method,url,async),接受三个参数。

• 第一个是method请求的类型，如：get和post;
• 第二个是url请求地址，即文件在服务器的位置；
• 第三个是是否处理异步处理请求,值为true和false；

例如：

xhr.open('get','https://www.abc.com/service.php?tamp='+Date.parse(new Date()),true);

send方法使用

send(string)接受的参数为请求类型为post传递的值，为get类型时候不传值。

例如：

send('tamp='+Date.parse(new Date());

onreadystatechange事件

当readyState属性发生变化时，就会触发onreadystatechange事件，该事件通过回调函数获取到响应的数据信息。

readyState值:

• 值为0表示：请求未初始化；
• 值为1表示：服务器连接已建立；
• 值为2表示：请求已接收；
• 值为3表示：请求处理中；
• 值为4表示:请求已完成，且响应已就绪；

status值：

• 200: 请求成功
• 404: 未找到页面

简单的get请求

var xhr;
if (!xhr && typeof xhr !== 'object') {
    var xhr = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('get','https://www.abc.com/service.php?tamp='+Date.parse(new Date()),true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        }
    }
}
xhr.send();

模拟数据

• 模拟的JSON数据

// 保存为data.json文件
{
    "msg": "get_succ",
    "code": 201,
    "data": {
        "list": [
            {
                "id":1,
                "name": "alun"
            },
            {
                "id":2,
                "name": "mark"
            },
            {
                "id":3,
                "name": "jean"
            }
        ]
    }
}

• 模拟的Nodejs的api

请确保你的系统安装有node.js环境。

// 保存为node.js文件
// 引入http模块
const http = require('http');

const port = 3000;

const success = {
    msg: "get_succ",
    code: 201,
    data: {
        list: [
            {"id":1,"name": "alun"},
            {"id":2,"name": "mark"},
            {"id":3,"name": "jean"}
        ]
    }
}

const error = {
    msg: "get_fail",
    code: 101,
    data: {
        info: 'this request failed,again try!'
    }
}

const authy = {
    msg: "no visited!",
    code: 403,
    data: {
        info: 'not visited!'
    }
}

// 建立http服务
const serve = http.createServer((req,res) => {
    var lawDomainList = "http://localhost:9925";
    res.setHeader('Content-Type', 'text/plain;charset=utf8');
    res.setHeader("Access-Control-Allow-Origin",lawDomainList);
    if (req.url == '/api') {
        res.end(JSON.stringify(success));
    } else {
        res.end(JSON.stringify(error));
    }
    res.end(authy);
})
// 监听端口
serve.listen(port,function(){
    console.log('serve is running on port 3000!');
})

• 封装的ajax函数

// 保存为ajax.js文件
$_g = {
  get: function (url) {
    return xmlHttp('get', url);
  },
  post: function (url, data) {
    return xmlHttp('post', url, data);
  },
}

function xmlHttp(method, url, data) {
  if (method == 'post' && !data) {
    throw new Error("post提交缺少data");
  }
  if (!url && typeof url !== 'string') {
    throw new Error('参数传递有误，请检查url是否为字符串');
  }
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
    xhr.open(method, url, true);
    xhr.onreadystatechange = function () {
      if (this.readyState === 4) {
        if (this.status === 200) {
          resolve(this.response, this);
        } else {
          reject(this);
        }
      }
    }
    xhr.send(JSON.stringify(data));
  })
}

示例：获取数据渲染页面

通过点击按钮获取数据，渲染列表。

<button class="btn">请求数据button>
<ul class="res">结果：暂无结果ul>
<script src="ajax.js">script>

let btn = document.querySelector('.btn');
let resbox = document.querySelector('.res');
btn.onclick = function() {
    var url = 'http://localhost:3000/api'; // node api
    var urlJson = 'data.json'; // mock api
    $g.get(url).then(function(res) {
        if (typeof res == 'string') {
            let responTxt = JSON.parse(res);
            if (responTxt.msg == 'get_succ' && responTxt.code == 201) {
                let list = responTxt.data.list;
                let str = '';
                for (let i=0;i<list.length;i++) {
                    str += '
'+ list[i].id + ':' + list[i].name + '
';
                }
                resbox.innerHTML = str;
            }
        }
    }).catch(function(err){
        throw new Error(err);
    });
}

写在最后

这只是我总结的一小部分知识点，其实这个技术还是有很多地方没有说到，以后再补充吧！