什么事Ajax?
AJAX是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下
创建步骤
- 创建一个异步对象
var xmlhttp = new XMLHttpRequest(); - 设置请求方式和请求地址
method:请求类型 GET 或 POST
url: 文件在服务器上的位置
async：true(异步) 或 false（同步）
xmlhttp.open("GET","get.php",true); - 发送请求
xmlhttp.send(); - 监听状态的变化
xmlhttp.onreadystatechange = function() {
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2. 请求已接收
// 3. 请求处理中
// 4. 请求已完成,且响应已就绪
if(xmlhttp.readystate === 4) {
// 处理返回的结果
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
//接收到服务器返回的数据
xml.responseText;
} else {
}
}
}
- Ajax在IE中使用
var xhr;
if(window.XMLHttpRequest) {
// code for IE7+，Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {
// code for IE6，IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
在IE浏览器中，如果通过Ajax发送GET请求，那么IE浏览器认为同一个URL只有一个结果 ，给URL添加一个参数就可以了xhr.open("GET","get.php?t="+ (new Date().getTime()),true);
- ajax请求封装
/**
*
* @param data
* @returns {string}
*/
// 将对象转换为字符串
function obj2str(data) {
data.t = new Date().getTime();
var res = [];
for (var key in data) {
// 在URL中是不可以出现中文的，如果出现了中文需要转码，可以调用encodeURLComponent
res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key]));
}
return res.join("&");
}
/**
*
* @param option
*/
function ajax(option) {
var str = obj2str(option.data);
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");
}
if (option.type.toLowerCase() === "get") {
xmlhttp.open(option.type,option.url+"?"+str,true);
xmlhttp.send();
} else {
xmlhttp.open(option.type,option.url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(str);
}
xmlhttp.onreadystatechange = function() {
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2. 请求已接收
// 3. 请求处理中
// 4. 请求已完成,且响应已就绪
if(xmlhttp.readystate === 4) {
clearInterval(timer);
// 处理返回的结果
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
option.success(xmlhttp);
} else {
option.error(xmlhttp);
}
}
}
// 判断外界是否传入了超时时间
if(option.timeout){
timer = setInterval(function() {
xmlhttp.abort();
clearInterval(timer);
}, option.timeout);
}
}
// 调用
ajax({
url:"",
data:"",
type:"",
timeout:3000,
success:function(xhr) {},
error:function(xhr){}
})
- post请求
必须放到oepn和send之间
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("userName=zs&Pwd=321");
jQuery ajax
$.ajax({
type:"GET",
url:"",
data:"userName=lnj&userPwd=123",
success:function(msg){
var obj = eval("("+msg+")");//处理非标准JSON字符串
$.each(obj, function(key, value) {})
},
error:function(xhr){
alert(xhr.status);
}
})
在低版本的IE中， 不可以使用原生的JSON.parse方法，可以使用json2.js框架来兼容
事件委托
$("body").delegate(".info",click,function(){});
cookie
cookie: 会话跟踪技术 客户端
session: 会话跟踪技术 服务端
- cookie作用
将网页中的数据保存在浏览器中 - cookie生命周期
默认情况下生命周期是一次会话(浏览器被关闭)
如果通过expires=设置了过期时间，并且过期时间没有过期，那么下次打开浏览器还是存在
如果通过expires=设置了过期时间，如果已经过期了，那么会立即删除保存的数据
var date = new Date();
date.setDate(date.getDate() + 1);
document.cookie = "age=33;expires="+date.toGMTString()+";";
- cookie注意点
cookie默认不会保存任何数据
cookie不能一次性设置多条数据，要想保存多条数据，只能一条一条的设置
cookie有大小和个数的限制
个数限制： 20~50
大小限制：4KB左右 - cookie作用范围
同一个浏览器的同一个路径下访问
如果在同一个浏览器中，默认情况下下一级路径就可以访问
如果在同一个浏览器中，想让上一级目录也能访问保存的cookie，那么需要:
document.cookie = "name=zs;path=/;";那么需要添加一个path属性才可以。 - 封装cookie
/**
* 添加cookie
* @param key
* @param value
* @param day 过期时间
* @param path
* @param domain
*/
function addCookie(key,value,day,path,domain) {
// 1.处理默认保存的路径
var index = window.location.pathname.lastIndexOf("/");
var currentPath = window.location.pathname.slice(0,index);
path = path || currentPath;
// 2.处理默认保存的domain
domain = domain || document.domain;
// 3.处理默认保存的domain
if (!day) {
document.cookie = key+"="+value+";path="+path+";domain="+domain+";";
} else {
var date = new Date();
date.setDate(date.getDate() + day);
document.cookie = key+"="+value+";expires="+date.toGMTString()+";path="+path+";domain="+domain+";";
}
}
/**
* 获取cookie
* @param key
* @returns {string}
*/
function getCookie(key) {
var res = document.cookie.split(":");
for(var i=0;i<res.length;i++) {
var temp = res[i].split("=");
if (temp[0].trim() === key) {
return temp[1];
}
}
}
/**
* 删除cookie
* @param key
*/
function delCookie(key,path) {
addCookie(key,getCookie(key),-1,path);
}
- 封装jquery.cookie.js
;(function ($,window) {
$.extend({
/**
* 添加cookie
* @param key
* @param value
* @param day 过期时间
* @param path
* @param domain
*/
addCookie: function(key,value,day,path,domain) {
// 1.处理默认保存的路径
var index = window.location.pathname.lastIndexOf("/");
var currentPath = window.location.pathname.slice(0,index);
path = path || currentPath;
// 2.处理默认保存的domain
domain = domain || document.domain;
// 3.处理默认保存的domain
if (!day) {
document.cookie = key+"="+value+";path="+path+";domain="+domain+";";
} else {
var date = new Date();
date.setDate(date.getDate() + day);
document.cookie = key+"="+value+";expires="+date.toGMTString()+";path="+path+";domain="+domain+";";
}
},
/**
* 获取cookie
* @param key
* @returns {string}
*/
getCookie: function(key) {
var res = document.cookie.split(":");
for(var i=0;i<res.length;i++) {
var temp = res[i].split("=");
if (temp[0].trim() === key) {
return temp[1];
}
}
},
/**
* 删除cookie
* @param key
*/
delCookie: function(key,path) {
addCookie(key,getCookie(key),-1,path);
}
});
})(jQuery,window);
- hash
用来记录页码
设置hash
window.location.hash = 3;
获取hash
window.location.hash.substring(1)
网友评论