其实我想完整的总结一下前端网络的那些东西，但我想不到题目了啊。
就从Ajax开始说吧...
Ajax是什么？
曾经，我们每发送一个请求，都要重新加载一下页面。二璇妹妹很小很小时候登录某小游戏网站，输入了账号，但输错了密码，于是乎页面刷新了，还要重新输入用户名，体验贼次啊，好气。
2005年，google地图放大或移动时，做到了不刷新页面就显示新的信息，众人大呼 “哇，这是好棒~~”，嗯，Ajax就风靡起来了。
Ajax Asynchronous Javascript And XML（异步JavaScript和XML），是一种不刷新整个网页就与服务器通讯的办法，数据在客户端与服务器之间独立传输，服务器返回的不再是整个界面。
Ajax的x指的是 xml，曾经Ajax以异步形式操作的是 xml,现在Ajax操作的是Json。
Form表单
上面那个让二璇妹妹很气的事就可能是用form表单提交的信息。那么我们来了解一下吧！
传统的form表单主要有三个重要的属性
method：GET / POST请求
action：后台文件地址
-
enctype：
application/x-www-form-urlencoded在发送前编码所有字符（默认情况下）
multipart/form-data不对字符进行编码(<input type='file'> 主要用于表单上传文件时)form表单中method属性 GET ，POST
GET 使用URL 或Cookie 传参，而POST将数据，放在BODY中。
GET 的URL会有长度上的限制， POST可以传输很多数据。
但事实上HTTP协议对GET和POST 都没有对数据的长度进行限制，只是浏览器限制了URL的长度POST比GET安全。
因为GET的参数直接暴露在url上，并且会完整保留在浏览器历史记录里GET产生一个TCP数据包，POST产生两个TCP数据包。
对于GET请求，浏览器会把http header和data一并发送出去，服务器响应200。而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200
Ajax的优点
1.页面无刷新与服务器通信
2.以异步形式与服务器通信，不需要打断用户操作。
3.减轻服务器的负担。
Ajax的缺点
1.破坏浏览器的后退机制。
动态更新页面的情况下，用户无法回到前一个页面状态
2.安全问题
会暴露比以前更多的数据和服务器逻，遇到跨站点脚本攻击、sqi注入攻击问题。
3.对搜索引擎支持较弱（seo）。
4.在移动端兼容性比较差
5.违背了url和资源定位的初衷。
一个url如果采用了ajax技术，也许在该url地址下面看到的和别人在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
还是先说几个重要的参数
对象上三个很重要的方法：
- **.open(‘method’, ‘url’, ‘true’) **
建立对服务器的调用，method参数可以是get、post或者put。
url参数可以是相对url或者绝对url。
第三个参数是选择异步还是同步，异步是true。 - **.send(content) **
向服务器发送请求 - **.setRequestHeader(‘label’, ‘value’) **
把指定首部设置为提供的值，在设置任何首部之前必须调用open方法。
对象的属性 -
onreadystatechange
状态改变触发器 -
readyState
对象的状态
0代表未初始化，此时已经创建了一个XMLHttpRequest对象
1代表读取中，此时代码已经调用XMLHttpRequest的open方法并且XMLHttpRequest已经将请求发送到服务期。
2代表已读取，此时已经通过open方法把一个请求发送到服务端，但是还没有收到。
3代表交互中，此时已经收到http响应头部信息，但是消息主体部分还没有完全接受
4代表完成，此时响应已经被完全接受。
-
responseText
服务器进程返回数据的文本版本 -
responseXML
服务器进程返回数据的兼容DOM的XML文旦对象 - status 服务器返回的状态码
让我们来封装一个Ajax吧
function Ajax(method,url,flag,data,callBack){
/* 创建对象*/
var xhr = null;
if(window.XMLHttpRequest){//用对象访问，即使没有该属性也是返回undefined不会报错。
xhr = new window.XMLHttpRequest();//与后台服务器交换数据
}else{
xhr = new window.ActiveXObject('Microsoft.XMLHTTP');//兼容ie浏览器
}
/*创建与服务器的连接*/
if(method === 'GET'){
xhr.open('GET',url + '?' + data, flag);//建立与服务器的连接，flag表示是否异步
xhr.send();//向服务器发送请求
}else if(method === 'POST'){
xhr.open('POST',url,flag);
xhr.setRequestHeader('Content-type','application/x-www.form-urlencoded');//设置发送数据格式
xhr.send(data);
}
/*实时监听对象状态*/
xhr.onreadystatechange = function(){//状态改变事件触发器
if(xhr.readyState === 4){
if(xhr.status === 200){
callBack(xhr.responseText);
}else{
alert('error');
}
}
}
}
好吧，我有点懒得解释每个函数，就简单的注释一下。。。
readyState 和 status放在http里说吧，✌️
同源策略
同源策略(Same-Origin Policy)只有在域名、协议名、端口号都相同的情况下，才称为同源。
不同源的客户端脚本在没有明确授权的情况下，是不能够读写对方的资源的。
~~~哦，我们得了解一下什么是域名、协议名、端口号。
url(资源定位器)的构成
（原文：http://blog.csdn.net/ergouge/article/details/8185219 ）
http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name
从上面的URL可以看出，一个完整的URL包括以下几部分：
1.协议部分
该URL的协议部分为“http：”，这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符
2.域名部分
该URL的域名部分为“www.aspxfans.com”。一个URL中，也可以使用IP地址作为域名使用
3.端口部分
跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口
4.虚拟目录部分
从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”
5.文件名部分
从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名
6.锚部分
从“#”开始到最后，都是锚部分。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分
7.参数部分
从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。本例中的参数部分为“boardID=5&ID=24618&page=1”。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。
域名是倒着解析的
举个栗子！！
www.sina.com.cn
.cn是顶级域名
.com.cn是二级域名
.sina.com.cn是三级域名回归同源策略和Ajax
Ajax也是URL来获取资源的，也会受到同源策略的限制，当不满足条件的时候，浏览器是不允许我们使用ajax来获取资源的。
我们在使用AJAX的时候如果访问了一个不同源的资源的话，会直接报错。
