什么是服务器：简单地，可以说服务器就是一个内存超大的计算机，可以存放很多数据和文件（当然，如果不需要太多的数据存储量，我们也可以用电脑、手机等一系列小型计算机作为服务器，只不过性能的差别而已）
网页浏览过程分析
如何配置自己的服务器程序（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表示读取服务器文件成功时，返回文件中的内容，返回给str3 ??????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，都会向服务器提取新的数据）
第十三节 Ajax基础
原文地址：https://www.cnblogs.com/han-bky/p/10289600.html