AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载
整个网页的情况下,对网页的某部分进行更新。
function ajax(option) {
// 0.将对象转换为字符串
var str = obj2str(option.data); // key=value&key=value;
// 1.创建一个异步对象
var xmlhttp, timer;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.设置请求方式和请求地址
/*
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
*/
if(option.type.toLowerCase() === "get"){
xmlhttp.open(option.type, option.url+"?"+str, true);
// 3.发送请求
xmlhttp.send();
}else{
xmlhttp.open(option.type, option.url,true);
// 注意点: 以下代码必须放到open和send之间
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(str);
}
// 4.监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
/*
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
*/
if(xmlhttp.readyState === 4){
clearInterval(timer);
// 判断是否请求成功
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// 5.处理返回的结果
// console.log("接收到服务器返回的数据");
option.success(xmlhttp);
}else{
// console.log("没有接收到服务器返回的数据");
option.error(xmlhttp);
}
}
}
// 判断外界是否传入了超时时间
if(option.timeout){
timer = setInterval(function () {
console.log("中断请求");
xmlhttp.abort();
clearInterval(timer);
}, option.timeout);
}
}
2、JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言
的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
JSON 和 JS 对象互转
要实现从JSON字符串转换为JS对象,使用 JSON.parse() 方法:
var obj = JSON.parse(’{“a”: “Hello”, “b”: “World”}’); //结果是 {a: ‘Hello’, b: ‘World’}
要实现从JS对象转换为JSON字符串,使用 JSON.stringify() 方法:
var json = JSON.stringify({a: ‘Hello’, b: ‘World’}); //结果是 ‘{“a”: “Hello”, “b”: “World”}’
3、cookie
cookie 会话跟踪技术 客户端
session 会话跟踪技术 服务端
cookie作用:将网页中的数据保存到浏览器
document.cookie = “Name=value;”
cookie生命周期:默认情况下一次会话(关闭浏览器)
expires指定过期时间
var date = new Date();
date.setDate(date.getDate() + 1)
document.cookie = "Name=value;expires="+date.toGMTString()+";";
cookie注意点:cookie有大小和个数的限制(浏览器不同个数不同20~50)
大小限制:4KB左右
cookie作用范围:同一个浏览器的同一个路径下访问