原生ajax的实现

ajax是一种异步通信技术，在ajax出现之前，客服端与服务端直接通信，有了ajax以后，通过在后台与服务器进行少量的数据交换，可以达到在不刷新整个页面的情况下实现局部刷新。

ajax的技术核心是XMLHttpRequest对象，使用ajax一般需要以下四个步骤：

1、创建对象

var xhr = new XMLHttpRequest();

注：xhr对于低版本的IE浏览器并不兼容，如何实现兼容呢？

2、创建请求

var xhr = '';
window.ActiveXObject ? xhr = new ActiveXObject('MSXML2,XMIHTTP'): xhr = new XMLHttpRequest();

调用open方法设置与服务器的交互信息：

open(method,url,async);

第一个参数method，要发送的请求类型（‘get’、‘post’）

第二个参数url表示请求的地址

第三个参数表示是否异步发送请求的布尔值，默认为true 表示异步

get的请求方式：

  xhr.open("get","url");

post的请求方式：

xhr.setRequestHead("Content-type","application/x-www-form-urlencoded");//先设置响应头
xhr.open("post","url");

3、发送请求

xhr.send();

4、注册事件

 // 注册事件
    xhr.onreadystatechange = function () {
        // 在事件中 获取数据 并修改界面显示
        if(xhr.readyState==4&&xhr.status==200) {
            // console.log(xhr.responseText);
            // 将 数据 让 外面可以使用
            // return ajax.responseText;

            // 当 onreadystatechange 调用时 说明 数据回来了
            // ajax.responseText;
            // 如果说 外面可以传入一个 function 作为参数 success
            success(xhr.responseText);
        }
    }

5、刷新页面

猜你喜欢