追の果てに 静かにeらめく 永hにYる 遥かのs束 かなしみに濡れた ウツセミ コワシテ ~望を 摺り替えて 孤独をでてた ただひとり 君に出会う日まで 此Iへおいで 心重ねよう 君の棘を 取り去ってあげる 崩れ落ちた 未来へ奏でる 叫び声を 拾い上げて 接吻交わそう にY切られ (さえず)る小Bは \を求め 彷徨いAけた 感情を]じる Iナド oイノニ 柔らかな口を するように ただ深く 土に埋もれていた 君の毒に その手の温度に Wの胸は をびてゆく 此Iへおいで すべてが虚(うつろ)に みzまれて れる日も 君を数えたい 叫びを上げるために 今 wび立とう の(うた) Zらうために Wがを失くして 地へ堕ちたなら このを I手で 拾って 「キ 空蝉ヲ 脱ギテタラ 君ハ wベルダロウ 独リデモ」 此Iへおいで 心重ねよう 君の棘を 取り去ってあげる ]を濡らす 大粒の雨を rのを 止めるような 接吻交わそう

这回写了个Typecho边栏日历插件,这是本人第一次写博客插件

链接:https://github.com/istobran/typecho-calender-plugin

在做这个插件的时候,由于是第一次上手玩Typecho插件,遇到了很多很多的问题

先是一点一点的去分析别人写的插件,搞清楚了plugin.php的工作机制,再根据分析结果把自己的代码注入进去

还好自己还有一点这方面的功底,分析过程还算顺利,接着自己写的日历的HTML结构和CSS样式很快就搞定了

在实现日历翻页功能的时候,本来可以用纯javascript去实现的,但是想了想,还是试一下ajax吧

于是就开始着手研究自己从来没接触过的ajax,下面就开始记录一下自己的学习成果


Ajax的英文全称是Asynchronous JavaScript and XML(参考wiki上的定义https://zh.wikipedia.org/wiki/AJAX

直译的话就是异步的javascript和XML,也就是说,ajax本身是实现异步交互的一种技术

关于异步的概念,可以参考这里:http://www.cnblogs.com/zhangjing0502/archive/2012/05/18/2507786.html

这里也说下我对异步这个概念的理解吧,异步这个概念事实上是相对于同步而言的

也就是说,异步技术是用来解决同步技术中存在的缺点的

那么同步技术中所存在的问题有哪些呢?

事实上从业务逻辑的角度上来说是没有问题的。问题主要出现在用户体验上

比如用户注册功能,传统的同步技术使用户必须填完所有表单之后才能提交

服务器对表单处理完成后,再返回结果给用户,成功的还好说

但是如果说,这个用户名已经被占用了的话,用户需要再重新填写整个注册表单

而且用户没有办法保证提交了表单之后就不出错。

为了解决这个问题,人们设想,能不能让用户一边填的时候,一边验证呢?

于是异步请求的技术就产生了,它使得页面能在不重新加载的前提下,与服务器进行通信。把验证结果直接反馈到当前页面上

ajax就是这么一个技术,他从技术层面上实现了一边填写表单一边验证的过程

ajax通过使用javascript发送xml数据给服务器,服务器再把结果返回回来,实现基于xml内容格式的通信


下面是一个XML请求的构建过程

1、实例化一个XMLHttpRequest对象

var request = new XMLHttpRequest();

2、设定url和请求方式(以GET请求为例)

request.open("GET", "server.php?number=" + document.getElementById("keyword").value);

3、发送请求

request.send();

4、监听请求的状态变化

request.onreadystatechange = function() {
	if (request.readyState===4) {    //表示请求完成,且响应已经就绪
		if (request.status===200) { 
			//表明请求成功,返回HTTP状态码200
			document.getElementById("searchResult").innerHTML = request.responseText;
		} else {
			//表明请求失败,返回了其他的状态码
			alert("发生错误:" + request.status);
		}
	} 
}

以上就是一个完整的ajax请求过程,通过构建请求并监听request的状态变化,即可实现页面异步处理的过程


关于readyState的值的含义:

readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪

构建POST请求也只是大同小异,在构建XMLHTTPRequest请求的时候修改一下发送方式即可

var request = new XMLHttpRequest();
request.open("POST", "server.php");
var data = "name=" + document.getElementById("staffName").value 
                  + "&number=" + document.getElementById("staffNumber").value 
                  + "&sex=" + document.getElementById("staffSex").value 
                  + "&job=" + document.getElementById("staffJob").value;
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(data);

以上就是一个较为原始的ajax的实现方式了,值得注意的是,POST方式的请求必须设置HTTP请求头的Content-type,否则服务器端可能无法识别



不过上面这种服务器直接返回HTML的做法现在已经比较少使用了

现在更加普遍的一种做法是,发送请求的时候依然使用XML,但服务器会返回json数据

所以在处理响应的时候,经常会用到json解析函数


下面是一个处理JSON的例子

request.onreadystatechange = function() {
    if (request.readyState===4) {
        if (request.status===200) { 
            var data = JSON.parse(request.responseText);
            if (data.success) { 
                document.getElementById("createResult").innerHTML = data.msg;
            } else {
                document.getElementById("createResult").innerHTML = "出现错误:" + data.msg;
            }
        } else {
            alert("发生错误:" + request.status);
        }
    } 
}

可以看到,上面使用了JSON.parse来处理response响应中的内容(要尽量避免使用eval,因为eval是不安全的处理方式)


使用JQuery来构建ajax请求,直接绑定按钮的点击事件

jQuery.ajax函数的语法(这个函数的功能最完整也最复杂):

$.ajax({
  type: method,
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

(参考:http://www.w3school.com.cn/jquery/ajax_ajax.asp


简写的get函数语法:

$(selector).get(url,data,success(response,status,xhr),dataType)

简写的post函数语法:

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

我自己的应用的例子:


$.post(window.php_Url, {
    year: $("#cal_year b").html(),
    month: $("#cal_month b").html(),
    action: direction,
    selected: changeVal
}, function(data) {
    if (data.success) {
        $("#cal_plugin tbody").html(data.tbody);
        $("#cal_year b").html(data.year);
        $("#cal_month b").html(data.month);
    }
}, "json");