什么是服务器：简单地，可以说服务器就是一个内存超大的计算机，可以存放很多数据和文件（当然，如果不需要太多的数据存储量，我们也可以用电脑、手机等一系列小型计算机作为服务器，只不过性能的差别而已）
网页浏览过程分析
如何配置自己的服务器程序（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的原理：
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，其基本格式为：“名字=值&名字=值&...”；
下面我们换一种方式：“method="post"”然后运行程序，地址栏的结果为“http://www./”后面没有“?user...”这些东西，但是它确实也已经提交上去了，我们可以通过：右键->检查元素->Network/网络->Header查看到username和password
http请求方法：
GET——更适合用于获取数据（如：浏览帖子）
POST——更适合用于向服务器上传数据（如：用户注册）
GET、POST的区别：
①.get方式是通过网址传递数据的，而post是通过http content来传递数据的，这是它们最本质的区别；
②.由于网址不可能无限长（一般典型认为4K~10K的大小），所以get方式提交数据，容量有限，如果我们想提交一个图片，或者一个文件，get方式明显做不到，所以一般上传大文件是，不建议使用get方式; 而post一般的服务器可达到2G；其他更大的视频文件什么的，可以使用大文件上传控件，就不需要使用http了
③.GET是在URL里传数据：安全性差（几乎没什么安全性）、容量小，有缓存; 上传数据安全性好一点，但是也存在安全隐患，没有缓存（每一次post，都会向服务器提取新的数据）
编写Ajax四大步骤：
1. 创建Ajax对象：ActiveXObject("Microsoft.XMLHTTP") 和 XMLHttpRequest()
2. 连接服务器：open(方法, 被读文件名, 异步传输) //其中方法为“get”或“post”； 正常思维情况下，同步（多件事一起）和异步（事情一件一件来），但是在此“同步”表示 事情一件一件完成，而“异步”表示 多个事件一起完成。 但是需要注意的是，Ajax天生就是用来做异步（多个事件一起完成）操作的，因为这样在发送请求后，服务器响应请求期间，我们还可以做其他操作；如果是同步的话，我们只能等一个请求得到响应完成后才能做其他操作，这对人的耐性是一种考验。所以我们让open的第三个参数为“true”即可，表示异步传输。
3. 发送请求：send() （高速服务器需要哪些文件）
4. 接收返回值：onreadystatechange事件
请求状态监控：
readyState属性：请求状态
0 （未初始化）还没有调用open()方法，整个Ajax对象刚刚创建时，即在第一步；
1 （载入）已调用send()方法，正在发送请求，即第二、三步；
2 （载入完成）send()方法完成，已从服务器端收到全部响应内容，即第三步，但是此时还不能 使用 服务器返回的内容，因为载入完成的可能是一些是加密文件（保证安全，如https）、压缩文件（减小带宽的使用）等等原始文件，所以还需要进行 数据解析；
3 （解析）正在解析响应内容，即第三、四步之间；
4 （完成）响应内容解析完成，可以在客户端调用了，此时的数据就可以直接被使用了，即第四步。
statue属性：请求结果，是HTTP状态码，200表示成功，除了200以外基本表示失败，比如“404”更是表示失败，最常见
responseText：表示获取读取信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编写Ajax基础</title>
<script src="63-Ajax函数封装.js"></script>
<script>
//补充一点：
//许多全局变量，其实是window的一个属性，例如：
// var a = 12;
// alert(a); //相当于“window.alert(window.a);”
//但是如果我们不定义全局变量a，而是直接alert
// alert(a); //系统报错，报“a is not defined”错误（可通过“检查元素查看”）
//但是我们再加上一个window时直接alert
// alert(window.a); //系统不会报错，而是弹出“undefined”
//上述说明：用没有定义的变量——报错；用没有定义的属性——undefined
window.onload = function () {
var oBtn = document.getElementById('btn1');
oBtn.onclick = function () {
//1.创建Ajax对象（存在兼容问题）
// if (XMLHttpRequest) {
if (window.XMLHttpRequest) {
//只兼容 非IE6的浏览器
var oAjax = new XMLHttpRequest();
} else {
//在IE6浏览器中，我们使用以下方法来创建Ajax对象，其中ActiveX...表示插件的意思，但是IE6默认已经
//装上了，所以实际意义上ActiveXObject()算不上一个插件。但是其他浏览器都不支持！
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//上述IF语句并没有解决兼容问题，其实兼容问题已经解决，但是在IE6浏览器依然报错，影响运行，因为IE6把
//“if (XMLHttpRequest)”中的“XMLHttpRequest”当成了变量，所以会报“变量未定义”错误，我们改为
//“if (window.XMLHttpRequest)” 虽然是属性未定义，但是不会在IE6浏览器下报错，不影响程序运行。
// alert(oAjax); //返回“[object XMLHttpRequest]”，测试用
//2.连接服务器
//open(方法, 要读文件名, 异步传输);
oAjax.open('GET', '61.txt?t='+new Date().getTime(), true); //?t='+new Date().getTime()表示取消缓存
//3.发送请求
oAjax.send();
//4.接收返回
oAjax.onreadystatechange = function () { //onreadystatechange用于跟服务器交互的时候，发生的一个事件
//但是，跟服务器的交互是需要过程的，我们怎么知道完没完成交互呢？这时候我们需要用到readyState
// oAjax.readyState; //浏览器和服务器的交互进行到哪一步了？
//oAjax.readyState == 4表示整个交互已经完成，通信成功/读取完成
if (oAjax.readyState == 4) { //读取完成（并不一定是读取成功，就算文件传输出错，readyStatue也有可能等于4）所以我们需要进一步判断：
if (oAjax.status == 200) { //status是HTTP状态码，200表示成功，除了200以外基本表示失败，比如“404”更是表示失败
alert('成功！'+oAjax.responseText); //oAjax.responseText表示获取读取信息
} else {
alert('失败！');
}
}
}
};
};
</script>
</head>
<body>
<button id="btn1">读取</button>
</body>
</html>
把上述代码中的Ajax的使用封装成一个函数，方便之后的使用：
//其中三个参数： // URL：是我要从服务器上读取文件的路径（绝对和相对路径都行） // fnSucc：是一个函数，即当读取文件成功的情况下执行的函数 // fnFaild：是一个函数，即当读取文件失败的情况下执行的函数 function Ajax(url, fnSucc, fnFail) { //1.创建Ajax对象 if (window.XMLHttpRequest) { //只兼容 非IE6的浏览器 var oAjax = new XMLHttpRequest(); } else { var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); } //2.连接服务器 //open(方法, 要读文件名, 异步传输); oAjax.open('GET', url+'?t='+new Date().getTime(), true); //?t='+new Date().getTime()表示取消缓存 //3.发送请求 oAjax.send(); //4.接收返回 oAjax.onreadystatechange = function () { //onreadystatechange用于跟服务器交互的时候，发生的一个事件 if (oAjax.readyState == 4) { if (oAjax.status == 200) { fnSucc(oAjax.responseText); //读取文本文件成功，返回文本内容 } else { if (fnFail) { fnFail(oAjax.status); //提示失败是的状态， } } } }; }
其实上面“Ajax函数封装”与“59-ajax.js”文件，内容相同，只不过在此做了一些解释，和兼容性问题的处理
1 //简单调用封装好的Ajax函数
2 Ajax('61.txt', function () {
3 alert(str);
4 });
Ajax数据
数据类型：
什么叫数据类型——英语、中文
XML（基本已被淘汰，同等数据量，xml比json占用的存储空间大的多，所以传输时带宽占用量大）、Json（目前常用）
字符集：编程中，让所有文件字符集（字符编码）相同/统一