标签：sed status 运行 获取文件 函数 存储 后台服务 必须 连接
什么是服务器：简单地，可以说服务器就是一个内存超大的计算机，可以存放很多数据和文件（当然，如果不需要太多的数据存储量，我们也可以用电脑、手机等一系列小型计算机作为服务器，只不过性能的差别而已）
网页浏览过程分析
如何配置自己的服务器程序（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, 2, 3, 4, 5, 6, 7, 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, 2, 3, 4, 5, 6, 7, 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的原理：
http请求方法：
GET——更适合用于获取数据（如：浏览帖子）
POST——更适合用于向服务器上传数据（如：用户注册）
GET、POST的区别：
①.get方式是通过网址传递数据的，而post是通过http content来传递数据的，这是它们最本质的区别；
②.由于网址不可能无限长（一般典型认为4K~10K的大小），所以get方式提交数据，容量有限，如果我们想提交一个图片，或者一个文件，get方式明显做不到，所以一般上传大文件是，不建议使用get方式; 而post一般的服务器可达到2G；其他更大的视频文件什么的，可以使用大文件上传控件，就不需要使用http了
③.GET是在URL里传数据：安全性差（几乎没什么安全性）、容量小，有缓存; 上传数据安全性好一点，但是也存在安全隐患，没有缓存（每一次post，都会向服务器提取新的数据）
标签：sed status 运行 获取文件 函数 存储 后台服务 必须 连接
原文地址：https://www.cnblogs.com/han-bky/p/10289600.html
