`
dongyangluo
  • 浏览: 12418 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Ajax入门二之 使用 JavaScript 和 Ajax 发出异步请求

    博客分类:
  • AJAX
阅读更多
一、XMLHttpRequest 简介
该对象的很少的几个 方法和属性:
    *  open():建立到服务器的新请求。
    * send():向服务器发送请求。
    * abort():退出当前请求。
    * readyState:提供当前 HTML 的就绪状态。
    * responseText:服务器返回的请求响应文本。
注意:
二、 创建具有错误处理能力的 XMLHttpRequest:
<script language="javascript" type="text/javascript">
var request = false;
try {
  request = new XMLHttpRequest();
} catch (trymicrosoft) {
  try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
    try {
      request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (failed) {
      request = false;
    }
  }
}
if (!request)
  alert("Error initializing XMLHttpRequest!");
</script>


很容易被这些花括号迷住了眼睛,因此下面分别介绍每一步:

   1. 创建一个新变量 request 并赋值 false。使用 false 作为判断条件,它表示还没有创建 XMLHttpRequest 对象。
   2. 增加 try/catch 块:
         1. 尝试创建 XMLHttpRequest 对象。
         2. 如果失败(catch (trymicrosoft)):
               1. 尝试使用较新版本的 Microsoft 浏览器创建 Microsoft 兼容的对象(Msxml2.XMLHTTP)。
               2. 如果失败(catch (othermicrosoft))尝试使用较老版本的 Microsoft 浏览器创建 Microsoft 兼容的对象(Microsoft.XMLHTTP)。
         3. 如果失败(catch (failed))则保证 request 的值仍然为 false。
   3. 检查 request 是否仍然为 false(如果一切顺利就不会是 false)。
   4. 如果出现问题(request 是 false)则使用 JavaScript 警告通知用户出现了问题。

三、用 XMLHttpRequest 发送请求
Ajax 采用一种沙箱安全模型。因此,Ajax 代码(具体来说就是 XMLHttpRequest 对象)只能对所在的同一个域发送请求。

注意:以前没用见过 escape() 方法,它用于转义不能用明文正确发送的任何字符。

1、XMLHttpRequest 对象的 open() 方法:

    *  request-type:发送请求的类型。典型的值是 GET 或 POST,但也可以发送 HEAD 请求。
    * url:要连接的 URL。
    * asynch:如果希望使用异步连接则为 true,否则为 false。该参数是可选的,默认为 true。
    * username:如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值。
    * password:如果需要身份验证,则可以在此指定口令。该可选参数没有默认值。
2、send 介绍:
  虽然可以使用 send() 发送数据,但也能通过 URL 本身发送数据。事实上,GET 请求(在典型的 Ajax 应用中大约占 80%)中,用 URL 发送数据要容易得多。如果需要发送安全信息或 XML,可能要考虑使用 send() 发送内容(本系列的后续文章中将讨论安全数据和 XML 消息)。如果不需要通过 send() 传递数据,则只要传递 null 作为该方法的参数即可。



3、指定回调方法


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

    * 0:请求没有发出(在调用 open() 之前)。
    * 1:请求已经建立但还没有发出(调用 send() 之前)。
    * 2:请求已经发出正在处理之中(这里通常可以从响应得到内容头部)。
    * 3:请求已经处理,响应中通常有部分数据可用,但是服务器还没有完成响应。
    * 4:响应已完成,可以访问服务器响应并使用它。

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

  HTTP 状态码:
  还需要检查 HTTP 状态。我们期望的状态码是 200,它表示一切顺利。如果就绪状态是 4 而且状态码是 200,就可以处理服务器的数据了,而且这些数据应该就是要求的数据。
if (request.readyState == 4)
       if (request.status == 200)
         alert("Server is done!");
       else if (request.status == 404)
         alert("Request URL does not exist");
       else
         alert("Error: status code is " + request.status);





分享到:
评论

相关推荐

    掌握 Ajax第 2 部分-使用 JavaScript 和 Ajax 发出异步请求

    ### 掌握Ajax第二部分:使用JavaScript和Ajax发出异步请求 #### XMLHttpRequest对象与Web2.0 在探讨Ajax和JavaScript如何发出异步请求之前,我们先简要回顾一下Web2.0的概念及其与传统Web1.0的区别。Web1.0时代,...

    使用JavaScript和Ajax 发出异步请求

    在本文中,我们将深入探讨如何使用JavaScript和Ajax发出异步请求,以及它们背后的工作原理。 首先,JavaScript是一种广泛应用于客户端的脚本语言,它允许在用户与网页交互时动态更新内容。在传统的HTTP请求中,页面...

    掌握Ajax系列2:使用JavaScript和Ajax发出异步请求

    【Ajax系列2:使用JavaScript和Ajax发出异步请求】 在Web开发中,传统的请求/响应模型通常是用户点击按钮,浏览器发送整个页面请求给服务器,服务器处理后返回一个新的HTML页面,浏览器再重新渲染。这种模式在Web ...

    jQuery-ajax-用户名异步请求

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互。本主题聚焦于jQuery中的Ajax功能,特别是如何利用它进行异步用户名验证。Ajax,即Asynchronous JavaScript and ...

    Ajax异步请求

    Ajax异步请求是一种基于JavaScript和XMLHttpRequest对象的技术,允许Web应用程序在不刷新整个页面的情况下,更新页面的一部分内容。它可以实现异步通信,提高用户体验和页面加载速度。 在Ajax异步请求中,...

    Ajax异步请求的验证

    本篇文章将深入探讨Ajax异步请求的验证,解决初级问题,为初学者提供参考。 一、Ajax的基本概念 Ajax并非一种单一的技术,而是一种利用现有Web技术(如JavaScript、XML、HTML、CSS等)组合成的新应用方式。它的...

    ajax异步请求小结

    **Ajax异步请求小结** Ajax(Asynchronous JavaScript and XML)是一种用于创建快速、动态网页的技术,它允许在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。这种技术极大地提升了用户体验,...

    springmvc异步ajax请求

    当使用Ajax请求时,需要注意防止跨站脚本攻击(XSS)和跨站请求伪造(CSRF)。确保对输入进行验证和过滤,并使用CSRF令牌来保护敏感操作。 8. **调试和测试** 调试Ajax请求通常涉及检查浏览器的开发者工具,查看...

    Ajax异步请求分页

    综上所述,Ajax异步请求分页是提高Web应用性能和用户体验的重要手段,结合C#的服务器处理能力,能够构建出高效且用户友好的分页系统。在实际开发中,需要根据项目需求灵活运用各种技术和策略,确保系统的稳定性和可...

    使用AJAX发送异步请求

    在本文中,我们将深入探讨如何使用AJAX发送异步请求,并详细解析XMLHttpRequest对象。 首先,让我们了解XMLHttpRequest对象。这个对象是AJAX的基础,它允许JavaScript在后台与服务器进行交互,而不会打断用户的界面...

    Ajax异步请求简单示例

    总的来说,Ajax异步请求能够实现不刷新整个页面的情况下与服务器通信,提高用户体验。通过JavaScript和Java的配合,我们可以构建动态、高效的Web应用。这个示例提供了一个基础的Ajax请求流程,实际应用中,可能需要...

    一个实用了spring mvc和ajax异步请求的例子

    总结起来,这个"一个实用了spring mvc和ajax异步请求的例子"涵盖了Web开发中的重要概念,包括Spring MVC的Controller设计、RESTful API的实现以及Ajax的异步数据交互。这样的组合使得Web应用更加动态,用户体验更佳...

    《ajax入门经典》源代码

    1. **Ajax基础**:讲解Ajax的基本概念,包括异步通信的工作原理、XMLHttpRequest对象的使用以及简单的Ajax请求示例。 2. **JavaScript和DOM**:介绍JavaScript的基础知识,以及如何通过DOM(Document Object Model...

    JavaScript语言与Ajax应用第二版_JavaScript语言与Ajax应用_JavaScript应用_javascri

    8. **错误处理与调试**:学习如何有效地处理JavaScript和Ajax请求中的错误,以及使用浏览器的开发者工具进行调试,是提升开发效率和代码质量的重要环节。 9. **jQuery与Ajax**:jQuery是一个流行的JavaScript库,...

    AJAX-技术入门介绍.zip_ajax_异步请求

    jQuery是一个广泛使用的JavaScript库,它封装了AJAX操作,使得异步请求更加简单易用。例如,使用`$.ajax()`或`$.get()`, `$.post()`等方法,可以快速地发起AJAX请求。 ### 6. 实战应用 在实际开发中,AJAX常用于...

    ajax .net 异步请求方式

    综上所述,.NET为开发者提供了丰富的工具和方法来实现AJAX异步请求,无论是在传统的ASP.NET Web Forms、MVC,还是现代的Web API和Blazor框架中,都能找到合适的方式实现高效、无刷新的交互体验。在实际项目中,...

    Java通过jQuery实现ajax异步请求

    综上所述,"Java通过jQuery实现ajax异步请求"的示例工程涵盖了客户端与服务器端的交互流程,包括使用jQuery发起AJAX请求、Java后端处理请求并返回数据,以及数据格式的转换和错误处理。了解并掌握这些知识点,对于...

Global site tag (gtag.js) - Google Analytics