Ajax？！！

---

其实我想完整的总结一下前端网络的那些东西，但我想不到题目了啊。
就从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 不对字符进行编码( 主要用于表单上传文件时)

  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的时候如果访问了一个不同源的资源的话，会直接报错。