原生js发送ajax请求

原生js发送ajax请求原理

1.什么是ajax

AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。推荐文章：ajax是什么。

个人理解：ajax就是在不刷新网页的情况下和后台交互数据。

2. 常用的ajax类库

我用的最多的是jquery。jQuery学习之jQuery Ajax用法详解

3. 原生ajax的实现方式

1. 创建XMLHttpRequest 对象

// XMLHttpRequest对象用于在后台与服务器交换数据,
//IE浏览器:new ActiveXObject("Microsoft.XMLHttp");
//其他：new XMLHttpRequest();
var xhr =  window.XMLHttpRequest 
        ? new XMLHttpRequest() 
        : new ActiveXObject("Microsoft.XMLHttp");

所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。

2.定义post/get请求
拿到XMLHttpRequest之后，使用open()方法去请求链接

open语法：open(method, url, async, username, password);
method: 请求类型（GET | POST | HEAD）
url： 请求主体，大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。
async: 是否发送异步请求( false | true )
username,password: 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。

    var Ajax = {
            get: function (url, fn) {
                // XMLHttpRequest对象用于在后台与服务器交换数据
                var xhr = new XMLHttpRequest();
                //每当readyState改变时就会触发onreadystatechange函数
                //0: 请求未初始化
                //1: 服务器连接已建立
                //2: 请求已接收
                //3: 请求处理中
                //4: 请求已完成，且响应已就绪
                xhr.open('GET', url, true)
                xhr.onreadystatechange = function () {
                    //readyStatus == 4说明请求已经完成
                    if(xhr.readyState == 4 && xhr.status ==200) {
                        //从服务器获得数据
                        fn.call(this, xhr.responseText);
                    }
                };
                //发送数据
                xhr.send();
            },
            // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
            post: function (url, data, fn) {
                var xhr = new XMLHttpRequest();
                xhr.open("POST", url, true);
                // 添加http头，发送信息至服务器时内容编码类型
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
                        fn.call(this, xhr.responseText);
                    }
                };
                //发送数据
                xhr.send(data);
            }

        }

参考链接：
原生JS发送ajax请求