Ajax学习笔记

第一天
Ajax的核心是js的使用。现在一般很少使用xml传输，因为很慢，一般使用jsion来进行传输。使用ajax技术之后页面无刷新，但是并没有打断用户的操作使用户的操作顺利进行。
Ajax编程的基本步骤：xhr.open().里面有三个参数，第一个是请求方式（get/post），第二个是请求地址，第三个是异步还是同步，
写js的时候少用全局变量
1、ajax是什么?
asynchronous javascript and xml:异步的javascript和xml。
是一种用来改善用户体验的技术，其本质是利用
浏览器内置的一种特殊的对象(XMLHttpRequest)异步
(即发送请求时，浏览器不会销毁当前页面，用户
可以继续在当前页面做其它的操作)的向服务器发送
请求,并且利用服务器返回的数据(不再是一个完整的
页面，只是部分的数据，一般使用文本或者xml返回)
来部分更新当前页面。
使用ajax技术之后，页面无刷新，并且不打断用户
的操作。
2、ajax对象
(1)如何获得ajax对象?
XMLHttpRequest并没有标准化，要区分浏览器:
function getXhr(){
var xhr;
if(window.XMLHttpRequest){
//非ie浏览器
xhr = new XMLHttpRequest();
}else{
//ie
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
}
(2)ajax对象的属性
a, onreadystatechange : 绑订一个事件处理
函数(注册监听器),当ajax对象的readyState
值发生了改变(比如，从0-->1)，就会产生
readystatechange事件。
b, responseText: 获得服务器返回的文本
c, responseXML:获得服务器返回的xml数据
d, status:获得状态码
e, readyState:ajax对象在与服务器进行通讯时，
通过readyState属性值可以获取该对象的通讯的状态，
其属性有5个(0,1,2,3,4),当属性值为4时，表示ajax
对象已经获得了服务器返回的所有的数据。
(3)ajax编程的基本步骤
step1, 先获得ajax对象
var xhr = getXhr();
step2, 发送请求
xhr.open(请求方式,请求地址,异步还是同步);
请求方式: get/post
请求地址:如果是get请求，请求参数要添加到
请求地址的后面。
true表示异步请求 ：ajax对象发请求的同时，用户
可以对当前页面做其它的操作。
false表示同步请求:ajax对象发请求的同时,浏览器
会锁订当前页面，用户需要等待处理完成之后才
能做下一步操作。
方式一：get请求
xhr.open('get',
'check_username.do?username=zs',true);
xhr.onreadystatechange=f1;
xhr.send(null);
方式二：post请求
xhr.open('post');
step3,编写服务器端的代码，服务器端一般不需要
返回完整的页面，只需要返回部分的数据，比如一个
简单的字符串。
step4, 编写监听器
function f1(){
if(xhr.readyState == 4){
//获得服务器返回的数据
var txt = xhr.responseText;
//dom操作
}
}
第二天
Json字符串转换成javascript的方法
：1、ajax编程中的编码问题
(1)发送get请求:
ie浏览器内置的ajax对象，对中文参数使用gbk编码
，
而其它浏览器(firefox,chrome)使用utf8编码。
服务器端默认使用iso-8859-1去解码。
解决方案:
step1,让服务器对get请求中的参数使用指定的编码
格式进行解码。
比如，对于tomcat，可以修改
conf/server.xml
URIEncoding="utf-8"
step2,对请求地址，使用encodeURI函数进行统一的
编码(utf-8)
(2)发送post
所有浏览器内置的ajax对象都会使用utf-8进行编码
。
解决方案:

request.setCharacterEncoding("utf-8");
2、发送post请求
xhr.open('post','check_username.do',true);
xhr.setRequestHeader('content-type',
'application/x-www-form-urlencoded');
xhr.onreadystatechange=f1;
xhr.send('username=' + $F('username'));
注意：
因为按照http协议的要求，如果发送的
post请求，
请求数据包里面，应该有一个消息头 content-type
。
但是，ajax对象默认没有，所以，需要调用
setRequestHeader方法。

3、json (javascript object notation)
(1)json是什么?
是一种轻量级的数据交换标准。
a,什么是数据交换?
简单地讲，就是将要交换的数据先转换成一个
与平台无关的数据格式(比如xml或者json字符串)发
送给接受方，接受方再进行相应的转换。
b,轻量级
相对于xml，json解析的速度更快，数据量更小。
(2)json语法格式
1)如何表示一个对象
{属性名:属性值,属性名:属性值...}
要注意:
a,属性值的类型可以是

string,number,null,boolean, object。
b,属性名必须使用引号括起来
c,属性值如果是string，也必
须使用引号括起来
2)如何表示一个对象组成的数组
[{},{},{}...]
(3)如何使用json做数据交换
1)java对象(java对象组成的数组或者集合)转换成
对应的json字符串
可以从www.json.org去下载对应语言的工
具。
使用的json-lib中提供的两个类:
JSONObject, JSONArray
2)json字符串转换成javascript对象
可以使用prototype提供的evalJSON函数
。
prototype.js提供了很多有用的函数:
a, $(id): 
document.getElementById(id);
b, $F(id):
document.getElementById(id).value;
c,  $(id1,id2,...): 分别查找
id为id1,id2...的节点，
然后返回一个数组。
d, strip(): 除掉字符串两端的
空格。
e, evalJSON():将json字符串转
换成对应的
javascript对象或者数组。
练习：热卖商品动态显示

step1,建表
create table t_sale(
id int primary key auto_increment,
name varchar(50),
price double,
qty int
);
insert into t_sale(name,price,qty) values
('bmwx6',20,30);
insert into t_sale(name,price,qty) values
('bmwx5',20,20);
insert into t_sale(name,price,qty) values
('bmwx3',20,60);
insert into t_sale(name,price,qty) values
('bmwx1',20,40);
查询销量前三的sql:
  select * from t_sale order by qty desc
limit 3;
step2, 实体类  Sale
step3, SaleDAO
List<Sale> find...
step4,  ActionServlet
输出一个json字符串
step5, 测试ActionServlet
step6,  sale.jsp

4、ajax应用中的缓存问题:
当使用ie浏览器时，如果使用get方式发请
求，
浏览器会先缓存之前访问的数据，如果访问的地址不
变，不会向服务器发请求。
解决方式1:使用post方式发请求。     
解决方式2: 在请求地址后面添加一个随机
数。

5、发送同步请求
xhr.open('post','check_username.do',false);