Ajax教程了解

Ajax简单教程（一）

说到Ajax，我们有必要了解一下，Ajax到底是什么？它为什么在JavaScript中占据了如此重要的地位？它的存在又产生了什么影响，下面就让我们简单介绍一下Ajax。

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是一种用于创建快速动态网页的技术。
这一技术可以使网页实现异步更新，能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。而传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

Ajax技术的核心是XMLHttpRequest对象（简称XHR），通过MSXML库中的ActiveX对象实现的。

XHR用法：

使用XHR对象时，要调用的第一个方法是open()，里面包含三个参数：发送的请求类型（GET/POST），URL，布尔值（同步false/异步true）；

例：

//引入XHR对象，编写函数
function createXHR(){
if (typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined"){
if (typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
"MSXML2.XMLHttp"],
i, len;

for (i=0,len=versions.length; i < len; i++){
try {
var xhr = new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
return xhr;
} catch (ex){
//skip
}
}
}

return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("No XHR object available.");
}
}
//创建一个新对象：
var xhr = new XMLHttpRequest();
//调用方法；
xhr.open("get", "example.js", false);

这行代码会启动关于example.js的GET请求，注意：一是URL相对于执行代码当前页面（基于同源策略，跨域需要其他技术，例如jsonp，websocket等）；二是调用open()不会真正地发送请求，只是启动一个请求以备发送。

既然提到GET和POST。那不得不提起他们之前的区别，他们只见到底有什么区别？

Get和Post都是向服务器发送的一种请求，只是发送机制不同。

注：此部分有参考博客园博主ranyonsue的说法，十分全面。链接在此快来戳我→

GET请求是最常见的请求类型，常用于向服务器查询某些信息。它会将参数跟在URL后面，发送给服务器。而POST请求则是把数据作为请求的主体提交，可以包含非常多的数据，格式不受限制。（当然在Ajax请求中，这种区别对用户是不可见的。）

容量上：”GET方式提交的数据最多只能是1024字节”，GET是通过URL提交数据，提交的数据大小与URL的长度直接关联。实际中，URL不存在参数上限的问题，HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。注意这是限制是整个URL长度，而不仅仅是你的参数值数据长度。

GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。

get请求和post请求在服务器端的区别:

在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,而客户端使用post请求时,服务器端使用Request.Form来获取参数.

HTTP标准包含这两种方法是为了达到不同的目的。POST用于创建资源，资源的内容会被编入HTTP请示的内容中。例如，处理订货表单、在数据库中加入新数据行等。

当请求无副作用时（如进行搜索），便可使用GET方法；当请求有副作用时（如添加数据行），则用POST方法。一个比较实际的问题是：GET方法可能会产生很长的URL，或许会超过某些浏览器与服务器对URL长度的限制。

若符合下列任一情况，则用POST方法：

请求的结果有持续性的副作用，例如，数据库内添加新的数据行。

若使用GET方法，则表单上收集的数据可能让URL过长。

要传送的数据不是采用7位的ASCII编码。

若符合下列任一情况，则用GET方法：

请求是为了查找资源，HTML表单数据仅用来帮助搜索。

请求结果无持续性的副作用。

收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。

注意GET请求经常会发生一个错误，就是查询字符串的格式有问题，查询中参数和值必须用encodeURIComponent()进行编码。

代码举例：

//GET请求方式：
xhr.open("get", "example.js?name1=vaule1&name2=value2", true);

function addURLParam(url, name, value) {
url += (url.indexOf("?") == -1 ? "?" : "&");
url += encodeURLComponent(name) + "=" + encodeURIComponent(value);
}

//POST请求方式：
function submitData(){
var xhr = createXHR();
xhr.onreadystatechange = function(event){
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};

xhr.open("post", "postexample.js", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var form = document.getElementById("user-info");
xhr.send(serialize(form));
}

GET/POST请求：

**

常见的请求类型，用于向服务器查询某些信息。

注意get请求经常会发生一个错误，那就是查询字符串格式有问题。每个参数和值都必须使用encodeURIComponent()进行编码，最后放到URL末尾。

POST把数据作为请求主体提交，GET并不是这样，二者传递过来的数据需要解析。

同步与异步

同步：就是一种阻塞模式，比如代码var a =1 ;alert(a);这就是一种同步，必须执行了第一种var a =1，你才会弹出a的值。

缺点：一般当你后面的代码需要用到前面的东西的时候 适合用同步 ，但用的很少，因为后面的代码都要等前面，体验是不好的。

异步：就是一种非阻塞模式，最明显的例子，就是定时器，当我们写了一个30s后执行的定时器的时候，在30S内其实后面的代码是可以执行的，而不是过了30s后面代码才能执行，这就是一种异步。

缺点：当你后面的代码需要用到前面的东西的时候 如果用异步，那么后面的代码会在前面还没加载好就出来，可能会有问题。幸运的是我们可以解决。

关于XMLHttpRequest：

FormData:表单数据序列化，创建与表单格式相同的数据。

代码如下

var xhr = createXHR();
xhr.onreadystatechange = function(event){
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};

xhr.open("post", "postexample.php", true);
var form = document.getElementById("user-info");
xhr.send(new FormData(form));

超时设定（timeout）：表示请求在多少毫秒后就终止。

代码实现如下：

var xhr = createXHR();
xhr.onreadystatechange = function(event){
try {
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
} catch (ex){
//assume handled by ontimeout
}
};

xhr.open("get", "timeout.php", true);
xhr.timeout = 1000;
xhr.ontimeout = function(){
alert("Request did not return in a second.");
};
xhr.send(null);

overrideMimeType():重写XHR响应的MIME类型。

事件：

进度事件：

loadstart：接收到响应数据的第一字节触发；

progress：接收响应期间持续不断触发；

error：请求错误触发；

abort：因为调用abort()方法而终止连接时触发；

load：接收到完成的响应数据时触发；

loadend：通信完成，触发error、abort或load事件后触发。

代码实现如下：

//实现load
window.onload = function(){
var xhr = createXHR();
xhr.onload = function(event){
if ((xhr.status >= 200 && xhr.status < 300) ||
xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
};
//实现progress
xhr.onprogress = function(event){
var divStatus = document.getElementById("status");
if (event.lengthComputable){
divStatus.innerHTML = "Received " + event.position + " of " + event.totalSize + " bytes";
}
};
xhr.open("get", "altevents.php", true);

xhr.send(null);
};

XHR是书中最先介绍的，关于Ajax通信的基础原理，不过因为技术发展快，基本上使用jQuery实现Ajax请求，方便简单，轻松明快，至于怎么做，等下一Part再作介绍。