Ajax你们知道吗?它是前端实现的基石之一，可以页面实现局部刷新。今天我们就来了解一下什么是ajax和ajax的具体实现方式，一起来看看吧。

什么是ajax?

Aiax：是作用于异步的Javascript和XML。

作用：能够用于完成局部刷新

XML是传统的数据传输方式，已经开始被JSON所替代。

在传统的交互方式中js每次都必须返回整个页面，这对宽带响应速度都有不小影响。

Ajax的交互方式是客户端从服务器加载网页完毕后，网页中的内容如果需要更改，不使用浏览器发送请求，而是使用JavaScript中的XMLHttpRequest(及Ajax对象)对象发送请求到服务器，服务器接收请求并处理完毕后只返回页面需要的内容，XMLHttpRequest对象接收服务器返回的内容，程序员需要手动(javascript)的把内容更新到页面中，所有Ajax交互的好处是只是部分数据的更新，就成功和服务器进行了交互，提高用户的体验。

Ajax特点

Ajax通过与服务器进行数据交换，可以实现网页局部更新，这意味着客户可以在不重新加载整个页面的情况下，对网页的某个部分实现局部更新。

Ajax核心对象

Ajax的核心对象是JavaScript对象XMLHttpRequest。简单的说　XMLHttpRequest可以让你使用JavaScript向服务器进行请求并处理响应。

同步与异步区别

同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

异步: 请求通过事件触发->服务器处理(这时浏览器仍然可以作其他事情)->处理完毕

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。

异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式

如何实现发送ajax请求?

例：

function ajax_method(url, data, method, success)
{
    // 创建异步对象
    var ajax = new XMLHttpRequest();
    // get 跟post 需要分别写不同的代码
    if (method == 'get')
    {
        // get请求
        if (data)
        {
            // 如果有值
            url += '?';
            url += data;
        }
        else
        {}
        // 设置 方法 以及 url
        ajax.open(method, url);
        // send即可
        ajax.send();
    }
    else
    {
        // post请求
        // post请求 url 是不需要改变
        ajax.open(method, url);
        // 需要设置请求报文
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // 判断data send发送数据
        if (data)
        {
            // 如果有值 从send发送
            ajax.send(data);
        }
        else
        {
            // 木有值 直接发送即可
            ajax.send();
        }
    }
    // 注册事件
    ajax.onreadystatechange = function ()
    {
        // 在事件中 获取数据 并修改界面显示
        if (ajax.readyState == 4 && ajax.status == 200)
        {
            // console.log(ajax.responseText);
            // 将 数据 让 外面可以使用
            // return ajax.responseText;
            // 当 onreadystatechange 调用时 说明 数据回来了
            // ajax.responseText;
            // 如果说 外面可以传入一个 function 作为参数 success
            success(ajax.responseText);
        }
    }
    
}

以上就是ajax的所有内容了，更多ajax相关内容请关注我们了解吧。