原生态AJAX请求

首先Copy一段解释：什么是AJAX？

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML，还有TEXT和JSON）。AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

客户端与服务器之间的交互大多分为同步交互和异步交互两种类型，而ajax通常使用的异步交互。

2.AJAX的优缺点：

优点：ajax是使用javascript向服务器发送异步请求，这个时候是页面的局部刷新而不是整个页面的刷新，因此Ajax的性能高。

缺点：虽然ajax发送的异步请求增加了用户的体验，但是这无形之中增加了服务器接收的请求数量，给服务器增加了访问压力。同时ajax底层使用的javascript实现的，这就导致了该技术的使用需要处理浏览器的兼容问题。

3.客户端（JSP页面中的核心代码）发送AJAX请求的四步走：

第一步：创建XMLHttpRequest对象，因为所有的异步交互都需要使用XMLHttpRequest对象，在创建的对象时需要解决浏览器兼容问题，代码如下：

functioncreateXMLHttpRequest() {

varxmlHttp;

//适用于大多数浏览器，以及IE7和IE更高版本

try{

xmlHttp =newXMLHttpRequest();

}catch(e) {

//适用于IE6

try{

xmlHttp =newActiveXObject("Msxml2.XMLHTTP");

}catch(e) {

//适用于IE5.5，以及IE更早版本

try{

xmlHttp =newActiveXObject("Microsoft.XMLHTTP");

}catch(e){}

}

}

returnxmlHttp;

}

第二步：打开与服务器的连接，使用open()方法；其中需要传递参数。

open(method, url, asyn);

其中method为GET字符串，填入“GET”，为POST则填入“POST”

url为请求的服务器的请求路径地址

asyn表示该连接是否是异步的，默认值为true为异步请求，false为同步请求

var xmlhttp = createXMLHttpRequest();

xmlhttp.open("GET", url, true);

第三步：使用open方法打开连接之后，我们就需要使用XMLHttpRequest对象中的send()方法来发送请求，其中send()方法中的参数为POST请求方式中的参数；如果是GET请求方式的话参数是链接在请求URL后面的，在send()方法中设置为null；

如果是POST请求:

POST请求必须设置ContentType请求头的值为application/x-www.form-encoded。表单的enctype默认值就是为application/x-www.form-encoded！因为默认值就是这个，所以大家可能会忽略这个值！当设置了的enctype="application/x-www.form-encoded”时，等同与设置了Cotnent-Type请求头。

但在使用AJAX发送请求时，就没有默认值了，这需要我们自己来设置请求头：

xmlhttp.send("parameter1=a¶meter2=b");//这里设置参数

如果是GET请求：

xmlhttp.send(null); //一定不能丢了这个null，不然不能发送请求！

最后一步：接收服务器的响应数据，XMLHttpRequest对象有一个onreadystatechange事件，它会在XMLHttpRequest对象的状态发生变化时被调用。下面介绍一下XMLHttpRequest对象的5种状态：

l：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法；

l1：请求已开始，open()方法已调用，但还没调用send()方法；

l2：请求发送完成状态，send()方法已调用；

l3：开始读取服务器响应；

l4：读取服务器响应结束。

onreadystatechange事件会在状态为1、2、3、4时引发。

下面代码会被执行四次！对应XMLHttpRequest的四种状态！

但通常我们只关心最后一种状态，即读取服务器响应结束时，客户端才会做出改变。我们可以通过XMLHttpRequest对象的readyState属性来得到XMLHttpRequest对象的状态。

其实我们还要关心服务器响应的状态码是否为200，其服务器响应为404，或500，那么就表示请求失败了。我们可以通过XMLHttpRequest对象的status属性得到服务器的状态码。

最后，我们还需要获取到服务器响应的内容，可以通过XMLHttpRequest对象的responseText得到服务器响应内容。

以下粘贴出 封装好的一段用来发送ajax请求js代码，使用的时候直接COPY调用即可。

// 创建request对象

function createXMLHttpRequest() {

try {

return new XMLHttpRequest();//大多数浏览器

} catch (e) {

try {

return ActvieXObject("Msxml2.XMLHTTP");//IE6.0

} catch (e) {

try {

return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本

} catch (e) {

alert("哥们儿，您用的是什么浏览器啊？");

throw e;

* option对象有如下属性

*/

/*请求方式 method, */

/*请求的url url, */

/*是否异步 asyn, */

/*请求体 params, */

/*回调方法 callback,*/

/*服务器响应数据转换成什么类型 type */

function ajax(option) {

/*

* 1. 得到xmlHttp

*/

var xmlHttp = createXMLHttpRequest();

/*

* 2. 打开连接

*/

if(!option.method) {//默认为GET请求

option.method = "GET";

}

if(option.asyn == undefined) {//默认为异步处理

option.asyn = true;

}

xmlHttp.open(option.method, option.url, option.asyn);

/*

* 3. 判断是否为POST

*/

if("POST" == option.method) {

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

}

/*

* 4. 发送请求

*/

xmlHttp.send(option.params);

/*

* 5. 注册监听

*/

xmlHttp.onreadystatechange = function() {

if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {

//双重判断

var data;

// 获取服务器的响应数据，进行转换！

if(!option.type) {//如果type没有赋值，那么默认为文本

data = xmlHttp.responseText;

} else if(option.type == "xml") {

data = xmlHttp.responseXML;

} else if(option.type == "text") {

data = xmlHttp.responseText;

} else if(option.type == "json") {

var text = xmlHttp.responseText;

data = eval("(" + text + ")");

}

// 调用回调方法

option.callback(data);

}

};

};

使用的时候直接在js脚本中编写

ajax({

method:你的请求方式，

url:你的请求地址，

asyn:是否异步，

params:你要传递的参数，

type:返回处理的数据类型，

callback:function(data){

//这里进行处理使用响应的data数据

}

});