ajax
Posted Blackatall
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax相关的知识，希望对你有一定的参考价值。
1.在IE低版本里，当用 get 请求发送数据时，会存在缓存问题：链接和上一次的一样，请求不会再发送给后台，而是用的缓存；假如后台更新，前端将无法呈现新内容，只能关闭浏览器。
解决方法：让请求地址不一样，但请求不变，比如加时间。
1 xhr.open("get","1.php?use=jj&pwd=123&_="+new Date().getTime(),true);
完整封装
1.node.js环境
node server.js
1 var http = require("http"); 2 var server = http.createServer(function (req, res) { 3 if (req.url !== "/favicon.ico") { 4 res.writeHead(200, {"Content-Type": "text/plain", "Access-Control-Allow-Origin": "http://localhost:63342"}); 5 res.write("hello,我是从服务器端接收的") 6 } 7 res.end(); 8 }); 9 server.listen(8888, "localhost", function () { 10 console.log("开始监听..."); 11 });
2.html,js,css
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>ajax demo</title> 7 <meta name="description" content=""> 8 <meta name="keywords" content=""> 9 <link href="" rel="stylesheet"> 10 </head> 11 <body> 12 <div id="ajxT" style="width:100px;height:50px;background: pink;"></div> 13 </body> 14 <script> 15 ajxT.onclick = function () { 16 ajax({ 17 type: "get",//可缺省，默认get 18 url: "http://localhost:8888", 19 aysn: true,//可缺省，默认true 20 data: {//可缺省，扩展json[{},{},{}] 21 use: "afei", 22 pwd: 123456 23 }, 24 success: function (i) {//可缺省 25 //var data=JSON.parse(i);//类数组的jsonstring->json，接着遍历json，在里面innerHTML,appendChild等等 26 var ajxT = document.getElementById(‘ajxT‘); 27 ajxT.innerHTML = i; 28 29 }, 30 error: function (i) {//可缺省 31 alert(i); 32 } 33 }); 34 }; 35 //ajax封装 36 //参数说明:data:json 代表需要传递的数据，字符串自行拼接 37 function ajax(json) { 38 var type = json.type || "GET", 39 url = json.url, 40 aysn = json.aysn !== false, 41 data = json.data, 42 success = json.success, 43 error = json.error; 44 //json->string,data存在才执行 45 data = data && (function () { 46 var dataStr = ""; 47 for (var key in data) data += key + "=" + data[key] + "&"; 48 return dataStr; 49 })(); 50 //让get请求的url后面跟上数据 51 if (/get/i.test(type)) { 52 url += "?" + (data || "") + "_=" + new Date().getTime();//data存在就拼接data，不存在赋空 53 //拼接时间解决get缓存问题，拼接时间放在此处，可避免缺省data时的缓存问题 54 data = undefined; 55 } 56 var xhr = new XMLHttpRequest(); 57 xhr.open(type, url, aysn); 58 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 59 xhr.send(data); 60 xhr.onreadystatechange = function () { 61 if (xhr.readyState === 4) { 62 var status = this.status; 63 if (status >= 200 && status < 300) { 64 success && success(this.responseText + new Date().getTime()); 65 } else { 66 error && error(status); 67 } 68 } 69 } 70 } 71 </script> 72 </html>
以上是关于ajax的主要内容，如果未能解决你的问题，请参考以下文章