ajax学习

参考：
https://segmentfault.com/a/1190000009251290?utm_source=tuicool&utm_medium=referral

xhr = new XMLHttpRequest();
//XMLHttpRequest {onreadystatechange: null,readyState: 0,timeout: 0,withCredentials: false,upload: XMLHttpRequestUpload…}
xhr.open('GET','https://www.baidu.com/',true);
//undefined
xhr.send();
//undefined
//(index):1 XMLHttpRequest cannot load https://www.baidu.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.170.131' is therefore not allowed access.

果然是有同源策略的。

然后再试试其他的

xhr = new XMLHttpRequest();
xhr.open('GET','/wp-login.php',true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send();

在浏览器console里输入之后页面没有半点反应。想起可能是没有设置监听器，但是服务器端应该有访问日志。
果然通过查看apache日志/var/log/apache2/access.log，发现确实浏览器发出了这个HTTP请求，但是页面完全没有反应。

...
192.168.170.1 - - [01/May/2017:20:01:48 +0800] "GET /wp-login.php HTTP/1.1" 200 1602 "http://192.168.170.131/?s=%E5%AD%A6%E7%94%9F" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/58.0.3029.81 Safari/537.36"

Apache访问日志格式参考：
http://www.52php.cn/article/p-shcenjgq-xw.html

接下来设置一下监听器试试看。完整代码走一遍。

if (xhr){
    xhr.open('GET',true); //以GET请求方式向/wp-login.php发出异步请求
    // 原生ajax会默认使用Content-Type为'text/plain;charset=UTF-8'的方式发送数据
    //xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//这是POST方法用的
    xhr.onreadystatechange = function(){
        if (xhr.readyState === 4){  // readyState为4表示响应内容解析完成，可以在客户端调用了。
            if (xhr.status === 200){  //这时通过status获取状态码,若为200则认为此时服务器响应为"成功"
                console.log('[*]执行成功');
            } else {
                console.log('[*]执行出错');
            }
        }
    }
}

当然，我们可以用onload来代替onreadystatechange等于4的情况，因为onload只在状态为4的时候才被调用。代码如下：

xhr.onload = function(){   // 指定onload的监听函数
    if (xhr.status === 200){    //status为200表示请求成功
        console.log('[*]执行成功');
    } else {
        console.log('[*]执行出错');
    }
}

以上便是原生ajax异步请求数据的常见代码。

jQuery中的ajax

jQuery作为一个使用人数最多的js库，其ajax很好地封装了原生ajax的代码，在兼容性和易用性方面都做了很大的提高，让ajax的调用变得非常简单。
下面是一段简单的jQuery的ajax代码：

$.ajax({
    method: 'GET',// 1.9.0版本之前使用'type'
    url: '/wp-login.php',dataType: 'json'
}).done(function() {
    console.log('[*] 执行成功');
}).fail(function() {
    console.log('[*] 执行出错');
});

与原生ajax不同的是，jQuery中默认的Content-Type是application/x-www-form-urlencoded;charset=UTF-8

其他js框架如Vue.js,Angular.js,React,Fetch API略。

跨域ajax

介绍了各种各样的ajax API，我们不能避免的一个重要问题就是跨域，这里重点讲解下ajax跨域的处理方式。
处理ajax跨域问题主要有一下4终方式：
1. 利用iframe
2. 利用JSONP
3. 利用代理
4. 利用HTML5提供的XMLHttpRequest Level2

第1种和第2种方式大家应该都非常熟悉，都属于前端的活，这里就不做介绍了，这里主要介绍第3种和第4种方式。