两天学会ajax

====================================

第一天

================

1、ajax是什么?

asynchronous javascript and xml
ajax是一种用来改善用户体验的技术，其实质是利用
浏览器内置的一个特殊的对象(XMLHttpRequest对象)
向服务器发送请求，在发送请求的同时，浏览器并不会
销毁当前页面，用户仍然可以对当前页面做其它操作。
服务器发送回来的一般也不是一个完整的新的页面，而是
部分的数据(文本或者xml文档),在浏览器端，可以利用这些
数据部分更新当前页面。整个过程，页面无任何的刷新，不
打断用户的操作。

2、如何获得XMLHttpRequest对象?

因为XMLHttpRequest并没有标准化，所以，要区分浏览器。
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
//非ie浏览器
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}

3、XMLHttpRequest对象(ajax对象)的重要属性

1) onreadystatechange: 绑订一个事件处理函数,该函数用来
处理readystatechange事件(当readyState属性值发生改
变，就会产生该事件)。
2) responseText:获取服务器返回的文本。
3) responseXML:获取服务器返回的xml。
4) readyState：ajax对象在与服务器进行通讯时的一种状态,
有5个值，分别是0,1,2,3,4。比如值为4时，表示ajax对象已经
成功地获取了服务器返回的所有的数据。
5) status:状态码

4、编程步骤

step1,获得ajax对象
比如:
var xhr = getXhr();
step2,发送请求
xhr.open(请求方式,请求地址,同步还是异步);
注意：
请求方式: 'get'或者'post'
请求地址: 如果是get请求，需要将请求参数添加到
请求地址的后面，
比如: 'check_username.do?username=zs'
同步还是异步: true表示异步,false表示同步(
浏览器会锁定当前页面，用户不能做其它操作，需要
等待服务器的响应发送回来)。
xhr.onreadystatechange=f1;
xhr.send(null);
step3,编程服务器端的代码，跟以前相比，有一点区别就是
一般不需要返回完整的页面，只需要返回部分的数据。
step4,编写事件处理函数
function f1(){
if(xhr.readyState == 4){
var txt = xhr.responseText;
更新操作...
}
}

练习： 使用ajax技术对验证码的正确性进行验证。
如果要发送post请求：
xhr.open('post','check_username.do',true);
//按照http协议要求，发送post请求时，要
//添加一个content-type消息头，而默认情况下,
//ajax对象并不会自动添加这个消息头，所以，
//需要调用setRequestHeader方法来添加。
xhr.setRequestHeader('content-type',
'application/x-www-form-urlencoded');
xhr.send('username=' + $F('username'));

5、编码问题

(1)如果以get方式发送请求，浏览器内置的ajax对象
会对请求地址中的中文数据进行编码，具体使用哪一种
编码格式要看浏览器(ie使用的是gbk,firefox,chrome使用的
utf-8)。服务器默认使用iso-8859-1去解码，所以会产生
乱码问题。
解决方式:
step1,修改服务器配置，让服务器使用指定的编码格式
进行解码(只对get请求有效)，比如可以修改tomcat的
server.xml,添加 URIEncoding="utf-8"。
step2,使用encodeURI函数对请求地址进行编码。
encodeURI函数会对请求地址中的中文数据进行编码
(使用utf-8这种编码格式)。
(2)如果以post方式发送请求，浏览器内置的ajax对象
都会使用utf-8这种编码格式进行编码。我们只需要调用
request.setCharacterEncoding("utf-8")就可以解决编码问题。

6、缓存问题

当发送get请求时，
ie内置的ajax对象会将服务器返回的结果缓存起来，如果
请求地址不变，不再向服务器发请求。
解决方式：
方式一：发送post请求。
方式二：在请求地址后面添加一个随机数。
比如：
'getNumber.do?' + Math.random()
====================================

第二天

================

1、json是什么?

javascript object notation
json技术借鉴了javascript创建对象的一种语法(javascript
object notation),所以，将该技术命名为json。
json是一种轻量级的数据交换技术标准。

1)数据交换：

将要交换的数据转换成一种与平台无关的标准的数据格式
发送给另外一方。

2)轻量级:

相对于xml,使用json有两个优势，一是数据量更小，另外，
解析速度更快。

2、基本语法

(1)使用json表示一个对象

{属性名称:属性值,属性名称:属性值...}
注意：
属性名称必须用引号。
属性值的数据类型可以是string,number,
boolean,null,object。
属性值如果是string，必须用引号。
比如:
{'name':'zs','age':22}

(2)使用json表示一个对象组成的数组

[{},{},{}...]
比如:
[{'name':'zs','age':22},{'name':'ww','age':22}]

3、如何使用json来做数据交换?

(1) java对象转换成json字符串

可以使用json官方提供的api

(2)将json字符串转换成javascript对象

可以使用prototype提供的evalJSON函数

prototype是一个js文件，提供了很多有用的函数。

1) $(id): 相当于document.getElementById(id);
2) $F(id):相当于document.getElementById(id).value;
3) $(id1,id2,id3...):使用id1,id3...分别去查找对应的
节点，返回由这些节点组成的数组。
4) strip(): 除掉字符串两端的空格。
5) evalJSON():将json字符串转换成javascript
对象。

练习：
热卖商品动态显示
step1,建表，并准备一些数据
create table t_sale(
id int primary key auto_increment,
name varchar(20),
qty int
);
insert into t_sale(name,qty) values('prod001',100);
insert into t_sale(name,qty) values('prod002',20);
insert into t_sale(name,qty) values('prod003',30);
insert into t_sale(name,qty) values('prod004',110);
insert into t_sale(name,qty) values('prod005',60);

查询销量前三的商品
select * from t_sale order by qty desc limit 3;
step2,写entity类 Sale
step3,SaleDAO
List<Sale> find(int top) throws Exception;
step4,ActionServlet
调用find方法，并且将得到集合转换成一个
json字符串
step5,测试ActionServlet
step6,Sale.jsp

4、如何处理日期

参见java栏目下json

5、发送同步请求

(1)如何发送同步请求

xhr.open('get/post',false);

(2)同步请求的特点

如果发送的是同步请求，浏览器不会向下执行以下
的代码(send方法之后的代码)，会等待服务器响应，
表现为当前页面被锁定了，用户不能做其它的操作。

练习：
使用ajax方式完成用户名检查、验证码检查操作，
如果检查通不过，则不能提交。
====================================

================

原文地址：https://www.jb51.cc/ajax/165482.html