打算写个ajax系列的博文，主要是写给自己看，学习下ajax的相关知识和用法，以更好的在工作中使用ajax。
假设有个网站A，它有一个简单的输入用户名的页面，界面上有两个输入框，第一个输入框包含在一个form表单里用来实现form提交，第二个输入框是单独的、没有包含在form里，下面就用这两个输入框来学习下jQuery的ajax。
1，前端的html和javascript代码
页面html
1 <main style="text-align: center; margin: 200px auto;">
2 <h2>输入用户名</h2>
3 <form class="" action="demo01.php" method="post" style="margin-bottom: 20px;">
4 <input id="user-name" type="text" name="username" placeholder="请填写您的用户名">
5 <input type="submit" name="submit1" value="form提交1" class="input">
6 </form>
7 <input id="user-name2" type="text" name="username2" placeholder="请填写您的用户名">
8 <input type="button" name="submit2" value="ajax提交2">
9 <div class="box">
10
11 </div>
12 </main>
13
14 <script src="../../js/jquery-3.1.0.min.js"></script>
15 <script src="demo01.js"></script>
页面中引入的demo01.js代码，注意此处实现的是一个简单的GET请求。
1 $(function($) {
2 $('input[name=submit2]').on('click', function(e) {
3 let username = '';
4 if ('' !== (username = $('#user-name2').val())) {
5 $.ajax({
6 url: `demo0.php?name=${username}`,
7 dataType: 'json',
8 method: 'GET',
9 success: function(data) {
10 if (data.result == 1) {
11 $('.box').html(`<div>你的姓名${username}已成功保存。</div>`);
12 }
13 },
14 error: function(xhr) {
15 // 导致出错的原因较多，以后再研究
16 alert('error:' + JSON.stringify(xhr));
17 }
18 })
19 .done(function(data) {
20 // 请求成功后要做的工作
21 console.log('success');
22 })
23 .fail(function() {
24 // 请求失败后要做的工作
25 console.log('error');
26 })
27 .always(function() {
28 // 不管成功或失败都要做的工作
29 console.log('complete');
30 });
31 }
32 });
33 });
jQuery的ajax()方法有两种写法，分别是： $.ajax(url [, settings]); 和 $.ajax([settings]);
（1）上面代码中ajax()的参数
可以看到这里的参数类型都是javascript对象，即都是 o = {key: value};
1 > node
2 > typeof(null);
3 'object'
4 > typeof([]);
5 'object'
6 > typeof(document);
7 'undefined'
8 > typeof({});
9 'object'
可以看到null、[](数组类型)、{}(对象类型)都是对象。因为在js中一切皆对象。而在交互式环境中，document则是未定义的一个变量，所以它的类型是undefined。如果在浏览器环境下测试下typeof(document)，那么它的类型也是object。下面逐个解释下代码用到的参数：
url，要请求的url地址，它的值应该是包含url的字符串。
dataType，字符串。发出请求后，期望从服务器返回的数据类型。可以指定的类型有xml、html、script、json、jsonp、text。如果不指定，jquery会基于MIME做判断，并会返回一个下面xml、json、script、html当中的一种类型。
method，字符串。HTTP请求方法，默认为GET，上面代码中指定为POST。
success， Type: Function( Anything data, String textStatus, jqXHR jqXHR )
error， Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )
除了用到的这些参数，还有许多其他的如：async、dataFilter、mimeType等其他参数，不过现在的这个简单的脚本还用不到那么多参数。
（2）“延迟加载函数”
上面代码中 $.ajax().done().fail().always()
标题“延迟加载”描述的不够准确，但从效果上看是有延迟加载的效果。关于这个问题更详细的解释可以参考jQuery文档中对jqXHR的解释 或一位前端前辈的解释jQuery的deferred对象详解 。
2，后端运行在nginx服务器上的php代码
后端的逻辑很简单：我们把前端获取的数据保存到名为data-demo01的文件中，保存成功则向前端返回一个1作为标志。
（1）前端ajax发起GET请求
如果前端的ajax发起的是一个GET请求，那么后端也比较好处理：
1 if (isset($_GET['name']) && !empty($_GET['name'])) {
2 $username = trim($_GET['name']);
3 if (file_put_contents('data-demo01', $username)) {
4 echo '{"result": 1}';
5 }
6 }
（2）前端ajax发起POST请求
js代码中需要修改下ajax()的url、method参数，并增加一个data参数，修改后如下：
1 // 相同的代码省略
2 $.ajax({
3 url: `demo01.php`,
4 dataType: 'json',
5 method: 'POST',
6 data: {"username": username},
7 // 相同的代码省略
因为用POST传递数据，所以去掉url中用来传递数据的参数，下面的data类型要与dataType一致，为json格式，然后将username作为值传递。
那么后端的代码也就可以确定了：
1 if (isset($_POST['username']) && !empty($_POST['username'])) {
2 $username = trim($_POST['username']);
3 if (file_put_contents('data-demo01', $username)) {
4 echo '{"result": 1}';
5 }
6 }
如果不出错的话，效果应该是下面这样然后查看下data-demo01，名字果然被保存了。
那么问题来了，如果出错了呢？比如data-demo01文件不可写，或者后台服务器返回的数据格式有错误，或者网络出错。那又该怎么处理呢？我现在也不太清楚，后续再研究吧。
完
