文档介绍：
Ajax学习笔记
Java相关课程系列笔记之十一
笔记内容说明
Ajax(程祖红老师主讲,占笔记内容100%);
目录
一、 Ajax概述 1
1.1什么是Ajax 1
1.2 Ajax对象:如何获得Ajax对象 1
1.3 Ajax对象的属性 2
1.4编程步骤 2
1.5编码问题 3
1.6 Ajax的优点 3
1.7缓存问题(IE浏览器) 4
1.8案例:简易注册(使用Ajax进行相关验证,get请求) 4
1.9案例:修改1.8案例,使用post请求 6
1.10案例:使用Ajax实现下拉列表 6
二、 JSON 7
2.1什么是JSON 7
2.2数据交换 7
2.3轻量级 7
2.4 JSON语法() 7
2.5如何使用JSON来编写Ajax应用程序 8
2.6案例:股票的实时行情 9
2.7案例:显示热卖的前3个商品 10
2.8同步请求 10
2.9案例:修改1.8案例step1中的JS代码(使用同步请求) 11
Ajax概述
1.1什么是Ajax
Asynchronous Javascript And Xml(异步的JavaScript和Xml)。是一种用来改善用户体验的技术,其实质是利用浏览器内置的一个特殊对象(XMLHttpRequest,一般称之为Ajax对象)异步地(Ajax对象在向服务器发送请求时,浏览器并不会销毁当前页面,用户仍然可以对当前页面作其他的操作)向服务器发送请求,服务器送回部分数据(不是一个完整的新的页面,而是文本或者Xml文档),在浏览器端,可以利用这些数据部分更新当前页面。整个过程,页面无刷新,不打断用户的操作。
之前,都是先销毁原来的页面,然后发送请求,等待服务器发送响应,再生成新页面。
Ajax的工作流程:
1.2 Ajax对象:如何获得Ajax对象
由于XMLHttpRequest(Ajax对象)没有标准化,所以要区分浏览器。
function getXhr(){//注意:后面的案例都将用到此函数
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();//非IE浏览器
}else{
xhr=new ActiveXObject('Microsoft.XMLHttp');//IE浏览器
}
return xhr;
}
注意事项:后面的案例也会用到以下函数
function $(id){//依据id返回dom节点
return document.getElementById(id);
}
function $F(id){//返回id对应的值
return $(id).value;
}
1.3 Ajax对象的属性
1)onreadystatechange:绑定一个事件处理函数(***),该函数用来处理readystatechange事件。Ajax对象的readyState属性发生改变,比如从0到1,则会产生onreadystatechange事件。
2)responseText:获得服务器返回的文本数据。
3)responseXML:获得服务器返回的Xml文档。
4)status:获得状态码。
5)readyState:返回Ajax对象与服务器通讯的状态,返回值是一个number类型的值。一共有5个值,分别是:
①0:(未初始化)对象已建立,但是尚未初始化(尚未调用open方法)。
②1:(初始化)对象已建立,尚未调用send方法。
③2:(发送数据)send方法已调用。
④3:(数据传送中)已接收部分数据。
⑤4:(响应结束)Ajax对象已经获得了服务器返回的所有的数据。
1.4编程步骤
1)发送get请求:
step1:获得Ajax对象,比如:var xhr=getXhr();//调用之前定义的函数
step2:使用Ajax对象发送get请求
①调用xhr.open('get',check_username.do?username=chang&age=23,true);方法:建立与服务器之间的连接,三个参数依次为:请求方式、请求资源路径、请求是同步还是异步。
true:表示异步请求(Ajax对象发送请求时,用户可以对当前页面作其他的操作,不会销毁页面)。
false:表示同步请求(Ajax对象发送请求时,浏览器会锁定当前页面,用户只能等待,不会销毁页面)。
②xhr.onreadystatechange=func1();:绑定一个事件处理函数(***)
③xhr.send(null);:发送请求参数,因为参数已经写在了请求资源路径中,所以这里为null。
step3:编写服务器端的处理程序,跟以前相比,有一点点改变,就是一般不需要返回一个完整的页面,只需要返回部分的数据。
step4:编写事件处理函数
function f1(){
if(xhr.readyState==4){
var txt=xhr.responseText;
dom操作……
}
}
2)发送post请求:
step1:获得Ajax对象,比如:var xhr=getXhr();//调用之前定义的函数
step2:使用Ajax对象发送post请求
①xhr('post','check_username.do',true);:建立连接
②xhr.setRequestHeader('content-type','application/x-ded');:发送一个content-type消息头
③xhr.onreadystatechange=func1();:绑定一个事件处理函数(***)
④xhr.send('username=chang');:发送请求参数
注意事项:
与get请求不同,请求参数要放到send方法里面。
因为按照HTTP协议的要求,发送post请求时,应该发送一个content-type消息头,而Ajax对象在默认情况下,不会发送这个消息头,所以,需要调用setRequestHeader方法来添加。
step3:编写服务器端的处理程序,跟以前相比,有一点点改变,就是一般不需要返回一个完整的页面,只需要返回部分的数据。
step4:编写事件处理函数
1.5编码问题
1)发get请求
①乱码产生的原因:
IE浏览器内置的Ajax对象会使用“GBK”或“GB2312”对中文参数进行编码,而其他浏览器(Chrom、Firefox)内置的Ajax对象会使用“utf-8”对中文参数进行编码。服务器端,默认会使用“ISO-8859-1”去解码。因为编码与解码所使用的字符集(编码格式)不一致,所以,会出现乱码问题。
②解决:
step1:设置服务器使用指定的字符集去解码。比如,可以修改Tomcat的server.xml配置(conf文件夹中)

1