背景:业务需求是,一个前端(手机和浏览器)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