一、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>