jy-11-AJAX--承租红+成恒

最新推荐文章于 2024-04-22 17:39:51 发布

从码农到码到成功

最新推荐文章于 2024-04-22 17:39:51 发布

阅读量193

点赞数

文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/weixin_39519454/article/details/120708310

版权

1、day01－AJAX

名称

Asynchronous Javascript And XML：异步的Javascript与XML

异步的：非同步的

---------------------------------------------------------------------------------------------------------------------------------

问题

以登录功能为例，假设是失败的：当用户点击“登录”按钮后，会向服务器提交请求，然后，服务器端进行登录验证，并返回结果，返回的结果由于是失败的，很可能还是登录页面，只不过此次登录界面中包括错误信息，例如在页面上会显示“用户名或密码错误”之类的提示。

在这样的案例中，存在的问题：

1 登录前和登录后的是同一个界面，却由服务器返回了2次，第2次仅仅只是多了错误提示，返回的却是整个界面，从必要性、流量方向考虑，都是没有必要的！

2 用户体验较差，特别是网络传输速度较差的情况下表现得更加明显，毕竟需要处理的数据中有较大比例的是不必要传输的数据！

3 用户体验较差，表现为当用户提交后，接下来将得到新的界面，在提交后、新界面显示之前，用户无法在界面中进行操作。

---------------------------------------------------------------------------------------------------------------------------------

基本概念

AJAX是一种提交HTTP请求、获取结果的处理方式。

AJAX提交的请求是异步的，即开启另一个线程提交请求，与当前浏览器显示的页面、用户的使用并不发生冲突。

AJAX获取的响应结果通常不会是一个完整的网页，而是某些数据，可以是普通的字符串直接表示的数据，例如错误提示信息，也可能是有规则组织起来的数据，例如使用XML来组织这些数据。

AJAX并不是一门新的语言，只是一门技术而已。

AJAX在程序中的表现是Javascript代码。

---------------------------------------------------------------------------------------------------------------------------------

XMLHttpRequest

在AJAX中，XMLHttpRequest就是用于发送异步请求，并获取响应结果的对象！

由于历史版本问题，在IE 5和IE 6中，并没有XMLHttpRequest，而是使用的ActiveXObject，所以，在这2个版本的浏览器，如果需要使用AJAX，必须是：

XMLHttpRequest xmlhttp = new ActiveXObject("Microsoft.XMLHttp");

为了保证各种浏览器都可以获取到正确的XMLHttpRequest对象：

function getXMLHttpRequest() {
var xmlhttp = null;
if (window.XMLHttpRequest) {
// 适用于IE 7+、Chrome、Firefox、Safari、Opera……
xmlhttp = new XMLHttpRequest();
} else {
// 适用于IE 5、IE 6
xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
}
return xmlhttp;
}

----------------------------------------------------------------------------------------------

在XMLHttpRequest中的5个属性

-- onreadystatechange：处理函数，即请求发出后，哪个函数对后续的操作进行处理，该属性的值应该是一个函数。

-- readyState：状态，该属性的值为0~4之间的数值，即共5种状态： -- -- 0[不关心]：连接尚未初始化 -- -- 1[不关心]：初始化连接 -- -- 2[不关心]：发出请求 -- -- 3[不关心]：服务器已经接收到请求 -- -- 4：响应已经就绪

-- status：响应码，例如200表示正确的响应

-- responseText：响应的正文（字符串）

-- responseXML：响应的XML，该属性和responseText选取其中一个来使用即可，取决于服务器响应的正文到底是字符串还是XML格式

-----------------------------------------------------------------------------------------------------------------------------

发送请求

发送请求需要调用open()和send()这2个函数，例如：

xmlhttp.open("GET", "query.do", true);
xmlhttp.send();

在open()函数中，第1个参数表示请求类型，取值可以是"GET"或"POST"，第2个参数表示请求资源的路径，可以是相对路径，也可以是绝对路径，路径对应的资源可以是一个动态页面，也可以是在服务器上的文本文件，或图片等任意资源，第3个参数表示此次请求是否是异步的，取值为true表示异步，取值为false表示同步。

在发出"GET"请求时，调用send()函数时，不需要添加参数，或添加null作为参数均可，如果发出的是"POST"请求，则应该把参数以"name1=value1&name2=value2&name3=value3"这样的形式组织起来，作为调用send()函数的参数。

由于"POST"请求的参数是需要配置请求头的，所以，在发出"POST"请求之前，还必须调用XMLHttpRequest对象的setRequestHeader()函数，以配置请求头：

xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

Ps：在使用open()函数时将第3个参数设置为false表示将发出同步请求，一旦发出请求，当前网页将暂时处于不可用状态，例如网页上的按钮将无法点击，页面将无法滚动等，直至此次同步请求处理完毕。基于这样的特性，通常极少使用同步请求，即使使用，也只用于处理少量数据，保证同步请求不会占用太多时间，从而不影响用户的正常体验。

-----------------------------------------------------------------------------------------------------------------------------

案例一

目标

服务器端有一组数据：BeiJing、ShangHai、GuangZhou、ShenZhen、TianJin、NanJing、ChangSha、ChengDu……

在网页中输入例如字母B，将在网页中提示以字母B作为首字母的结果：BeiJing，如果输入S，则提示：ShangHai、ShenZhen

开发步骤

1 设计功能：

public String query(String keyword) {
String[] cities = "BeiJing,ShangHai,GuangZhou,ShenZhen,TianJin,NanJing,ChangSha,ChengDu".split(",");
StringBuffer result = new StringBuffer();
for (int i = 0; i < cities.length; i++) {
if (cities[i].startsWith(keyword)) {
if (result.length() > 0) {
result.append("、");
}
result.append(cities[i]);
}
}
return result.toString();
}

2 开发Web项目，提供功能

cn.tedu.ajax.servlet.QueryCityServlet

http://SERVER:PORT/PROJECT/query.do?keyword=S

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 1. 获取请求参数：关键字
String keyword = req.getParameter("keyword");

// 2. 调用query()方法，获取关键字对应的结果
String result = query(keyword);

// 3. 获取输出流，向客户端输出结果
PrintWriter out = resp.getWriter();
out.println(result);
out.flush();
out.close();
}

另：需注册Servlet

3 设计前端页面：页面中需要1个输入框用于输入关键字，另需要1个标签显示结果，其它部分没有要求

4 编写Javascript程序，每当输入框中的内容改变时，获取输入框中的内容

<script type="text/javascript">
function showSuggest(keyword) {
// 测试获取输入框中的内容
// alert(keyword);
}
</script>

<input type="text"
onkeyup="showSuggest(this.value)" />

5 获取异步请求对象

var xmlhttp = new XMLHttpRequest();

6 发出请求

// 请求URL
var url = "query.do?keyword=" + keyword;
// 发出请求
xmlhttp.open("GET", url, true);
xmlhttp.send();

7 在发出请求之前，添加对结果处理的函数

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4
&& xmlhttp.status == 200) {
document.getElementById("suggestResult")
.innerHTML = xmlhttp.responseText;
}
};

--------------------------------------------------------------------------------------

案例二

目标

模拟登录，需要输入用户名和密码来登录，假设正确的用户名是tomcat，匹配的密码是tomcat7，当用户登录后，如果用户名错误，则在用户名的输入框下方提示用户名错误，如果密码错误，则在密码的输入框下方提示密码错误。

-----------------------------------------------------------------------------------------------------------------------------

开发步骤

1 创建项目：DAY09-AJAX-02-Login

2 创建Servlet：cn.tedu.ajax.servlet.LoginServlet，并在该LoginServlet中重写doPost()方法，在方法中接收名为username和password的参数，根据参数模拟判断登录，如果用户名错误，向客户端输出"Username not exists"，如果密码错误，向客户端输出"Password not match"，如果都正确，则向客户端输出"OK"，完成后，在web.xml中注册该LoginServlet，映射地址为：handleLogin.do

3 在webapp目录下添加index.html，在该文件中添加2个输入框，分别用于输入用户名和密码，并为这2个输入框设置id属性，以便于通过Javascript获取输入框中的值，然后添加按钮，最后，在2个输入框的下方分别添加1个标签，用于显示登录错误的信息

4 添加Javascript函数：funtion $(id) ...

5 添加Javascript函数：function getXMLHttpRequest() ...

6 添加Javascript函数：function doLogin()，在该函数中，先获取用户输入的数据，验证数据基本有效性（本次练习可选操作），然后获取XMLHttpRequest对象，配置onreadystatechange属性，设计响应函数，然后依次调用open()、setRequestHeader()、send()方法发出请求，在响应函数中，通过XMLHttpRequest对象的responseText获取响应结果，对结果进行判断，然后通过标签对象的innerHTML来显示错误信息，或者通过window.location重定向

在Spring MVC案例中，控制器返回值

在Spring MVC的默认情况下，控制器返回的值是用于处理后续内容的View组件名称，只需要使用@ResponseBody对方法进行注解，则表示方法返回的就只是值！注意：使用@ResponseBody时，必须在Spring的配置文件中添加<mvc:annotation-driven />

public class Controller {
@RequestMapping()
@ResponseBody
public String handleLogin() {
return "value";
}
}

2、day02－在Spring MVC中使用@ResponseBody

@ResponseBody用于注解Controller类中的方法。

一旦使用了这个注解，Controller中方法的返回值就应该是String，并且不再表示“返回View组件的名称”的意义，而是返回普通的字符串，最终，客户端得到的响应也就是这个字符串！

使用@ResponseBody时，推荐在Spring的配置文件中添加<mvc:annotation-driven />驱动注解。

-----------------------------------------------------------------------------------------------------------------------------

JSON

为什么要使用JSON

在很多情况下，服务端程序作出的响应不再是显示某个HTML页面，而是一系列相关的数据，这样的话，更加利于服务端程序“提供数据服务”，即只提供数据，而不负责数据的呈现。

由服务端程序提供数据往往包含很多信息，比如自定义的响应代码（例如1表示成功，-1表示某种操作错误等），还包含提示信息、关键数据等等。

诸多的信息应该有规则的组织起来，便于发出请求的一方进行分析并且处理！早期的做法是使用XML进行处理：

<response-body>
<status>1</status>
<data>
<username>tomcat</username>
<age>18</age>
<from>BeiJing</form>
</data>
</response-body>

使用XML最大的不足在于使用的节点过多，解析过程相对麻烦，并且由于节点过多，导致传输的数据量较大！

用于取代XML这种组织数据的方式的就是JSON：

{
"status":1,
"data":{
"username":"tomcat",
"age":18,
"from":"BeiJing"
}
}

通过对比，可以发现，使用JSON表达的数据，体量更小（字节数更少），所以，最终将表现得传输更快，消耗的流量更少一些！事实上，数据解析过程也更加简单一些！

-----------------------------------------------------------------------------------------------------------------------------

JSON的数据格式

1 JSON数据必须使用一对大括号框住后再开始编写，相当于每个XML都有且仅有1个根节点

2 JSON数据中的属性与值都是使用 "属性名":属性值这样的格式来组织，多对属性与值的配置之间使用逗号进行分隔，例如：

{
"name":"tomcat",
"age":18
}

3 JSON中也有数据类型的概念，如果属性的值是字符串类型的，必须使用双引号框住，如果是数值型的，直接写值即可，但是，由于JSON被多用于服务器端向客户端传输数据，所以，并不一定需要在意数据的类型，即使全部作为字符串类型来处理也是可以的：

{
"name":"tomcat",
"age":"18"
}

4 JSON中也可以表示对象，如果某个属性的值是对象，则该属性值应该使用大括号框住，在这对大括号中，继续使用 "属性名":属性值的格式表示对象内部的属性：

{
"status":1,
"data":{
"username":"tomcat",
"age":18,
"from":"BeiJing",
"department":{
"id":9527,
"name":"rd"
}
}
}

5 JSON中还可以表示数组或集合，对于JSON而言，严格的说只有数组，如果要表示List集合，语法上与数组是一样的，没有区别！表示数组的方式是使用 [] 将所有的数组成员框住，各成员之间使用逗号分隔：

{
"users":[
{ "username":"Alex", "age":18 },
{ "username":"Billy", "age":19 }
]
}

6 在Javascript中，也可以很方便的访问JSON数据，例如：

var jsonData = { "name":"tomcat", "age":"18" };
alert(jsonData.name);
jsonData = {
"status":1,
"data":{
"username":"tomcat",
"age":18,
"from":"BeiJing"
}
};
alert(jsonData.data.username);
jsonData = {
"users":[
{ "username":"Alex", "age":18 },
{ "username":"Billy", "age":19 }
]
};
alert(jsonData.users[1].username);

7 如果在Javascript中只能先得到JSON的字符串格式，需要转换为JSON对象，可以通过JSON.parse()函数来实现转换：

var text = '{ "status":1, "message":"ok" }';
var jsonObject = JSON.parse(text);

3、day03－练习 - 二级联动菜单

1 创建项目及准备工作

2 设计数据

----- 请选择 -----
1.广东省 1广州,2深圳,3珠海
2.河北省 4石家庄,5保定,6秦皇岛

3 设计服务端的功能：

URL：getCities.do
请求类型：GET
参数：provinceId
返回：ResponseResult，其中的数据部分是List<City>，City中至少封装id, name

a) 创建cn.tedu.spring.bean.ResponseResult，属性包括：int state，String message，Object data
b) 创建cn.tedu.spring.bean.City，属性包括：int id，String name
c) 创建cn.tedu.spring.controller.CityController，添加public String getCities(int provinceId)方法，映射到getCities.do路径，在方法内部，根据参数provinceId进行判断，然后得到List<City>，封装到ResponseResult中，最后转换为JSON字符串，作为方法的返回值
d) 通过浏览器测试

4 创建前端页面index.html，并添加2个下拉菜单，其中第1个下拉菜单中添加1广东省、2河北省这2个有效选项

5 设计AJAX请求

function $(id) {
return document.getElementById(id);
}
function getXMLHttpRequest() {
var xmlhttp = null;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
}
return xmlhttp;
}
function getCities(provinceId) {
// 无论选中哪个选项，先清空“城市”列表
while ($("cities").firstChild) {
$("cities").removeChild(
$("cities").firstChild);
}
// 判断provinceId是否有效
if (provinceId == 0) {
return;
}
// 获取XMLHttpRequest
var xmlhttp = getXMLHttpRequest();
// 设计响应函数
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4
&& xmlhttp.status == 200) {
// 获取响应的正文文本
var text = xmlhttp.responseText;
// 将响应的正文文本转换为JSON对象
var jsonObject = JSON.parse(text);
// 判断JSON对象中的state是否正确
if (jsonObject.state == 1) {
// 遍历JSON对象中的data对应的数组
for (var i = 0; i < jsonObject.data.length; i++) {
// 将数组中的每个数据设计为一个个<option>
var opt = document.createElement("option");
// <option value="3">珠海</option>
// "data":[
// {"id":1,"name":"广州"},
// {"id":2,"name":"深圳"},
// {"id":3,"name":"珠海"}
// ]
opt.value = jsonObject.data[i].id;
opt.innerHTML = jsonObject.data[i].name;
// 将<option>添加到“城市”列表中
$("cities").appendChild(opt);
}
}
}
};
// 发出请求
var url = "getCities.do?provinceId="
+ provinceId;
xmlhttp.open("GET", url, true);
xmlhttp.send();
}

AJAX的数据缓存问题

如果反复向同一个URL发出请求，并且请求参数没有发生变化的话，可能会获取到缓存的数据，即获取到的不是最新数据！

针对这个问题的解决方案：使得每次请求参数都不同！例如为每次的请求多添加1个参数，参数名可以自定义，参数值使用随机数即可！

jQuery AJAX - load()

在使用了jQuery后，关于AJAX的应用也得到了极大的简化，通过load()函数可以快速的提交AJAX的异步请求，并且将响应的结果填充到某个标签中。

注意：这种做法适用于（但不局限于）将结果直接填充到标签中！

这种做法的语法格式是：

$(选择器).load(URL,参数);

在以上语法中，$(选择器)表示需要将结果填充到哪个标签中，URL表示请求路径，参数表示发出请求时向服务器提交的参数，参数值的格式可以是字符串格式，例如：

username=tomcat&password=123456

参数值的格式还可以是JSON对象格式：

{ "username":"tomcat", "password":"123456" }

其实，load()函数的完整格式是：

$(选择器).load(URL,参数,处理响应结果的函数);

也就是说，load()函数还可以有第3个参数，第3个参数是一个函数，专门用于处理结果，类似于传统方式中的xmlhttp.onreadystatechange属性的值。

另外，其实在jQuery中，还有另一个也叫做load()的函数，也是被某个标签对象所调用的，但是，其参数是某个函数，用于表示标签加载完成时的自定义处理，这2个load()函数，至于执行的是哪个，取决于参数的设计。

jQuery AJAX - ajax()

在使用jQuery时，通过ajax()函数可以设置AJAX请求过程中所有的可设置项！

使用ajax()的基本语法是：

$.ajax({配置});

以上语法中，“配置”及左右两侧的{ }整体表现为一个JSON对象格式。

在“配置”中，通常会设置的属性有：

url：请求的路径

例如：

$.ajax({
"url":"getCities.do",
"success":function(obj) {
}
});

还会设置的属性有：

type：请求的类型（请求方式），取值为"GET"或"POST"

data：请求的参数，参数值可以是字符串格式的，也可以是JSON对象格式的

dataType：响应结果的数据的类型，常用的取值有"text"、"json"，当取值为"text"时，后续success属性对应的处理函数中的参数将是字符串类型的，当取值为"json"时，后续success属性对应的处理函数中的参数将是JSON对象

success：成功得到响应结果时的处理函数，即该属性的值是某个函数，该函数仅会在成功得到响应结果后被调用，所以，在函数内部，无须再判断状态为4或响应码为200，并且，在编写处理函数时，请为该函数添加参数，参数名称可自行定义，参数将是成功得到响应结果时的响应结果，类似于xmlhttp.responseText

在配置以上属性时，不区分先后顺序，即先配置哪个后配置哪个，并没有要求！

除此以外，ajax()函数还可以配置许多属性，如有需要，请参考相关文档。

4、回顾

[****] HTML

用于规划网页内容，需要掌握有哪些标签、什么时候用什么标签，什么样的标签默认有什么样式

-----------------------------------------------------------------------------------------------------------------------------

[***] CSS

-----------------------------------------------------------------------------------------------------------------------------

[***] Javascript

处理界面与用户的交互

-----------------------------------------------------------------------------------------------------------------------------

[***] jQuery

-----------------------------------------------------------------------------------------------------------------------------

[*****] jQuery AJAX

-----------------------------------------------------------------------------------------------------------------------------

[***] Servlet

用于接收用户的请求，并向客户返回响应结果。

需要掌握：定位、注册、注册时配置参数

-----------------------------------------------------------------------------------------------------------------------------

[**] Filter

用于对请求进行过滤，运行在Servlet之前

需要掌握：字符编码过滤器

-----------------------------------------------------------------------------------------------------------------------------

[*****] JSP

向客户端提供响应的视图

需要掌握：EL、JSTL

-----------------------------------------------------------------------------------------------------------------------------

[*****] SQL

需要掌握：创建库、创建表、增删改查、关联表查询、事务

需要了解：聚合函数、Having、Group By、存储过程、触发器

-----------------------------------------------------------------------------------------------------------------------------

[*****] Spring

Spring解决了创建对象的问题，使得开发者可以不通过new语法获取对象。

DI（依赖注入）是实现的手段，IOC（控制反转）是最终的实现效果。

-----------------------------------------------------------------------------------------------------------------------------

[*****] Spring MVC

Spring MVC提供完整的接收请求、分发请求、响应请求的机制，最终表现为开发者可以自定义Controller类，并在Controller类中自定义方法去处理请求。

-----------------------------------------------------------------------------------------------------------------------------

[*****] Mybatis

一、AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

1.AJAX 简介

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

-----------------------------------------------------------------------------------------------------------------------------

您应当具备的基础知识

在继续学习之前，您需要对下面的知识有基本的了解：

HTML / XHTML
CSS
JavaScript / DOM

如果您希望首先学习这些项目，请在我们的首页访问这些教程。

-----------------------------------------------------------------------------------------------------------------------------

什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

ajax-思维导图

----------------------------------------------------------------------------------------------

Google Suggest

在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

-----------------------------------------------------------------------------------------------------------------------------

今天就开始使用 AJAX

AJAX 基于已有的标准。这些标准已被大多数开发者使用多年。

请阅读下一章，看看 AJAX 是如何工作的！

2.AJAX 实例

为了帮助您理解 AJAX 的工作原理，我们创建了一个小型的 AJAX 应用程序。

-----------------------------------------------------------------------------------------------------------------------------

实例

Let AJAX change this text

通过 AJAX 改变内容

-----------------------------------------------------------------------------------------------------------------------------

AJAX 实例解释

上面的 AJAX 应用程序包含一个 div 和一个按钮。

div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：

<html>
<body>
<div id="myDiv"><h3>Let AJAX change this text</h3></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>

接下来，在页面的 head 部分添加一个 <script> 标签。该标签中包含了这个 loadXMLDoc() 函数：

<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>

下面的章节会为您讲解 AJAX 的工作原理。

3.AJAX - 创建 XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础。

-----------------------------------------------------------------------------------------------------------------------------

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

-----------------------------------------------------------------------------------------------------------------------------

创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

在下一章中，您将学习发送服务器请求的知识。

4.AJAX - 向服务器发送请求

XMLHttpRequest 对象用于和服务器交换数据。

-----------------------------------------------------------------------------------------------------------------------------

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

方法

描述

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

string：仅用于 POST 请求

-----------------------------------------------------------------------------------------------------------------------------

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

-----------------------------------------------------------------------------------------------------------------------------

GET 请求

一个简单的 GET 请求：

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

亲自试一试

在上面的例子中，您可能得到的是缓存的结果。

为了避免这种情况，请向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();

亲自试一试

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

亲自试一试

-----------------------------------------------------------------------------------------------------------------------------

POST 请求

一个简单 POST 请求：

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

亲自试一试

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

亲自试一试

方法

描述

setRequestHeader(header,value)

向请求添加 HTTP 头。

header: 规定头的名称
value: 规定头的值

-----------------------------------------------------------------------------------------------------------------------------

url - 服务器上的文件

open() 方法的 url 参数是服务器上文件的地址：

xmlhttp.open("GET","ajax_test.asp",true);

该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

-----------------------------------------------------------------------------------------------------------------------------

异步 - True 或 False？

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

xmlhttp.open("GET","ajax_test.asp",true);

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

-----------------------------------------------------------------------------------------------------------------------------

Async = true

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

亲自试一试

您将在稍后的章节学习更多有关 onreadystatechange 的内容。

-----------------------------------------------------------------------------------------------------------------------------

Async = false

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：

xmlhttp.open("GET","test1.txt",false);

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

注释：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

亲自试一试

5.AJAX - 服务器响应

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

responseText 属性

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

亲自试一试

-----------------------------------------------------------------------------------------------------------------------------

responseXML 属性

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

请求 books.xml 文件，并解析响应：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;

亲自试一试

6.AJAX - onreadystatechange事件

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

亲自试一试

注释：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

-----------------------------------------------------------------------------------------------------------------------------

使用 Callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}

亲自试一试

7.AJAX ASP/PHP 请求实例

AJAX 用于创造动态性更强的应用程序。

-----------------------------------------------------------------------------------------------------------------------------

AJAX ASP/PHP 实例

下面的例子将为您演示当用户在输入框中键入字符时，网页如何与 web 服务器进行通信：

请在下面的输入框中键入字母（A - Z）：

姓氏：

建议：

亲自试一下源代码

-----------------------------------------------------------------------------------------------------------------------------

实例解释 - showHint() 函数

当用户在上面的输入框中键入字符时，会执行函数 "showHint()" 。该函数由 "onkeyup" 事件触发：

function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}

源代码解释：

如果输入框为空 (str.length==0)，则该函数清空 txtHint 占位符的内容，并退出函数。

如果输入框不为空，showHint() 函数执行以下任务：

创建 XMLHttpRequest 对象
当服务器响应就绪时执行函数
把请求发送到服务器上的文件
请注意我们向 URL 添加了一个参数 q （带有输入框的内容）

-----------------------------------------------------------------------------------------------------------------------------

AJAX 服务器页面 - ASP 和 PHP

由上面的 JavaScript 调用的服务器页面是 ASP 文件，名为 "gethint.asp"。

下面，我们创建了两个版本的服务器文件，一个用 ASP 编写，另一个用 PHP 编写。

-----------------------------------------------------------------------------------------------------------------------------

ASP 文件

"gethint.asp" 中的源代码会检查一个名字数组，然后向浏览器返回相应的名字：

<%
response.expires=-1
dim a(30)
'用名字来填充数组
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
'获得来自 URL 的 q 参数
q=ucase(request.querystring("q"))
'如果 q 大于 0，则查找数组中的所有提示
if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if
'如果未找到提示，则输出 "no suggestion"
'否则输出正确的值
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%>

PHP 文件

下面的代码用 PHP 编写，与上面的 ASP 代码作用是一样的。

注释：如需在 PHP 中运行这个例子，请将 url 变量的值（Javascript 代码中）由 "gethint.asp" 改为 "gethint.php"。

<?php
// 用名字来填充数组
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//获得来自 URL 的 q 参数
$q=$_GET["q"];
//如果 q 大于 0，则查找数组中的所有提示
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// 如果未找到提示，则把输出设置为 "no suggestion"
// 否则设置为正确的值
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//输出响应
echo $response;
?>

7.AJAX 数据库实例

AJAX 可用来与数据库进行动态通信。

-----------------------------------------------------------------------------------------------------------------------------

AJAX 数据库实例

下面的例子将演示网页如何通过 AJAX 从数据库读取信息：

请在下面的下拉列表中选择一个客户：

请选择一位客户： Apple Computer, Inc.BAIDU, IncCanon USA, Inc.Google, Inc.Nokia CorporationSony Corporation of America

客户信息将在此处列出。

亲自试一下源代码

-----------------------------------------------------------------------------------------------------------------------------

实例解释 - showCustomer() 函数

当用户在上面的下拉列表中选择某个客户时，会执行名为 "showCustomer()" 的函数。该函数由 "onchange" 事件触发：

function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}

showCustomer() 函数执行以下任务：

检查是否已选择某个客户
创建 XMLHttpRequest 对象
当服务器响应就绪时执行所创建的函数
把请求发送到服务器上的文件
请注意我们向 URL 添加了一个参数 q （带有输入域中的内容）

-----------------------------------------------------------------------------------------------------------------------------

AJAX 服务器页面

由上面的 JavaScript 调用的服务器页面是 ASP 文件，名为 "getcustomer.asp"。

用 PHP 编写服务器文件也很容易，或者用其他服务器语言。请看用 PHP 编写的相应的例子。

"getcustomer.asp" 中的源代码负责对数据库进行查询，然后用 HTML 表格返回结果：

<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>

8.AJAX XML 实例

AJAX 可用来与 XML 文件进行交互式通信。

-----------------------------------------------------------------------------------------------------------------------------

AJAX XML 实例

下面的例子将演示网页如何使用 AJAX 来读取来自 XML 文件的信息：

获得 CD 信息

亲自试一下源代码

-----------------------------------------------------------------------------------------------------------------------------

实例解释 - loadXMLDoc() 函数

当用户点击上面的“获得 CD 信息”这个按钮，就会执行 loadXMLDoc() 函数。

loadXMLDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并将请求发送到服务器。

当服务器响应就绪时，会构建一个 HTML 表格，从 XML 文件中提取节点（元素），最后使用已经填充了 XML 数据的 HTML 表格来更新 txtCDInfo 占位符：

function loadXMLDoc(url)
{
var xmlhttp;
var txt,xx,x,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

AJAX 服务器页面

上面这个例子中使用的服务器页面实际上是一个 XML 文件，名为 "cd_catalog.xml"。

9.AJAX 实例

本例演示与 XML 一起使用的 JavaScript (AJAX)。

-----------------------------------------------------------------------------------------------------------------------------

使用 XMLHttpRequest 对象的实例

通过 XML HTTP 把文本文件载入 HTML 元素

通过 XML HTTP 加载 XML 文件

通过 XML HTTP 进行一次 HEAD 请求

通过 XML HTTP 进行一次指定的 HEAD 请求

把 XML 文件显示为 HTML 表格

例子解释

-----------------------------------------------------------------------------------------------------------------------------

当用户在文本框中键入内容时，使用 XMLHttp：

当用户键入文本时，通过使用 XML HTTP 与服务器进行在线通信

5、什么是 JSON ？

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）

JSON 是轻量级的文本数据交换格式

JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。

JSON 具有自我描述性，更易理解

2.1JSON - 转换为 JavaScript 对象

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。

由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。

2.2JSON - 简介

在线实例

通过我们的编辑器，您可以在线编辑 JavaScript 代码，然后通过点击一个按钮来查看结果：

JSON 实例

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h2>JavaScript 创建 JSON 对象</h2>
<p>
网站名称: <span id="jname"></span><br />
网站地址: <span id="jurl"></span><br />
网站 slogan: <span id="jslogan"></span><br />
</p>
<script>
var JSONObject= { "name":"菜鸟教程",
"url":"www.runoob.com",
"slogan”:”学的不仅是技术，更是梦想！"
};
document.getElementById("jname").innerHTML=JSONObject.namedocument.getElementById("jurl").innerHTML=JSONObject.urldocument.getElementById("jslogan").innerHTML=JSONObject.slogan
</script>
</body>
</html>

jy-11-AJAX--承租红+成恒

目录：

1、day01－AJAX

名称

问题

基本概念

XMLHttpRequest

----------------------------------------------------------------------------------------------

在XMLHttpRequest中的5个属性

发送请求

案例一

目标

开发步骤

--------------------------------------------------------------------------------------

案例二

目标

开发步骤

在Spring MVC案例中，控制器返回值

2、day02－在Spring MVC中使用@ResponseBody

JSON

为什么要使用JSON

JSON的数据格式

3、day03－练习 - 二级联动菜单

AJAX的数据缓存问题

jQuery AJAX - load()

jQuery AJAX - ajax()

4、回顾

[****] HTML

[***] CSS

[***] Javascript

[***] jQuery

[*****] jQuery AJAX

[***] Servlet

[**] Filter

[*****] JSP

[*****] SQL

[*****] Spring

[*****] Spring MVC

[*****] Mybatis

一、AJAX

1.AJAX 简介

您应当具备的基础知识

什么是 AJAX ？

ajax-思维导图

----------------------------------------------------------------------------------------------

Google Suggest

今天就开始使用 AJAX

2.AJAX 实例

实例

Let AJAX change this text

AJAX 实例解释

3.AJAX - 创建 XMLHttpRequest 对象

XMLHttpRequest 对象

创建 XMLHttpRequest 对象

创建 XMLHttpRequest 对象的语法：

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

4.AJAX - 向服务器发送请求

向服务器发送请求

GET 还是 POST？

GET 请求

POST 请求

url - 服务器上的文件

异步 - True 或 False？

Async = true

Async = false

5.AJAX - 服务器响应

服务器响应

responseText 属性

responseXML 属性

6.AJAX - onreadystatechange事件

onreadystatechange 事件

使用 Callback 函数

7.AJAX ASP/PHP 请求实例

AJAX ASP/PHP 实例

实例解释 - showHint() 函数

AJAX 服务器页面 - ASP 和 PHP

ASP 文件

PHP 文件

7.AJAX 数据库实例

AJAX 数据库实例