AJAX
what: 一种改善客户端体验的技术。本质上就是在客户端使用js代码,通过浏览器中一个特殊的对象(XMLHttpRequest)异步(浏览器不会销毁当前的页面,客户可以在页面继续其他的操作而不被打断)的向服务器端发送请求,服务器端返回的是部分数据(可以是文本,xml,json),客户端接收到数据后,使用js将数据更新到页面中。整个过程没有页面的整体刷新,只是使用js进行局部刷新,用户操作不会被打断。
AJAX编程的主要步骤:
-
创建XMLHttpRequest对象
-
编写回调事件处理函数
-
创建请求
-
发送请求(最后一步才会触发回调函数)
创建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请求中文问题: