1.获得XMLHttpRequest对象
因为XMLHttpRequest并没有标准化，所以，要区分浏览器。
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
// 非ie浏览器
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
2.XMLHttpRequest对象(ajax对象)的重要属性
1) onreadystatechange : 绑订一个事件处理函数,该函数用来处理readystatechange事件
(当readyState属性值发生改变，就会产生该事件)。
2) responseText : 获取服务器返回的文本。
3) responseXML : 获取服务器返回的xml。
4) readyState : ajax对象在与服务器进行通讯时的一种状态,有5个值，分别是0,1,2,3,4。
比如值为4时，表示ajax对象已经成功地获取了服务器返回的所有的数据。
5) status : 状态码
3.编程步骤
第1步 : 获得ajax对象
比如:
var xhr = getXhr();
第2步 : 发送请求
xhr.open(请求方式,请求地址,同步还是异步);
注意：
请求方式 : 'get'或者'post'
请求地址 : 如果是get请求，需要将请求参数添加到请求地址的后面，
比如: 'check_username.do?username=zs'
同步还是异步 : true表示异步,false表示同步(响应回来才能继续操作)
// 绑订一个事件处理函数
xhr.onreadystatechange=f1;
xhr.send(null);
// get时为null参数在地址，post时放参数
第3步 : 编程服务器端的代码，跟以前相比，有一点区别就是一般不需要返回完整的页面，只需要返回部分的数据。
第4步 : 编写事件处理函数
function f1(){
if(xhr.readyState == 4){
var txt = xhr.responseText;
// 更新操作...
}
}
4.get请求的ajax编程
function fun(){
var xhr = getXhr();
xhr.open('get','请求的servlet?参数='+'参数值',true);
xhr.onreadystatechange=function(){
if(xhr.readyState == 4){
var txt = xhr.responseText;
$('要显示的标签的id').innerHTML=txt;
}
};
xhr.send(null);
}
5.post请求的ajax编程
function fun(){
var xhr = getXhr();
xhr.open('post','请求的servlet',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange=function(){
if(xhr.readyState == 4){
var txt = xhr.responseText;
$('要显示的标签的id').innerHTML=txt;
}
};
xhr.send('参数='+'参数值');
}
6.my.js里的函数
// 通过id获得节点对象
function $(id) {
return document.getElementById(id);
}
// 通过id获得value
function $F(id) {
return document.getElementById(id).value;
}
// 获取XMLHttpRequest对象
function getXhr() {
var xhr = null;
if (window.XMLHttpRequest) {
// 非ie浏览器
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
7.改进
6.1.实现正在检查....
post请求的ajax编程
function fun(){
var xhr = getXhr();
xhr.open('post','请求的servlet',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange=function(){
if(xhr.readyState == 4){
var txt = xhr.responseText;
$('要显示的标签的id').innerHTML=txt;
}
};
//实现正在检查....
$('要显示的标签的id').innerHTML="正在检查...";
xhr.send('参数='+'参数值');
}
6.2.图片的使用
//servlet里发送
out.println("<img src='images/unchecked.gif'/>验证码错误");
6.3.系统异常的处理
post请求的ajax编程
function fun(){
var xhr = getXhr();
xhr.open('post','请求的servlet',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange=function(){
if(xhr.readyState == 4){
//200为正确运行
if(xhr.status == 200){
var txt = xhr.responseText;
$('要显示的标签的id').innerHTML=txt;
}else{
$('要显示的标签的id').innerHTML = '系统错误';
}
}
};
$('要显示的标签的id').innerHTML="正在检查...";
xhr.send('参数='+'参数值');
}
8、编码问题
8.1.get
step1.tomcat的server.xml, 添加 URIEncoding="utf-8"
step2,使用encodeURI函数对请求地址进行编码。(使用utf-8这种编码格式)
8.2.post
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
request.setCharacterEncoding("utf-8")就可以解决编码问题
9.json来做数据交换
9.1.java对象转换成json字符串
第1步:导入jar包
第2步:
//一个对象
JSONObject obj=JSONObject.fromObject("javabean对象");
String jsonStr=obj.toString();
//对象集合或数组
JSONArray obj=JSONArray.fromObject("javabean对象集合");
String jsonStr=obj.toString();
9.2.json字符串转换成javascript对象
可以使用prototype提供的evalJSON函数
例子:
var txt = xhr.responseText;
//txt是一个json字符串，先转换
//成一个javascript对象组成的数组
//将json字符串转换成一个js对象
//如果是json集合或数组，会得到一个js对象的数组
var arr = txt.evalJSON();
10.prototype.js文件的常用方法
10.1. $(id) : 相当于document.getElementById(id);
10.2. $F(id): 相当于document.getElementById(id).value;
10.3. $(id1,id2,id3...):使用id1,id2,id3...分别去查找对应的节点，返回由这些节点组成的数组
10.4. strip() : 除掉字符串两端的空格
10.5. evalJSON() : 将json字符串转换成javascript对象
11.ajax局部更新技术
jsp文件中每个一段时间调用一下ajax对象,把返回的数据显示出来,局部更新
例子:
function f1(){
//每隔多少秒调用f2函数
setInterval(f2,毫秒数);
}
function f2(){
//ajax编程代码
}
12.json数据转换-处理日期类型
第1步:写一个转换器
写一个java类,实现JsonValueProcessor接口
第2步:实现两个process方法,按照你自己的要求,定义转换规则
第3步:创建JsonConfig对象,使用该对象注册转换器
第4步:JSONArray.fromObject(srcObj,JsonConfig);
例子:
//创建一个转换器
(转换器java类) processor = new (转换器java类);
processor.setPattern("yyyy-MM-dd");
//注册转换器
JsonConfig config = new JsonConfig();
config.registerJsonValueProcessor(Date.class, processor);
//利用转换器，生成json字符串
JSONObject obj = JSONObject.fromObject(user,config);
13.同步
会等待服务器响应，当前页面被锁定了
xhr.open('get/post','check_username.do',false);
提交按钮的onclick="return f1();"//f1()返回true或则false
14.清空提示
$('xxx').innerHTML="";
15.服务器返回一个字符串,客户端判断,显示不同的数据
这时服务端输出用print 。。println有换行和回车比较字符串时有问题