首页 > 代码库 > javaweb 之Ajax

javaweb 之Ajax

AJAX   


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


AJAX编程的主要步骤:

  1. 创建XMLHttpRequest对象

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

  3. 创建请求

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


创建XMLHttpRequest对象


a.     所有现代浏览器(IE7+FirefoxChromeSafari 以及 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请求中文问题: