第十三节 Ajax基础
|
什么是服务器：简单地，可以说服务器就是一个内存超大的计算机，可以存放很多数据和文件（当然，如果不需要太多的数据存储量，我们也可以用电脑、手机等一系列小型计算机作为服务器，只不过性能的差别而已） 网页浏览过程分析 如何配置自己的服务器程序（AMP）：（可以使用wamp一路“下一步”安装本地服务器，然后找到，安装目录中的“www”文件夹（自带内容没什么用，可以直接删除）把我们需要放服务器上的网页直接放在该文件夹中即可，安装过程“自行百度”） ? 什么是Ajax： 简单来说，就是可以让JS在不刷新页面的情况下读取服务器上的数据，即无刷新数据读取 用户注册、在线聊天室 异步、同步 ? 如何使用Ajax 基础：请求并显示静态TXT文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>读取文本文件</title> <script src="59-ajax.js"></script> <script> window.onload = function () { var oBtn = document.getElementById(‘btn1‘); oBtn.onclick = function () { ajax(‘59.txt‘,function (str) { //其中str表示读取服务器文件成功时，返回文件中的内容，返回给str alert(str); //当然，要读取的文件一定要有内容才能读取到内容，否则读取的也是空白。 },function () { //一定要加上，读取失败的函数，否则可能运行不成功 alert("对不起，运行错误，未能成功读取文件！"); }); }; }; </script> </head> <body> <button id="btn1">读取文件</button> </body> </html> 另外需要注意的是，运行上述代码，当我们需要获取文件内容时，必须搭建好本地服务器，并用在浏览器的地址栏输入“localhost/59.html”才能正确运行，否则运行失败。比如，在此编辑器中直接打开浏览器运行该文件，我们将获取不到文件，并提示“读取失败”。??????? 当然如果我们在没搭建好服务器是运行的话，怎么运行都会失败，甚至不会弹出“读取失败”的提示！
//其中三个参数：
// URL：是我要从服务器上读取文件的路径（绝对和相对路径都行）
// fnSucc：是一个函数，即当读取文件成功的情况下执行的函数
// fnFaild：是一个函数，即当读取文件失败的情况下执行的函数
function ajax(url,fnSucc,fnFaild) {
//1.创建Ajax对象
if (window.XMLHttpRequest) {
var oAjax = new XMLHttpRequest();
} else {
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器（打开和服务器的连接）
oAjax.open(‘GET‘,url,true);
//3.发送
oAjax.send();
//4.接收
oAjax.onreadystatechange = function () {
if (oAjax.readyState == 4) {
if (oAjax.status == 200) {
// alert(‘成功了：‘+oAjax.responseText);
//把文本内容返回出来……
fnSucc(oAjax.responseText);
} else {
fnFaild(oAjax.status);
}
}
}
}
文本随便写一个文本即可，只要命名为“59.txt”就好了 ? 字符集编码：在开发网站时，要求编码要统一，包括HTML、CSS、JS、被读取的文本文件等必须是统一的编码方式。 缓存：缓存是当我们读取文件内容后，文件内容被修改，但是我们刷新一两次页面，读取的数据仍然是未修改文件前的内容，这也是缓存存在的弊端，像IE浏览器缓存更严重，必须关掉网页然后再打开才能读取到修改后的文本。 阻止缓存：组织缓存我们用的方法有很多，下面举一种，如下： 1 oBtn.onclick = function () { 2 // ajax(‘59.txt‘,function (str) { //其中str表示读取服务器文件成功时，返回文件中的内容，返回给str 3 ajax(‘59.txt?t=‘+new Date().getTime(),function (str) { //用该语句替换上面语句，在文件名后面加上一个“?t=”,来阻止缓存 4 alert(str); //当然，要读取的文件一定要有内容才能读取到内容，否则读取的也是空白。 5 },function () { //一定要加上，读取失败的函数，否则可能运行不成功 6 alert("对不起，运行错误，未能成功读取文件！"); 7 }); 8 }; 其中“?t=”，表示GET接收数据，其实“t”是没什么用的，不会被后台服务器接收识别，只是给浏览器看的，为了让url每次都不一样 ? 动态数据：请求JS（或Json）文件 eval的使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>读取动态数据</title> <script src="59-ajax.js"></script> <script> window.onload = function () { var oBtn = document.getElementById(‘btn1‘); oBtn.onclick = function () { // ajax(‘60-arr.txt?t=‘+new Date().getTime(),function (str) { // // alert(str); //虽然60.txt文件是一个数组形式的文件，但是返回的str任然是字符串，而非数组 // //此时返回的数据是“[1,2,3,4,5,6,7,8]”，“str.length=24”，“typeof(str)为string” // //那么我们如何把一个以字符串形式存储的数组，以数组的形式提取出来呢？ // //我们需要用到“eval()”函数，它是用来把一个语句里面的内容解析成一个JS可以识别的东西 // // alert(eval(str)); //返回值为“1,8”此时就为一个数组了，如下： // var arr = eval(str); // alert(arr[3]); //返回值为 4 //我们再读取一个json类型的数据试试，看是什么样子？ ajax(‘60-json.txt?t‘+new Date().getTime(),function (str) { var arr = eval(str); // alert(arr[0]); //返回值为“[object Object]” alert(arr[0].a); //返回值为“5”，正确 },function () { //一定要加上，读取失败的函数，否则可能运行不成功 alert("对不起，运行错误，未能成功读取文件！"); }); }; }; </script> </head> <body> <button id="btn1">读取文件</button> </body> </html> 其中上面代码用到的“60-arr.txt”文件内容为“[1,8]”；“60-json.txt”文件的内容为“[{a:5,b:7},{a:8,b:12}]” ? DOM创建元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>读取文本文件</title> <script src="59-ajax.js"></script> <script> window.onload = function () { var oBtn = document.getElementById(‘btn1‘); var oUl = document.getElementById(‘ul1‘); oBtn.onclick = function () { ajax(‘61.txt?t=‘+new Date().getTime(),function (str) { var arr = eval(str); //读取到的数据是一个数组 // alert(arr[0].a); //现在我们想做到：点击“读取文件”按钮，系统自动添加<li>标签，便签内为“用户名：blue密码：123456”这种形式。 for (var i = 0; i < arr.length; i++) { var oLi = document.createElement(‘li‘); oLi.innerHTML = ‘用户名：<strong>‘+arr[i].user+‘</strong>密码：<span>‘+arr[i].password+‘</span>‘; oUl.appendChild(oLi); } },function () { //一定要加上，读取失败的函数，否则可能运行不成功 alert("对不起，运行错误，未能成功读取文件！"); }); }; }; </script> </head> <body> <button id="btn1">读取文件</button> <ul id="ul1"> <!--<li>用户名：<strong>blue</strong>密码：<span>123456</span></li>--> </ul> </body> </html>
[{user: ‘blue’,password: ‘123456’},{user: ‘张三’,password: ‘654321’},{user: ‘李四’,password: ‘789456’},{user: ‘王五’,password: ‘777777’},]
局部刷新：请求并显示部分网页文件（为学习到！有待补充） ? Ajax的原理：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Ajax原理</title> 6 </head> 7 <body> 8 <!--<form action="http://www...." method="post">--> 9 <form action="http://www...." method="post"> 10 用户名：<input type="text" name="username"/> 11 密码：<input type="password" name="password"/> 12 <input type="submit"/> 13 </form> 14 </body> 15 </html> 填好用户名和密码后，点击提交按钮，在地址栏中会出现“http://www./?username=hahah&password=1231223”说明这些值都被传递过去了其实这就是get方式（也是默认方式：即当<form>标签中不放method="get"时，缺省情况下也存在“method="get"”）：放入url，其基本格式为：“名字=值&名字=值&...”； http请求方法： GET——更适合用于获取数据（如：浏览帖子） POST——更适合用于向服务器上传数据（如：用户注册） GET、POST的区别： ①.get方式是通过网址传递数据的，而post是通过http content来传递数据的，这是它们最本质的区别； ②.由于网址不可能无限长（一般典型认为4K~10K的大小），所以get方式提交数据，容量有限，如果我们想提交一个图片，或者一个文件，get方式明显做不到，所以一般上传大文件是，不建议使用get方式;? 而post一般的服务器可达到2G；其他更大的视频文件什么的，可以使用大文件上传控件，就不需要使用http了 ③.GET是在URL里传数据：安全性差（几乎没什么安全性）、容量小，有缓存;? 上传数据安全性好一点，但是也存在安全隐患，没有缓存（每一次post，都会向服务器提取新的数据） （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
