一、js原生发送ajax异步请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-ajax-get</title>
<!--
1.什么是Ajax?
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
-->
<script>
window.onload = function (ev) {
var oBtn = document.querySelector("button");
oBtn.onclick = function (ev1) {
// 1.创建一个异步对象
var xmlhttp=new XMLHttpRequest();
// 2.设置请求方式和请求地址
/*
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
*/
xmlhttp.open("GET", "04-ajax-get.php", true);
// 3.发送请求
xmlhttp.send();
// 4.监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
/*
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
if(xmlhttp.readyState === 4){
// 判断是否请求成功
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// 5.处理返回的结果
console.log("接收到服务器返回的数据");
}else{
console.log("没有接收到服务器返回的数据");
}
}
}
}
}
</script>
</head>
<body>
<button>发送请求</button>
</body>
</html>
解决IE6、IE5发送ajax兼容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-ajax-get</title>
<script>
window.onload = function (ev) {
var oBtn = document.querySelector("button");
oBtn.onclick = function (ev1) {
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");
}
// var xhr = new XMLHttpRequest();
/*
在IE浏览器中, 如果通过Ajax发送GET请求, 那么IE浏览器认为
同一个URL只有一个结果
05-ajax-get.txt === abc
console.log(Math.random());
console.log(new Date().getTime());
*/
xhr.open("GET","05-ajax-get.txt?t="+(new Date().getTime()),true);
xhr.send();
xhr.onreadystatechange = function (ev2) {
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300 ||
xhr.status === 304){
// alert("请求成功");
alert(xhr.responseText);
}else{
alert("请求失败");
}
}
}
}
}
</script>
</head>
<body>
<button>发送请求</button>
</body>
</html>
原生JS发送ajax请求封装代码
function obj2str(data) {
/*
{
"userName":"lnj",
"userPwd":"123456",
"t":"3712i9471329876498132"
}
*/
data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
data.t = new Date().getTime();
var res = [];
for(var key in data){
// 在URL中是不可以出现中文的, 如果出现了中文需要转码
// 可以调用encodeURIComponent方法
// URL中只可以出现字母/数字/下划线/ASCII码
res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key])); // [userName=lnj, userPwd=123456];
}
return res.join("&"); // userName=lnj&userPwd=123456
}
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之间，设置了这个请求头post方法才能传参
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);
}
}
二、jQuery方式发送ajax请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-ajax-jquery</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
window.onload = function (ev) {
var oBtn = document.querySelector("button");
oBtn.onclick = function (ev1) {
$.ajax({
url: "09-ajax-jquery.php",
type: "get",
data: "userName=lnj&userPwd=654321",
success: function(msg){
alert(msg );
},
error: function (xhr) {
alert(xhr.status);
}
});
</script>
</head>
<body>
<button>发送请求</button>
</body>
</html>
处理json数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-ajax-json</title>
<script src="myAjax2.js"></script>
<script>
window.onload = function (ev) {
var oBtn = document.querySelector("button");
oBtn.onclick = function (ev1) {
$.ajax({
type:"get",
url:"12-ajax-json.php",
success: function (xhr) {
// console.log(xhr.responseText);
var str = xhr.responseText;
/*
在低版本的IE中, 不可以使用原生的JSON.parse方法, 但是可以使用json2.js这个框架来兼容
*/
var obj = JSON.parse(str);
// console.log(obj);
console.log(obj.name);
console.log(obj.age);
},
error: function (xhr) {
console.log(xhr.status);
}
})
}
}
</script>
</head>
<body>
<button>发送请求</button>
</body>
</html>
处理xml数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11-ajax-xml</title>
<script src="myAjax2.js"></script>
<script>
window.onload = function (ev) {
var oBtn = document.querySelector("button");
oBtn.onclick = function (ev1) {
$.ajax({
type:"get",
url:"11-ajax-xml.php",
success: function (xhr) {
// console.log(xhr.responseXML);
// console.log(document);
var res = xhr.responseXML;
console.log(res.querySelector("name").innerHTML);
console.log(res.querySelector("age").innerHTML);
},
error: function (xhr) {
console.log(xhr.status);
}
})
}
}
</script>
</head>
<body>
<button>发送请求</button>
</body>
</html>
三、封装处理cookie的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16-cookie-封装</title>
<script>
window.onload = function (ev) {
// document.cookie = "age=88;";
// addCookie("gender", "male");
// addCookie("score", "998", 1, "/", "127.0.0.1");
function addCookie(key, value, day, path, domain) {
// 1.处理默认保存的路径
// if(!path){
// var index = window.location.pathname.lastIndexOf("/")
// var currentPath = window.location.pathname.slice(0, index);
// path = currentPath;
// }
var index = window.location.pathname.lastIndexOf("/")
var currentPath = window.location.pathname.slice(0, index);
path = path || currentPath;
// 2.处理默认保存的domain
domain = domain || document.domain;
// 3.处理默认的过期时间
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+";";
}
}
function getCookie(key) {
// console.log(document.cookie);
var res = document.cookie.split(";");
// console.log(res);
for(var i = 0; i < res.length; i++){
// console.log(res[i]);
var temp = res[i].split("=");
// console.log(temp);
if(temp[0].trim() === key){
return temp[1];
}
}
}
console.log(getCookie("name"));
// 默认情况下只能删除默认路径中保存的cookie, 如果想删除指定路径保存的cookie, 那么必须在删除的时候指定路径才可以
function delCookie(key, path) {
addCookie(key, getCookie(key), -1, path);
}
delCookie("name", "/");
}
</script>
</head>
<body>
</body>
</html>
