javaweb ajax请求资源,javaweb 之Ajax

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请求中文问题：

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");