`
icyheart
  • 浏览: 775884 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

从一个简单的例子看ajax的执行过程

    博客分类:
  • AJAX
阅读更多

这个例子虽然简单,但是可以通过debug模式来仔细研究一下ajax在执行过程中的执行顺序,页面加载时会先去执行handleStateChange(),但是执行的时候不会进到方法内,当点击按钮执行到xmlHttp.onreadystatechange = handleStateChange;时,程序 不会去执行handleStateChange()这个方法,执行open后才会再次进入handleStateChange()这个方法,执行send后会再次进入handleStateChange()这个方法,这个时候xmlHttp.readyState会一直往后执行,一直到状态4为止,这时数据就返回了。每当 XMLHTTP 对象的状态发生改变时,handleStateChange() 函数就会执行。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Simple XMLHttpRequest</title>
        <script type="text/javascript">
            var xmlHttp;
            function createXMLHttpRequest(){
                if (window.ActiveXObject) {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                else 
                    if (window.XMLHttpRequest) {
                        xmlHttp = new XMLHttpRequest();
                    }
            }
            
            function startRequest(){
                createXMLHttpRequest();//创建XMLHttpRequest
                xmlHttp.onreadystatechange = handleStateChange;
                xmlHttp.open("GET", "simpleResponse.txt", true);
                xmlHttp.send(null);
            }
            
            function handleStateChange(){
                if (xmlHttp.readyState == 4) {
                    if (xmlHttp.status == 200) {
                        document.getElementById("test").innerHTML = xmlHttp.responseText;//返回simpleRespose.txt中的内容
                    }
                }
            }
        </script>
    </head>
    <body>
        <form action="#">
            <input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();"/>
            <div id="test">
            </div>
        </form>
    </body>
</html>

 

0
0
分享到:
评论

相关推荐

    很简单的一个AJAX例子

    这个"很简单的一个AJAX例子"的标题和描述表明,我们将会探讨一个基础的AJAX应用实例,它可能包含了一个简单的JavaScript代码示例,用于向服务器发送请求并接收响应,以实现页面的异步更新。 在Web开发中,AJAX的...

    一个简单的Ajax例子

    在这个"一个简单的Ajax例子"中,我们将深入探讨Ajax的核心概念、工作原理以及如何编写基本的Ajax代码。 1. **Ajax核心概念**: - **异步通信**:Ajax允许浏览器与服务器进行非阻塞通信,即用户在请求处理期间仍可...

    一个完整的ajax应用例子

    3. **反馈结果**:收到服务器响应后,根据返回的数据(例如,一个布尔值表示用户名是否可用),在页面上显示相应的提示信息。 **四、实现细节** 1. **创建XMLHttpRequest实例**:`var xhr = new XMLHttpRequest();`...

    简单ajax登陆例子,新手适用

    这个“简单ajax登录例子”是一个非常适合初学者理解Ajax基本原理和使用方法的教程。在这里,我们将深入探讨Ajax如何与Servlet结合,实现用户无刷新登录验证。 1. **Ajax简介** Ajax的核心是JavaScript异步通信,它...

    ajax一个最简单的例子

    本教程将通过一个最简单的Ajax例子,让你深入理解其工作原理和优势。 ### 1. Ajax基本概念 - **异步通信**:Ajax的核心是浏览器内置的`XMLHttpRequest`对象,它允许JavaScript向服务器发送异步HTTP请求,即在不...

    一个简单的Ajax实例

    在"一个简单的Ajax实例"中,我们将探讨如何创建一个基本的Ajax请求,以理解其工作原理。Ajax的核心是XMLHttpRequest对象,它允许JavaScript在后台与服务器进行通信。以下是一个简单的Ajax请求示例: ```javascript ...

    一个简单实现ajax的实例

    【标题】:“一个简单实现ajax的实例” Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现异步更新。这个...

    Ajax最简单的例子

    Ajax,全称Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。...通过这个简单的例子,我们可以理解Ajax的工作流程,并在此基础上扩展到更复杂的应用场景。

    自己写的最简单Ajax例子

    "AAJAX.rar"则可能是一个压缩包,包含了相关的JavaScript文件、CSS样式文件或者其他的资源,用于支持这两个Ajax例子的完整运行。 学习Ajax的过程中,初学者需要理解HTTP请求的工作原理,掌握JavaScript的基本语法,...

    ajax-类似google suggest 的一个简单例子

    **描述详解:** "ajax-类似google suggest 的一个简单例子 只有三个页面 js页-ajax asp页-功能实现 show页--显示页 要放在虚拟服务器上看 localhost中看" 这段描述说明了实现这个功能所需的三个关键文件和工作流程:...

    Ajax事例、Ajax实例、ajax应用

    本文将深入探讨Ajax的基本概念、工作原理、以及如何创建一个Ajax请求的完整流程。** ### 1. Ajax基本概念 - **异步通信**:Ajax的核心特性是异步,意味着用户在请求数据时,页面不会冻结,可以继续其他操作。 - **...

    简单的Ajax应用

    "Selfcheck"可能是实现这些功能的一个具体例子,可能是一个自检或自我验证的功能,利用Ajax技术检查用户输入或系统状态,而不会打断用户的正常流程。 总的来说,"简单的Ajax应用"涵盖了Web开发中的重要一环,即如何...

    Java端 ajax简单入门例子

    本教程将介绍一个简单的Java后端与Ajax结合的入门示例,帮助初学者理解这一技术的核心概念。 首先,Ajax的核心在于XMLHttpRequest对象,它是JavaScript内置的对象,用于在后台与服务器交换数据。在Java端,通常会...

    最简单的ajax html

    当用户触发一个Ajax请求时,JavaScript代码会创建一个新的XMLHttpRequest实例,然后设置请求的类型(GET或POST)、URL以及是否异步执行。接着,通过open()方法初始化请求,并用send()方法发送数据到服务器。服务器...

    ajaxDemo的例子

    "用个完整的例子教你理解Ajax原理及过程_小超的空间_百度空间.htm"可能是一个详细的教程,讲解了从创建XMLHttpRequest对象,到发送请求,再到处理服务器响应的全过程。这个教程可能包括了错误处理,比如检查HTTP状态...

    第一个Ajax例子

    这个"第一个Ajax例子"可能是一个简单的示例,用于演示如何使用Ajax进行页面的异步通信。Ajax的核心是利用JavaScript与服务器进行交互,通过XMLHttpRequest对象发送请求并接收响应数据,从而实现页面的动态更新。 ##...

    Ajax的一个小例子—类似google的搜索提示

    **Ajax技术详解** Ajax,全称为"Asynchronous JavaScript and ...这只是一个基础的示例,实际的Web应用可能会涉及更复杂的交互逻辑、错误处理和性能优化,但这个简单的例子已经足以启发我们去探索更高级的Ajax应用。

    Ajax DRW的简单例子 源码

    3. **AJAX调用流程**:理解一个典型的Ajax请求是如何从JavaScript发起,经过DWR转换,到Java方法执行,最后将结果返回给前端的过程。 4. **错误处理**:学习如何在JavaScript和Java端处理可能出现的错误,提供良好...

    ajax最简单的一个例子

    以下是一个简单的Ajax请求示例,用于从服务器获取数据: ```javascript // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 监听状态变化 xhr.onreadystatechange = function() { if (xhr.readyState...

Global site tag (gtag.js) - Google Analytics