AJAX

what: 一种改善客户端体验的技术。本质上就是在客户端使用js代码，通过浏览器中一个特殊的对象(XMLHttpRequest)异步（浏览器不会销毁当前的页面，客户可以在页面继续其他的操作而不被打断）的向服务器端发送请求，服务器端返回的是部分数据(可以是文本，xml,json),客户端接收到数据后，使用js将数据更新到页面中。整个过程没有页面的整体刷新，只是使用js进行局部刷新，用户操作不会被打断。

AJAX编程的主要步骤：

1. 创建XMLHttpRequest对象

2. 编写回调事件处理函数

3. 创建请求

4. 发送请求(最后一步才会触发回调函数)

创建XMLHttpRequest对象

a.     所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

var variable;
variable=new XMLHttpRequest();

b. 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

    var variable;variable=new ActiveXObject("Microsoft.XMLHTTP");

c. 获取XMLHttpRequest对象的脚本:

function getXhr(){var variable;if(window.XMLHttpRequest){variable=new XMLHttpRequest();}else{variable=new ActiveXObject("Microsoft.XMLHTTP");}return variable;
}

编写回调事件处理函数

得到XMLHttpRequest对象之后，就可以编写回调事件处理函数了。

var xhr=getXhr();
xhr.onreadystatechange=function(){//这儿编写用户自定义处理函数，  xhr的状态值有5种， 0，1，2，3，4//这儿我们最关心的状态值是4 ，onreadystatechange函数中会触发2，3，4三种状态值alert(xhr.readyState);//那么我们可以看到3中状态值，2，3，4
}

创建请求

get请求

xhr.open('get','ajax.do',true)// 第一个参数为请求方式,get/post....  第二个参数为请求的url（参数可以直接附加在url后面）  第三个参数为是否是异步的请求true为是，false为否

get请求中文问题：

编码设置

js代码:

var uri=encodeURL('check?name=张三');
xhr.open('get',uri,true);
xhr.send();

后台代码:

String name=request.getParameter("name");
name=new String(name.getBytes("ISO8859-1"),"UTF-8");

修改tomcat的配置

在tomcat的conf目录下，找到server.xml中找到Connector 节点，添加属性  URLEncoding="utf-8"

post请求

xhr.open('post','ajax.do',true); // 普通的post请求可以直接这样使用
//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后再send() 方法中规定您希望发送的数据：
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

post请求中文问题：

a. 在页面使用mate元素设置字符编码
b. 服务器端，使用request.setCharactorEncoding("UTF-8");

创建请求

get请求：

xhr.open('get','check_name.do?name=zs',true);

post请求:

xhr.open('post','checkname.do?name=zs',true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

发送请求:

xhr.send(null); // or
xhr.send("name=zs&age=24&id=1");