Ajax学习笔记.docx

Ajax学习笔记.docx

《Ajax学习笔记.docx》由会员分享，可在线阅读，更多相关《Ajax学习笔记.docx（38页珍藏版）》请在冰豆网上搜索。

Ajax学习笔记

Ajax学习笔记

Java相关课程系列笔记之十一

笔记内容说明

Ajax（程祖红老师主讲，占笔记内容100%）；

目录

一、Ajax概述.................................................................................................................................1

1.1什么是Ajax..........................................................................................................................1

1.2Ajax对象：

如何获得Ajax对象........................................................................................1

1.3Ajax对象的属性..................................................................................................................2

1.4编程步骤...............................................................................................................................2

1.5编码问题...............................................................................................................................3

1.6Ajax的优点..........................................................................................................................3

1.7缓存问题（IE浏览器）......................................................................................................4

1.8案例：

简易注册（使用Ajax进行相关验证，get请求）...............................................4

1.9案例：

修改1.8案例，使用post请求...............................................................................6

1.10案例：

使用Ajax实现下拉列表.......................................................................................6

二、JSON........................................................................................................................................8

2.1什么是JSON........................................................................................................................8

2.2数据交换...............................................................................................................................8

2.3轻量级...................................................................................................................................8

2.4JSON语法（www.json.org）..............................................................................................8

2.5如何使用JSON来编写Ajax应用程序.............................................................................9

2.6案例：

股票的实时行情.....................................................................................................10

2.7案例：

显示热卖的前3个商品.........................................................................................11

2.8同步请求.............................................................................................................................11

2.9案例：

修改1.8案例step1中的JS代码（使用同步请求）.........................................12

1

Z

Ajax学习笔记

一、Ajax概述

1.1什么是Ajax

AsynchronousJavascriptAndXml（异步的JavaScript和Xml）。

是一种用来改善用户体验

的技术，其实质是利用浏览器内置的一个特殊对象（XMLHttpRequest，一般称之为Ajax对

象）异步地（Ajax对象在向服务器发送请求时，浏览器并不会销毁当前页面，用户仍然可以

对当前页面作其他的操作）向服务器发送请求，服务器送回部分数据（不是一个完整的新的

页面，而是文本或者Xml文档），在浏览器端，可以利用这些数据部分更新当前页面。

整个

过程，页面无刷新，不打断用户的操作。

之前，都是先销毁原来的页面，然后发送请求，等待服务器发送响应，再生成新页面。

Ajax的工作流程：

1.2Ajax对象：

如何获得Ajax对象

由于XMLHttpRequest（Ajax对象）没有标准化，所以要区分浏览器。

functiongetXhr（）{//注意：

后面的案例都将用到此函数

varxhr=null;

if（window.XMLHttpRequest）{

xhr=newXMLHttpRequest（）;//非IE浏览器

}else{

xhr=newActiveXObject（'Microsoft.XMLHttp'）;//IE浏览器

}

returnxhr;

}

注意事项：

后面的案例也会用到以下函数

function$（id）{//依据id返回dom节点

returndocument.getElementById（id）;

}

function$F（id）{//返回id对应的值

return$（id）.value;

}

1

Z

Ajax学习笔记

1.3Ajax对象的属性

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对象，比如：

varxhr=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：

编写事件处理函数

functionf1（）{

if（xhr.readyState==4）{

vartxt=xhr.responseText;

dom操作……

}

}

2）发送post请求：

step1：

获得Ajax对象，比如：

varxhr=getXhr（）;//调用之前定义的函数

step2：

使用Ajax对象发送post请求

①xhr（'post','check_username.do',true）;：

建立连接

②xhr.setRequestHeader（'content-type','application/x-www-form-urlencoded'）;：

发送

2

Z

Ajax学习笔记

一个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文件夹中），添加URIEncoding="utf-8"（告诉服务器，对于所有的get请求，默认

使用“utf-8”去解码），修改之后重新启动服务器。

maxThreads="150"minSpareThreads="25"maxSpareThreads="75"

enableLookups="false"redirectPort="8443"acceptCount="100"

connectionTimeout="20000"disableUploadTimeout="true"URIEncoding="utf-8"/>

step2：

使用encodeURI（）函数（JS中内置函数）对请求地址进行编码。

encodeURI（）

函数会使用“utf-8”进行编码

xhr.open（'get','check_username.do?

username='+$F（'username'）,true）;

varuir='check_username.do?

username='+$F（'username'）;

xhr.open（'get',encodeURI（uri）,true）;

2）发post请求

①乱码问题产生的原因：

所有浏览器（一般指三大浏览器：

Chrom、Firefox、IE）内置的Ajax对象都会使用

“utf-8”对中文参数进行编码，而服务器默认情况下，会使用“ISO-8859-1”去解码。

注意事项：

Firefox特殊，本应是乱码，但能正常显示。

通过截取消息头发现

Firefox会在消息头中自动添加"charset=utf-8"。

②解决：

服务器端添加：

request.setCharacterEncoding（"utf-8"）;

1.6Ajax的优点

1）页面无刷新，不打断用户的操作。

3

Z

Ajax学习笔记

2）按需要获取数据，客户端（浏览器）与服务器端之间的数据传输量大大减少。

3）是一种标准化的技术，不需要下载任何插件。

1.7缓存问题（IE浏览器）

1）当发送get请求时

IE浏览器（其他浏览器没这个问题）内置的Ajax对象会检查请求地址是否访问过，

如果访问过，则不再向服务器发送请求。

2）解决方式

方式一：

在请求地址后面添加一个随机数，用于欺骗IE，例如：

xhr.open（'get','getNumber.do?

'+Math.random（）,true）;

方式二：

使用post方式发请求。

3）案例：

在IE浏览器中测试缓存问题

step1：

getNumber.jsp页面

;"onclick="getNumber（）;">点这儿，在链接底下显示一个随机数