原生ajax

什么是AJAX？

Asynchronous JavaScript and XML （异步的javascript与XML）;

AJAX 不是新编城语言，而是一种现有的新方法;

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

创建 XMLHttpRequest 对象；

if (window.XMLHttpRequest)  //判断是否支持这个对象;

 let variable=new XMLHttpRequest();  //通过内置对象创建；（用于和服务器交换数据）不支持IE5，IE6;

var variable =new ActiveXObject();   //适用于IE5,IE6;

设置请求头;

 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

 向服务器发送请求;

 xmlHttp.open('GET/POST', 'URL','Boolean  是否异步');

 setRequestHeader(header,value)  //使用post请求可以添加HTTP表头，然后在sand()方法中添加你希望发送的数据;

 xmlhttp.send(string)   //将请求发送到服务器;   string 适用于post请求;

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

1,无法使用缓存文件（更新服务器上的文件或数据库）

2,向服务器发送大量数据（POST 没有数据量限制）

3,发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

配合ajax使用的事件;

onreadystatechange  //每当 readyState 改变时，就会触发 onreadystatechange 事件；

onlond  //页面预加载事件，  

属性

readyState  //表示服务器的状态; ==4表示数据可以被客户端使用;

status   //==200表示此次请求成功；

responseText   //获得字符串响应数据;  如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseXML  //获得 XML 形式的响应数据。

xmr.responseType  //返回的类型;

xmr.responseURL  //响应式url,实际是url在服务器中的位置;

XMLHttpRequest.DONE  //表示常量请求成功返回4;

JSON数据请使用JSON.prase()转化为对象;

 xhr.upload.onprogress =function(e){}     //监听文件上传事件;（写出上传进度条）

    e.total  文件的总大小

    e.loaded  已经上传文件的大小

    
//在jquery中自定义的属性;
 xhr:function(){
                    //  监听上传的进度，通过原生的ajax对象进行监听
                    var xhr = new XMLHttpRequest()
                    xhr.upload.onprogress = function (e) {
                        // onprogress 监听上传文件的事件
                        // 上传的过程有可能会多次上传，e对象包含total字段，文件总的大小，loaded: 167139已经加载过的资源大小
                        // loaded/total
                        var progress = (e.loaded / e.total)*100+"%"
                        // 把百分比赋值div
                        $(".progress>div").css("width",progress)
                        console.log(e)
                    }
                    // 把自定义的xhr对象返回，赋值给xhr配置项
                    return xhr
                },