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>

 

posted @ 2017-12-04 17:15  blackatall  阅读(166)  评论(0)  编辑  收藏  举报