Ajax学习笔记

第一天

Ajax的核心是js的使用。现在一般很少使用xml传输，因为很慢，一般使用jsion来进行传输。使用ajax技术之后页面无刷新，但是并没有打断用户的操作使用户的操作顺利进行。

Ajax编程的基本步骤：xhr.open().里面有三个参数，第一个是请求方式（get/post），第二个是请求地址，第三个是异步还是同步，

写js的时候少用全局变量

1、ajax是什么?

asynchronousjavascriptandxml:异步的javascript和xml。

是一种用来改善用户体验的技术，其本质是利用

浏览器内置的一种特殊的对象(XMLHttpRequest)异步

(即发送请求时，浏览器不会销毁当前页面，用户

可以继续在当前页面做其它的操作)的向服务器发送

请求,并且利用服务器返回的数据(不再是一个完整的

页面，只是部分的数据，一般使用文本或者xml返回)

来部分更新当前页面。

使用ajax技术之后，页面无刷新，并且不打断用户

的操作。

2、ajax对象

(1)如何获得ajax对象?

XMLHttpRequest并没有标准化，要区分浏览器:

functiongetXhr(){

varxhr;

if(window.XMLHttpRequest){

//非ie浏览器

xhr=newXMLHttpRequest();

}else{

//ie

xhr=newActiveXObject('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对象

varxhr=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,编写监听器

functionf1(){

if(xhr.readyState==4){

//获得服务器返回的数据

vartxt=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(javascriptobjectnotation)

(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,建表

createtablet_sale(

idintprimarykeyauto_increment,

namevarchar(50),

pricedouble,

qtyint

);

insertintot_sale(name,price,qty)values

('bmwx6',20,30);

insertintot_sale(name,price,qty)values

('bmwx5',20,20);

insertintot_sale(name,price,qty)values

('bmwx3',20,60);

insertintot_sale(name,price,qty)values

('bmwx1',20,40);

查询销量前三的sql:

select*fromt_saleorderbyqtydesc

limit3;

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