ajax与跨域

一、XMLHttpRequest

四步：

　　1.创建对象var xhr = new XMLHttpRequest();
　　2.xhr.onreadystatechange 判断XHR 对象的 readyState 属性，判断状态码属性。
　　3.xhr.open(method, url, true);
　　4.xhr.send(null);

细节：

　　readyState属性：
　　0 ：未初始化。尚未调用 open() 方法。
　　1 ：启动。已经调用 open() 方法，但尚未调用 send() 方法。
　　2 ：发送。已经调用 send() 方法，但尚未接收到响应。
　　3 ：接收。已经接收到部分响应数据。
　　4 ：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

　　xhr.open();
　　xhr.open(method, url, true); 三个参数从左往右分别是：
　　请求类型（get,post）、请求地址、是否异步发送请求，只能向同一个域中使用相同端口和协议的 URL 发送请求

　　xhr.setRequestHeader(“key”, “value”);
　　必须在调用 open() 方法之后且调用 send() 方法之前调用

　　xhr.send()
　　 send() 方法接收一个参数，如果不需要通过请求主体发送数据，则必须传入 null ，这个参数对有些浏览器来说是必需的。

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4){
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                    console.log(data);
                } else {
                    console.log("unsuccessful: " + xhr.status);
                }
            }
        };
        xhr.open("post", "/ajax/data", true);
        // xhr.setRequestHeader("key", "value");
        xhr.send(null);

服务器端：

var myHeader = xhr.getResponseHeader("key");
var allHeaders = xhr.getAllResponseHeaders();

二、URL处理（处理中文参数）

url组成: http://www.cheatlys.info/index.html

scheme://host.domain:port/path/filename

        scheme   -   定义因特网服务的类型。最常见的类型是 http
        host     -   定义域主机（http 的默认主机是 www）
        domain   -   定义因特网域名，比如 runoob.com
        :port    -   定义主机上的端口号（http 的默认端口号是 80）
        path     -   定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
        filename -   定义文档/资源的名称

?    分隔实际的URL和参数                                          
#    表示书签                                  
&    URL 中指定的参数间的分隔符               

url获取

location.hostname   // web 主机的域名
location.pathname    // 当前页面的路径和文件名
location.port    // web 主机的端口 （80 或 443）
location.protocol   //返回所使用的 web 协议（http:// 或 https://）
location.reload(true);  //强制从服务器重新加载当前页面
 window.location.search  // 是从当前URL的?号开始的字符串

使用 replace() 方法重新加载页面，并将 window.location.pathname 的值插入到 hash
function reloadPageWithHash() {
  var initialPage = window.location.pathname;
  window.location.replace('http://example.com/#' + initialPage);
}

GET 最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到 URL 的末尾，以便将信息发送给服务器。对 xhr. open() 方法的 URL 末尾的查询字符串必须经过正确的编码才行。

1、 encodeURI()函数:

　　某些字符被替换成了十六进制的转义序列,该方法不会对 ASCII 字母和数字进行编码，不会对这些 ASCII 标点符号进行编码：- _ . ! ~ * ' ( )。

console.log(encodeURI("http://cheatlys.info?id=dfs&name=zzz"));
console.log(encodeURI(",/?:@&=+$#"));

解码： decodeURI()

2、 encodeURIComponent()函数:

　　某些字符被替换成了十六进制的转义序列,该方法不会对 ASCII 字母和数字进行编码，不会对这些 ASCII 标点符号进行编码：- _ . ! ~ * ' ( )。这些被转义：;/?:@&=+$,#。

假定它的参数是 URI 的一部分。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。

console.log(encodeURIComponent("http://cheatlys.info?id=dfs&name=zzz"));
console.log(encodeURIComponent(",/?:@&=+$#"));

解码： decodeURIComponent()

3、window.location

三、跨域

只要协议、域名、端口有任何一个不同，都被当作是不同的域。

解决方式：

1.设置Access-Control-Allow-Origin

2.通过JSONP处理

3.document.domain

只适用于不同子域的框架间的交互

http://www.example.com/a.html， 页面里面有一个iframe，它的src是http://example.com/b.html, 我们是无法通过在页面中书写js代码来获取iframe中的东西的。

只要把http://www.example.com/a.html 和http://example.com/b.html这两个的document.domain都设成相同的域名就可以了example.com。

document.domain的设置限制: 只能把document.domain设置成自身或更高一级的父域，且主域必须相同。