初识Ajax

   Ajax=
异步 JavaScript 和 XML 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax实现了客户端与服务器端异步通信。 

   问：什么是异步请求？

   答：所谓异步请求，就是浏览器不必等待HTTP响应完毕才继续执行，而是立即执行Javascript命令或请求，也就是说，HTTP请求与浏览器操作是不同步的。而在同步请求下，浏览器只有在响应完毕之后，才能继续执行后继任务或操作。

   问：Ajax是如何实现这种异步请求的呢？  

   答：Ajax 是通过在客户端嵌入一个中间件（Ajax引擎，即XMLHttpRequest组件），并专门负责客户端与服务端通信，这样就不需刷新页面，浏览器也能通过Ajax引擎随时随地与服务器端保持异步通信和联系，服务器端相应的数据也不再是一个完整的页面，而是根据需要发送的响应信息。所以说XMLHttpRequest是Ajax的基础。

一、XMLHttpRequest

   Ajax技术核心是XMLHttpRequest对象（简称XHR)。它提供了向服务器发送请求和解析服务器响应的接口。能够以异步客户端与服务器端进行通信的协议。客户端可以通过XMLHttpRequest对象向W用eb服务器发送请求并使DOM（文档对象模型）进行处理。然后再显示响应的数据。这就意味着可以在不重新加载整个页面的同时，对网页的部某分进行刷新。

1.创建XHP对象

   语法：var xhr =new XMLHttpRequest  

   PS：老版本的IE使用Active 对象 ：variable=new ActiveXObject("Microsoft.XMLHTTP");

   处理 浏览器兼容问题:

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2.发送请求：open()和send()方法

  在使用XHR对象时，先必须调用open()方法建立一个HTTP请求，即使用open()方法打开客户端与服务器端之间的通信连接。它接受三个参数，要发送的请求类型（get、post)、请求的URL和表示是否同步（Async)。

xhr.open('get','demo.php'.false)     //对于demo的get请求，false 表示同步

  php代码：

<?php echo Date('Y-m-d H:i:s')?>    //一个时间

   但是open()方法并不会真正发送请求，而只是启动一个请求以备发送。当建立连接请求之后，由send()方法发送请求到HTTP服务器端，并接收服务器端的响应。 

   send()方法接收一个参数，作为请求主体发送的数据。如果不传递信息,则为null。

二、Request 



1.GET请求：

    这是一种最常见的请求类型。GET方法是通过查询字符串的方式来传递请求的，最常用于向服务器查询某些信息。GET请求的参数通过问号（？）前缀附加在URL的末尾，参数是以连字符（&）连接的一个或多个名/值对。 

例如：

xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true)；

   通过URL后的问号给服务器传递键值对数据，服务器接收到返回响应数据。特殊字符传参的问题可使用encodeURLComponent()进行编码处理。

例如：

//一个通用的 URL 提交函数
function addURLParam(url, name, value) {
url += (url.indexOf('?') == -1 ? '?' : '&'); //判断的 url 是否有已有参数
url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
alert(url);
return url;
}

优缺点：使用GET请求比较简单，方便，适合传递一些简单的参数信息，不易传输大容量或受保护的数据。 


2.POST请求

   与GET请求不同的是，POST请求支持任意格式、任意长度的数据，而不仅仅限于名/值对。一般来说，POST请求用于在表单中输入数据后的提交过程。 

   例如：xhr.send('name=Lee&age=100');

   与GET请求相似，POST请求的参数也必须进行编码，并用连字符（&)进行分隔，这些参数在发送POST请求时，不会附加到URL的末尾，而是作为send()方法的参数进行传递，然后被送到服务器端。

优缺点：

   与GET想比较，POST方式传递的信息是无限的，且不受字符编码的限制，还可以传递二进制信息。适合传输文件及大容量信息，安全信息或XML格式数据。但是从性能上来说，POST请求比GET请求消耗更多。

三、封装Ajax

   在使用Ajax时，往往由于参数问题，比较麻烦，比如说到底是使用GET还是POST，到底是同步还是异步处理等到，所以对Ajax进行封装成一个函数，这样在使用的时候就方便多了。 

//封装ajax
function ajax(obj) {
var xhr = createXHR(); //定义一个变量存储XMLHTTPRequest对象
obj.url = obj.url + '?rand=' + Math.random();
obj.data = params(obj.data);
//get 请求处理方式
if (obj.method === 'get') obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data;
//同步处理
if (obj.async === true) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
callback();
}
};
}
xhr.open(obj.method, obj.url, obj.async);

//POST请求处理方式
if (obj.method === 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(obj.data);
} else {
xhr.send(null);
}
//异步处理
if (obj.async === false) {
callback();
}
function callback() {
if (xhr.status == 200) {
obj.success(xhr.responseText);			//回调传递参数
} else {
alert('获取数据错误！错误代号：' + xhr.status + '，错误信息：' + xhr.statusText);
}
}
}

调用Ajax:

addEvent(document, 'click', function () {
ajax({
method : 'post',
url : 'demo3.php',
data : {
'name' : 'Lee',
'age' : 100
},
success : function (text) {
alert(text);
},
async : true
});
});

    Ajax的学习到这里并没有结束，而真正想更进一步的了解Ajax还需要到实践中去磨练。