js对象之XMLHttpReques对象学习

背景：业务需求是，一个前端（手机和浏览器）HTML页面中有图片，按钮......，需要统计用户点击图片或者按钮的次数。

前端实现：通过一个js来统计HTML页面中所有的图片和按钮对象，并给每个对象赋予一个监听事件，这样当用户点击图片或按钮，就能监听到该事件，并行后台发送一个请求。

var xhr;//创建httpRequest对象
if (window.XMLHttpRequest) {  //兼容处理
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "http://172.16.11.107:8700/tfcarepoint/send2";
var sendData = function(data, url2, callBackFun) {
    xhr.open("post", url2, true);   //打开连接
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');  //设置请求头
    xhr.send(JSON.stringify({    //设置请求体,并发送请求
        "id" : location.href.slice(location.href.lastIndexOf("/") + 1,location.href.lastIndexOf(".")),
        //"id" : "123",
        "title" : document.title,
        "type" : data,
        "uuId" : uuid,
        "userId" : userId,
        "extInfo" : extInfo
    }));
    // 回调接口
    xhr.onreadystatechange = function() {  //设置回调事件
        if (xhr.readyState == 4) {// 4 = "loaded"
            if (xhr.status == 200) {// 200 = OK
                if (callBackFun) {
                    callBackFun();
                }
            }
        }
    };
};

var pviews = "http://172.16.11.107:8700/tfcarepoint/pviews";
(function() {
    sendData("enter",url); //当页面进入发送有个enter类型的请求
    sendData("enter", pviews, function() {
        alert("当前阅读量为:" + xhr.response);
        var readNum = document.getElementById("readNum");
        if (readNum) {
            readNumss.textContent = xhr.response;
        }
    });
})();
var isMobile = /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)
        || /(Android)/i.test(navigator.userAgent);  //获取手机类型
var imgs = document.querySelectorAll("img");  //获取页面中所有的图片
if (imgs) {
    imgs.forEach(function(val, idx, arr) {  //遍历所有的图片对象（img标签），并给每个对象赋予以一个监听事件
        var params = val.title ? val.title : "第" + (Number(idx) + 1) + "张图片";
        if (isMobile) {
            val.addEventListener("touchstart", function() {  //手机添加触摸事件
                sendData("imgs",url); //向后台发送imgs类型的请求
            });
        } else {
            val.addEventListener("mousedown", function() {
                sendData(params,url);
            });
        }
    })
}
var thisPage = false;
window.onbeforeunload = function checkLeave(e) {
    var evt = e ? e : (window.event ? window.event : null);
    if (!thisPage) {
        sendData("页面关闭");
    }
};

一：Ajax （Asynchronous JavaScript And XML）

　　Ajax描述了一种使用JavaScript脚本操纵HTTP的web应用框架，它与web服务器进行数据交换，并且不会导致页面加载。

二：XMLHttpRequest对象

　　浏览器在XMLHttpRequest类上定义了HTTP的API，即实现了ajax技术

2.1 使用XMLHttpRequest对象(注意请求顺序不能乱)

步骤1   创建XMLHttpRequest对象实例  var request  =  new XMLHttpRequest（）；

步骤2   指定请求   request.open("method","url","true")

步骤3   设置请求头   request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

步骤4   发起请求     request.send();

备注1：

　　同一个XMLHttpRequest对象可以重用，但必须一个请求完成（即这个对象获取到服务器相应）之后才能重新调用send()方法。否则上一个请求会被浏览器cancle掉。

备注2: 一个HTTP请求有4部分组成

* HTTP请求的方法或动作

　* 请求的地址 URL

* 一个可选的请求头集合

* 一个可选的请求体

备注3:一个HTTP响应包含3部分

　* 一个数字和文字组成的状态码

　* 一个响应头集合

* 响应主体

三：XMLHttpRequest对象使用实例

3.1 获取响应 （）

1）获取响应码:  status和statusText

2)  获取响应头：getResponseHeader() 和 getAllResponseHeaders(),XMLHttpRequest会自动处理cookie

3）获取响应主体： responseText或responseXML