1.Get请求
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> //页面加载完毕后 创建对象 window.onload = function () { document.getElementById("btnGet").onclick = function () { //1.创建异步对象（类似小浏览器） var xhr = new XMLHttpRequest(); //2.设置参数，第三参数表示是否异步发送 //Get请求，请求参数是紧跟url后面 xhr.open("Get", "Handler.ashx?Name=Kim&&Age=18", true); //get请求会有缓存，让get不从浏览器读缓存 xhr.setRequestHeader("If-Modified-Since", "0"); //3.设置回调函数 xhr.onreadystatechange = function () { //当完全接收响应报文后 并且 状态码为200 if (xhr.readyState == 4 && xhr.status == 200) { //获取响应报文 var res = xhr.responseText; alert(res); } }; //4.发送异步请求 //Get请求没有请求体，则为null xhr.send(null); }; } </script> </head> <body> <input type="button" id="btnGet" value="Get请求方式"/> </body> </html>
2.Post请求
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> //页面加载完毕后 创建对象 window.onload = function () { //绑定点击事件 document.getElementById("btnPost").onclick = function () { //1.创建异步对象（类似一个小浏览器） var xhr = new XMLHttpRequest(); //2.设置参数，第三个参数表示是否异步发送 xhr.open("Post", "Handler.ashx", true); //设置请求报文体的编码格式，表单得到默认编码 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //3.设置回调函数 xhr.onreadystatechange = function () { //当完全接收响应报文 并且 响应状态码为200 if (xhr.readyState == 4 && xhr.status == 200) { //获取香型报文 var res = xhr.responseText; alert(res); } }; //直接拼接字符串key=value&&key=value xhr.send("Name=Kim&&Age=18"); } } </script> </head> <body> <input type="button" id="btnPost" value="Post请求"/> </body> </html>
3.封装一个ajaxHelper.js方法
var jsHelper = { //1.0 浏览器兼容的方式创建异步对象 makeXHR: function() { //声明异步对象变量 var xmlHttp = false; //声明 扩展 名 var xmlHttpObj = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "MSXML.XMLHttp"]; //判断浏览器是否支持 XMLHttpRequest，如果支持，则是新式浏览器，可以直接创建 if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } //否则，只能循环 遍历 老式浏览器 异步对象名，一一尝试创建，直到创建成功为止 else if (window.ActiveXObject) { for (i = 0; i < xmlHttpObj.length; i++) { xmlHttp = new ActiveXObject(xmlHttpObj[i]); if (xmlHttp) { break; } } } //判断 异步对象 是否创建 成功，如果 成功，则返回异步对象，否则返回false return xmlHttp ? xmlHttp : false; }, //2.0发送Ajax请求 doAjax: function(method, url, data, isAyn, callback) { method = method.toLowerCase(); //2.1创建异步对象 var xhr = this.makeXHR(); //2.2设置请求参数 xhr.open(method, url + (method == "get" ? "?" + data : ""), isAyn); //2.3根据请求的不同方式，在请求头中添加不同的属性 if (method == "get") { xhr.setRequestHeader("If-Modified-Since", 0); } else { xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } //2.4设置回调函数 xhr.onreadystatechange = function () { //如果接收完毕服务器返回的响应报文 if (xhr.readyState == 4) { //判断状态码是否正常 if (xhr.status == 200) { //调用回调函数 //异步对象调用回调函数，返回的结果保存到xhr对象中 callback(xhr); } } }; //2.5发送请求（如果是post，则传参数，否则为null） xhr.send(method != "get" ? data : null); }, //3.0发送Post请求 doPost: function(url, data, isAyn, callback) { this.doAjax("post", url, data, isAyn, callback); }, //4.0发送Get 请求 doGet: function(url, data, isAyn, callback) { this.doAjax("get", url, data, isAyn, callback); } };
调用代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript" src="ajaxHelper.js"></script> <script> window.onload=function() { document.getElementById("btnGet").onclick = function () { jsHelper.doGet("getHandler.ashx","Name=Kim",true,function (resObj){ var res = resObj.responseText; alert(res); }); }; document.getElementById("btnPost").onclick=function() { jsHelper.doPost("postHandler.ashx", "Age=18", true, function(resObj) { var res = resObj.responseText; alert(res); }); } } </script> </head> <body> <input type="button" value="Get请求" id="btnGet"/> <input type="button" value="Post请求" id="btnPost"/> </body> </html>
4.Ajax去缓存
| 1.在ajax发送请求前加上anyAjaxObj.setRequestHeader(“If-Modified-Since”,”0”)
2.在ajax发送请求前加上anyAjaxObj.SetRequestHeader(“Cache-Control”,”no-cache”) 3.在URL后面加上一个随机数：“fresh=”+ Math.random() 4.在URL后面加上事件搓：“nowtime=”+ new Date().getTime() 5.如果是使用jQuery，直接这样就可以了$.ajaxSetup({cache:false})，全局设置 【这样页面的所有ajax都会执行这条语句就不会保存缓存记录】 |