点点技能点之Ajax

之前自己没怎么写过前端,一直以为Ajax写起来很麻烦,也没怎么接触Ajax,今天写了个小网页用到了Ajax,感觉它并不是想象的那么复杂,写完网页随手总结一下。(喂我这个技能点是不是点的太晚了啊!)

1. 引子

没啥可写的…

2. 科普

W3School - Ajax教程,就这个吧,科普完毕。

3. 笔记

3.1 Ajax的特点

Ajax为Asynchronous Javascript And XML的缩写,即异步JS与XML,因为它具有异步特性,所以我们可以在网页加载中或加载结束的任意时刻使用,通过与服务器进行少量数据交换来实现网页异步更新。利用Ajax可以直接更改网页的一部分来动态刷新网页,而不需要刷新整个网页。

3.2 使用方法——原生方式

1
2
3
4
5
6
7
8
9
10
11
var ajax = new XMLHttpRequest();                  // IE6不能用这个方式,不管它了
ajax.onreadystatechange = function() {
if(ajax.readyState==4 && ajax.status==200)
{
// do something with ajax.responseText
// 还有一个ajax.responseXML, 也不管它了,json大法好
alert(ajax.responseText);
}
}
ajax.open("GET", "./get?var1=val1&var2=val2", true); // 异步方式运行
ajax.send();
1
2
3
4
5
6
var ajax = new XMLHttpRequest();
ajax.open("POST", "./post", false); // 同步方式运行
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.send("var1=val1&var2=val2");
// do something with ajax.responseText
alert(ajax.responseText);

3.3 原生的好麻烦!——jQuery Ajax

jQuery,棒棒的前端库,不多说。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// $.get(URL, callback)
$.get("./get?var1=val1&var2=val2", function(data, status) {
// do something with data & status
});
// $.post(URL,data,callback)
$.post("./post", {
var1: "val1",
var2: "val2"
}, function(data, status) {
// do something with data & status
});
// $.getJSON(url, data, success(data,status,xhr))
// data和回调函数success可选
// success中,data参数必需,其它可选
$.getJSON("./get", function(data) {
// do something with data
});

4. 附带的小零碎

window.setInterval(getData, time);用于实现轮询。

5. 总结 & 后记

Ajax简单实用功能强大应用广泛,通过简单的步骤实现前后端的数据交换,来实现网页的动态加载。
开学到现在感觉一直不在状态(实在是想吐槽自己的一群神一样的舍友),今天找了个安静的、没人打扰的地方认认真真写了写代码,总结了一下自己到现在所学的知识才发现自己学的东西是如此零散、不成体系,仿佛从大一开始就在乱点技能点。这一年要多深入学习一个特定方面的知识(暂定后端开发),多写代码积累经验,不能再东学一点西学一点了。