使用Ajax发送异步请求

Posted 2021-04-15 ComputerNotes

点击↑ ↑ ↑"JavaStudyNotes"↑ ↑ ↑

Java基础 | 数据库 | 新媒体运营 | 学习视频 | 学习资料下载

---

现在是资源共享的时代，同时也是只是共享的时代

本人声明

---

使用Ajax发送异步请求示例

 当用户输入邮编，系统自动填充相应的城市和省份

 

  创建Jsp页面原型

 

创建XMLHttpRequest

 要实现这种功能，必须非常熟悉一个javascript对象，即

XMLHttpRequest（简称XHR）。这个小小的对象实际上已经在几种浏览器中

存在一段时间了，它是Ajax的核心。该对象的几个常用方法和属性：

• open():建立到服务器的新请求

• send():向服务器发送请求

• readyState:提供当前html的就绪状态

• status:服务器响应的状态代码

• responseText:服务器返回的请求响应文本

 

创建XMLHttpRequest

---

创建跨浏览器的XMLHttpRequest对象：

 

创建XMLHttpRequest

注意不要被这些花括号迷住了眼睛，下面分别介绍每一步： 创建一个新变量request并赋值false.使用false作为判断条件，表示还没有创建XMLHttpRequest对象增加try/catch块：  尝试创建XMLHttpRequest对象如果失败，先尝试使用较新的Microsoft浏览器创建Microsoft兼容的对象（Msxml2.XMLHTTP）,

• 如果失败（尝试使用较老版本的Microsoft浏览器创建Microsoft兼容的对象（Microsoft.XMLHTTP））

• 如果全部失败，则保证request的值仍为false检查request是否仍然为false（如果一切顺利就不会是false）

• 如果出现问题则使用JavaScript警告通知用户出现问题建立到服务器的请求

  准备好XMLHttpRequest对象，就可以建立到服务器的请求了

1. 首先结合一些表单中的数据来构造URL

 

Escape()方法用于转义不能用明文正确发送的任何字符。比如，

空格将被转换成字符%20,从而能够在URL中传递这些字符。

然后建立请求：

 

 2.建立到服务器的请求

使用 XMLHttpRequest 对象的 open() 方法来建立请求。该方法有五个参数：

• request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求

• url：要连接的 URL

• asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为true

• username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值

• password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值

• 通常使用其中的前三个参数。事实上，即使需要异步连接，通常指定第三个参数为“true”，这样更容易理解

 

3.使用XMLHttpRequest发送请求

一旦请求用 open() 配置好之后，就可以使用send()方法发送请求了，send() 方法只有一个参数，就是要发送的内容，但是我们前面通过URL本身已经发送了zipcode的值，所以这里不需要通过 send() 传递数据，只要传递 null 作为该方法的参数即可：

 

4.设置回调函数

由于是异步请求，请求发出后JavaScript 方法不会等待服务器处理完成，因此代码将继续执行，就是说，将退出该方法而把控制返回给表单。用户可以继续输入信息，应用程序不会等待服务器

当服务器完成请求之后，需要指定该如何处理响应。XMLHttpRequest对象的onreadystatechange属性允许指定一个回调函数反向调用Web页面中的代码

当服务器完成请求之后，会查看XMLHttpRequest对象，特别 是onreadystatechange属性。

然后调用该属性指定的任何方法。之所以称为回调是因为由服务器向网页发起调用，无论网页本身正在做什么。这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务器响应请求并触发onreadystatechange属性指定的回调方法

 

由于是异步请求，请求发出后JavaScript 方法不会等待服务器处理完成，因此代码将继续执行，就是说，将退出该方法而把控制返回给表单。用户可以继续输入信息，应用程序不会等待服务器

当服务器完成请求之后，需要指定该如何处理响应。XMLHttpRequest对象的onreadystatechange属性允许指定一个回调函数反向调用Web页面中的代码

处理服务器响应

请求发送后，用户可以继续使用Web表单（同时服务器在处理请求）。而当服务器完成了请求处理，服务器查看onreadystatechange属性确定要调用的方法。除此以外，可以将应用程序看作其他应用程序一样，无论是否异步。换句话说，不一定要采取特殊的动作编写响应服务器的方法，只需要改变表单或其它的页面结构，让用户访问另一个 URL 或者做响应服务器需要的任何事情

处理函数（仅弹出简单的警告）：

 

 

运行以上代码，根据浏览器的不同，在表单停止弹出警告之前会看到两次、三次甚至四次警告。原因在于还没有考虑HTTP就绪状态，这是请求/响应循环中的一个重要部分

HTTP就绪状态（readyState）表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在Ajax应用程序中需要了解五种就绪状态：

1. 请求没有发出（在调用 open() 之前）

2. 请求已经建立但还没有发出（调用send() 之前）

3. 请求已经发出正在处理之中（这里通常可以从响应得到内容头部）

4. 请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应

5. 响应已完成，可以访问服务器响应并使用它

 

与大多数跨浏览器问题一样，这些就绪状态的使用也不尽一致。实际上很少出现就绪状态从0到1、2、3再到4，一些浏览器从不报告0或1而直接从2开始，然后是3和4，其他浏览器则报告所有的状态。还有一些则多次报告就绪状态1

对于Ajax编程，需要直接处理的惟一状态就是就绪状态4，它表示服务器响应已经完成，可以安全地使用响应数据了。基于此，回调函数做如下调整：

 

 

修改后就可以保证服务器的处理已经完成，现在就会看到只显示一次警告信息了。

---

以上代码看起来似乎不错，但是还有一个问题—— 如果服务器响应请求并完成了处理但是报告了一个错误怎么办？服务器端代码应该是由Ajax、JSP、普通HTML表单或其他类型的代码调用的，但只能使用传统的Web专用方法报告信息。而在 Web 世界中，HTTP状态码（status）可以处理请求中可能发生的各种问题，比如：

输入了错误的URL请求将得到404错误码，它表示该页面不存在

403和401错误码表示所访问的数据受到保护或者禁止访问

无论哪种情况，这些错误码都是从完成的响应中得到的。换句话说，服务器执行了请求（即HTTP就绪状态是4）但是没有返回客户机预期的数据。因此除了就绪状态外，还需要检查HTTP状态。我们期望的状态码是200，它表示一切顺利。如果就绪状态是4而且状态码是200，就可以处理服务器的数据了，而且这些数据应该就是要求的数据（而不是错误或者其他有问题的信息）

 

在回调函数中增加HTTP状态（status）检查：

 

 现在可以确保请求已经处理完成（通过就绪状态），服务器给出了正常的响应（通过状态码），最后可以处理服务器返回的数据了。返回的数据（文本形式）保存在XMLHttpRequest对象的responseText属性中。（如果服务器选择使用XML响应，则也可以使用在responseXML属性获取）

 

在本例中，服务器返回邮编相应的城市和省份，中间用逗号分开：

Tangshan,Hebei

 

 得到responseText并使用JavaScript的split()函数从逗号分开，得到的数组放到response中，然后更新表单中的相应值

 

连接web表单

最后使用JavaScript事件函数触发Ajax调用：

输入框的onblur属性指定的函数当焦点离开时触发，Ajax开始运行了。结果就会看到填完邮编后焦点移开时，表单的城市和省份信息突然更新了！

 

编写服务器端组件

服务器端使用JSP（当然可以使用Servlet）根据传递的邮编，返回相应的城市和省份：

 

 注意：JSP中除了JSP标签和Java代码不要出现任何HTML标签，也不要出现换行和空白字符，仅返回需要的响应结果，否则这些HTML标签和空白字符也会作为响应文本的一部分传递回客户端

 

Ajax应用的开发确实有些繁琐，实际上，现在有很多成熟稳定的Ajax工具葙封装了以上诸多细节，是的Ajax编程更加容易。但是如果不知道应用程序在做什么，就很难发现其中的问题

• XMLHttpRequest对象是Ajax应用的核心，必须非常熟悉

• Ajax应用的基本流程：

• 创建XMLHttpRequest对象

• 从Web表单中获取需要的数据

• 设置要连接的URL

• 建立到服务器的连接

• 设置服务器在完成后要运行的回调函数

• 发送请求

小编的微信

---

做笔记是一种积极的学习习惯，分享是一种积极的生活态度！

---