Ajax基础

技术2022-07-10 104

什么是Ajax

无刷新数据读取用户注册、在线聊天室

使用Ajax

缓存、阻止缓存（new Date().getTime()） <script> window.onload=function () { var oBtn=document.getElementById('btn1'); oBtn.onclick=function () { ajax('arr2.txt?t='+new Date().getTime(), function (str){ var arr=eval(str); alert(arr[0].a); }, function (){ alert('失败'); }); }; }; </script> </head> <body> <input id="btn1" type="button" value="读取" /> </body>

例子：将data读到的数据读取到页面中并加入到ul中 data.txt

[{user: 'blue', pass: '123456'},{user: '张三', pass: '654321'},{user: '李四', pass: '789456'},{user: '王五', pass: '7777'}] <script src="ajax.js"></script> <script> window.onload=function () { var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { ajax('data.txt?t='+new Date().getTime(), function (str){ var arr=eval(str); for(var i=0;i<arr.length;i++) { var oLi=document.createElement('li'); oLi.innerHTML='用户名：<strong>'+arr[i].user+'</strong>密码：<span>'+arr[i].pass+'</span>'; oUl.appendChild(oLi); } }, function (){ alert('失败'); }); }; }; </script> </head> <body> <input id="btn1" type="button" value="读取" /> <ul id="ul1"> </ul> </body>

Ajax原理

HTTP请求方法

GET——用于获取数据（如：浏览帖子）POST——用于上传数据（如：用户注册）

Processed: 0.028, SQL: 9