`

Ajax 入门Demo

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Ajax 入门简介 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">

<script language="javascript" type="text/javascript">
//将下面js代码贴到此位置 
</script>
 </HEAD>
 <BODY>
	<button onclick="callServer();">测试</button>
	<div id="show"></div>
 </BODY>
</HTML>

 

js代码:

var xmlHttp = false;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	
  } catch (e2) {
    xmlHttp = false;
  }
}

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

function callServer() {
  // Build the URL to connect to
  //var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
  var url="test.html";
  // 连接到服务url
  xmlHttp.open("GET", url, true);
  // 设置回调方法
  xmlHttp.onreadystatechange = updatePage;
  // Send the request
  xmlHttp.send(null);
}
//回调方法
function updatePage() {
	//如果解析已经完成
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("show").innerText = response;
  }
}

 

 readyState的五种状态

 

(0)未初始化
 此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在,否则浏览器会报错--对象不存在。
 
(1)载入
 此阶段对XMLHttpRequest对象进行初始化,即调用open()方法,根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
 
(2)载入完成
 此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据,并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
 
(3)交互
 此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式,为在客户端调用作好准备。状态3表示正在解析数据。
 
(4)完成
 此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。值为4表示数据解析完毕,可以通过XMLHttpRequest对象的相应属性取得数据。

分享到:
评论

相关推荐

    AJAX入门DEMO

    **AJAX入门DEMO** AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这个DEMO旨在为初学者提供一个基础的AJAX使用示例,帮助理解其工作原理。 ### AJAX的...

    java web ajax 入门Demo 百度 Google 搜索 提示 ajax 模糊查询

    **Ajax入门教程——基于Java Web实现百度/Google搜索提示功能** 在现代Web开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛应用于构建交互性更强的网页应用。它允许页面在不重新加载整个页面的情况下与...

    Ajax 入门demo

    **Ajax入门介绍** Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种创建动态网页的技术,允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。Ajax的核心是通过...

    ajax入门demo

    **Ajax 入门详解** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这种技术允许Web应用程序在后台与服务器进行数据交换,从而实现页面的局部刷新,提升...

    Ajax入门例子项目

    在这个"Ajax入门例子项目"中,我们将深入探讨Ajax的基础概念、工作原理以及如何创建简单的Ajax应用。 1. Ajax基础概念: - 异步:Ajax的主要特性是异步通信,意味着用户在请求发送后可以继续浏览网页,而无需等待...

    ajax demo[含一个完整例子 一个入门手册]

    提供的"ajax demo"应该包含一个简单的Ajax示例,这对于初学者来说非常有用。示例通常会涵盖创建XMLHttpRequest对象、发送请求、处理响应等基本操作。而"入门手册"则会详细介绍Ajax的概念、工作原理、使用方法以及...

    jquery 入门demo

    《jQuery入门Demo详解》 jQuery,作为一款广泛应用于前端开发的JavaScript库,以其简洁的API、强大的功能和广泛的浏览器兼容性赢得了开发者们的喜爱。对于初学者来说,掌握jQuery的基础知识和常见操作是步入Web开发...

    ajax+hibernate入门实例源码

    ajax+hibernate入门实例源码。测试方法: 一、先在mysql数据库中创建表并插入数据(脚本在压缩包中) 二、将WebRoot目录复制到tomcat的webapps中。 运行图: &lt;br&gt;

    Ajax相关的一些入门代码demo

    在本教程中,我们将深入探讨Ajax的基础知识,并通过一些入门代码示例来帮助你理解其工作原理。 1. **Ajax的核心组件** - **XMLHttpRequest对象**:Ajax的核心,用于在后台与服务器进行通信。JavaScript创建并控制...

    AjaxDemo欢迎新手下载

    AjaxDemo是一个非常适合新手学习Ajax技术的示例项目,通过这个项目,初学者可以快速理解和掌握Ajax的基本用法。 Ajax的核心是JavaScript的XMLHttpRequest对象,它允许浏览器向服务器发送请求并在后台处理响应。在...

    ajax入门 代码 和 经验

    **Ajax入门:代码与经验详解** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,大大提升了...

    Ajax简单入门

    Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况...在压缩包中的AjaxDemo可能包含了一些基本的Ajax使用示例,包括创建请求、处理响应等内容,可以进一步学习和理解Ajax的工作原理和应用。

    Dwr入门Demo

    这个"Dwr入门Demo"是为初学者准备的一个简单示例,旨在帮助理解DWR的基本概念和用法。 首先,让我们了解DWR的核心功能: 1. **反向AJAX(Reverse Ajax)**:DWR实现了服务器端Java方法与客户端JavaScript之间的...

    zk十分钟入门demo

    **ZK十分钟入门Demo详解** ZK是一款基于Java的开源用户界面框架,专注于提供富互联网应用程序(RIA)的开发体验。它将服务器端组件模型与客户端事件处理相结合,以简化Web应用的创建。本篇文章将深入讲解如何在...

    mvcpager分页demo(ajax)

    由于网上其他mvcpager使用教程讲的非常复杂难懂,自己看的时候云里雾里,...这是一个极简单的mvcpager分页(ajax)使用demo,非常适合菜鸟入门,入门之后,如果这个不能满足你的求知欲望可以去mvcpager官网看使用教程。

    jQuery入门demo【001】

    这个“jQuery入门demo【001】”将带你初次接触这个强大的工具,帮助你理解其基本用法和优势。 ### 1. jQuery核心概念 - **选择器**: jQuery的核心功能之一就是选择DOM元素。它支持CSS选择器,如`$("#id")`用于选取...

    SpringMVC新手入门Demo1_3

    - **Demo5 (Ajax请求)**:引入Ajax,展示如何在SpringMVC中处理异步请求,使用@ResponseBody返回JSON数据。 每个Demo都将涵盖SpringMVC的核心概念,帮助新手逐步建立起对SpringMVC的理解。在实践中,你可以结合IDE...

    Ajax简单入门使用

    在`AjaxDemo`这个例子中,可能包含了简单的Ajax示例代码,如向服务器发送一个请求并更新页面的一部分。可能的实现方式是创建一个按钮,点击后触发Ajax请求,然后将返回的结果展示在页面上的某个元素中。 ```html ()...

    dwr入门demo

    这个“dwr入门demo”是一个实例,可以帮助初学者理解并掌握DWR的基本用法。 DWR的核心功能在于它提供了一种方式,使得JavaScript可以直接调用服务器上的Java方法,就像调用本地函数一样,从而极大地增强了Web应用的...

    DWR入门demo

    在"DWR入门demo"中,我们可以学习到以下几个关键知识点: 1. **DWR的基本概念**:DWR的核心是提供了一个安全、高效的机制,通过AJAX(Asynchronous JavaScript and XML)技术实现在浏览器和服务器之间进行异步通信...

Global site tag (gtag.js) - Google Analytics