11Ajax学习笔记.docx

11Ajax学习笔记.docx

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

11Ajax学习笔记

Ajax学习笔记

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

目录

一、Ajax概述1

1.1什么是Ajax1

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

二、JSON7

2.1什么是JSON7

2.2数据交换7

2.3轻量级7

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

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

2.6案例：

股票的实时行情9

2.7案例：

显示热卖的前3个商品10

2.8同步请求10

2.9案例：

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

1、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.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'）;：

发送一个content-type消息头

③xhr.onreadystatechange=func1（）;：

绑定一个事件处理函数（监听器）

④xhr.send（'username=chang'）;：

发送请求参数

◆注意事项：

v与get请求不同，请求参数要放到send方法里面。

v因为按照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）页面无刷新，不打断用户的操作。

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（）;">点这儿，在链接底下显示一个随机数