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

Ajax与页面动态请求基础

 
阅读更多

AJAX即“Asynchronous JavaScript and XML”(异步JavaScript和XML),AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词,是指一种创建交互式网页应用的网页开发技术。

 Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。

下面是一个例子,使用Ajax页面不提交表单就可以通过javascript访问服务器来交换数据,并在不刷新页面的情况下修改页面内容:

demo.teml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=gb2312">
		<title>ajax Test</title>
		<script type="text/javascript">
			var xmlHttp = null;		//声明XMLHttpRequest对象

			function GetXmlHttpObject() {	//该函数用于创建XMLHttpRequest对象
				var xmlHttp = null;
				try {
					// Firefox, Opera 8.0+, Safari
					xmlHttp = new XMLHttpRequest();
				} catch (e) {
					// Internet Explorer
					try {
						xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
					} catch (e) {
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
					}
				}
				return xmlHttp;
			}

			function showCustomer(str) {		//该函数由按钮的onclick事件调用
				xmlHttp = GetXmlHttpObject();		//每次执行时要先创建XMLHttpRequest对象
				if (xmlHttp == null) {
					alert("您的浏览器不支持AJAX!");
					return;
				}
				var url = "test.php?q=" + str + "&sid=" + Math.random();	//加入随机数种子防止缓存影响下次请求结果
				xmlHttp.onreadystatechange = stateChanged;		//设置回调函数;即准备状态改变时执行代码
				xmlHttp.open("GET", url, true);		//url参数格式 'test.php?key=value&key1=value1'
				xmlHttp.send(null);		//传递参数格式 ‘key=value&key1=value1’
			}

			function stateChanged() {		//回调函数,浏览器自动调用
				if (xmlHttp.readyState == 4) {
					if (xmlHttp.status == 200) {	//访问服务器成功
						var result = xmlHttp.responseText;
						var info = document.getElementById('info');
						info.innerHTML = result;	//动态修改页面
					}
				}
			}

		</script>
	</head>
	<body>
		<input type="text" name="" id="input1">
		<input type="button" value="按钮" onclick="showCustomer(input1.value)">
		<div id="info">
			Hello
		</div>
	</body>
</html>

 

 

test.php

 

 

 

<?php
//php通过$_GET数组访问ajax提交过来的表单信息,通过echo输出返回信息
echo('time:' . date("G:i:s") . '<br>q:' . $_GET['q'] . '<br>sid:' . $_GET['sid']);
?>

 

效果:


这就是最简单Ajax实例
 

  • 大小: 3 KB
分享到:
评论

相关推荐

    html通过 ajax jsonp跨域请求接收和传送数据

    它利用JavaScript创建异步HTTP请求,使得网页可以与服务器进行通信,从而实现数据的动态加载和更新。 **JSONP** JSONP(JSON with Padding)是一种解决跨域问题的非标准方法,主要用于JSON数据的获取。JSON是一种轻...

    ajax获取单独页面

    - `external3.htm`, `external2.htm`, `external4.htm`, `external.htm`:这些可能是通过Ajax请求获取的外部页面,它们的内容可能会被动态加载到主页面的某个部分。 - `ajaxtabs`:这可能是一个包含 `ajaxtab` 插件...

    AJax与PHP基础教程.

    了解如何通过JavaScript与服务器进行交互,实现页面内容的动态加载,提升用户体验。 **第二章 - JavaScript与Ajax** 这一章深入讲解JavaScript在Ajax中的角色。将学习如何使用JavaScript创建和发送Ajax请求,处理...

    如何在Thymeleaf中实现ajax请求url的可靠构造

    Thymeleaf是一个强大的服务器端模板引擎,它可以与Ajax结合使用,提供动态更新页面的能力,而无需刷新整个页面。下面将详细介绍如何在Thymeleaf中实现Ajax请求URL的构造。 首先,理解基础概念: - **Thymeleaf**:...

    《Ajax与PHP基础教程》

    XMLHttpRequest是Ajax的基础,用于在后台与服务器进行通信。JavaScript处理用户的交互和动态更新页面内容。DOM是HTML或XML文档的结构表示,允许程序和脚本动态更新、添加、删除和改变元素。CSS则用于控制网页的样式...

    ajax页面交互

    **Ajax 页面交互** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这种技术使得用户界面更加响应式,提升了网页应用的用户体验。Ajax 不是单一的技术,而是...

    ajax实现页面内部模块更新

    **Ajax 实现页面内部模块...总之,通过Ajax技术,我们可以实现页面内部模块的动态更新,提升用户体验。结合ASP或其他服务器端技术,可以构建出高效、互动的Web应用程序。学习和掌握Ajax是每个Web开发者必备的技能之一。

    Ajax技术实现动态获取数据的树状菜单

    在本示例中,"Ajax技术实现动态获取数据的树状菜单"是一个具体的实践应用,主要目标是创建一个动态加载数据的树状菜单,用户可以在不刷新页面的情况下查看和操作数据。 首先,我们来了解树状菜单的基本概念。树状...

    Ajax异步请求分页

    Ajax的核心是通过JavaScript与服务器进行异步通信,获取数据并局部更新页面,而无需重新加载整个页面。在本话题中,我们将深入探讨如何利用Ajax实现分页功能,以及涉及到的相关技术。 **一、Ajax基础** Ajax不是一...

    平台java前端ajax,json请求

    AJAX**:AJAX 是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。通过在后台与服务器交换数据并局部更新页面,用户可以得到更快速、响应更快的交互体验。在JavaScript中,XMLHttpRequest对象是实现AJAX的...

    ajax 注册页面代码

    综上所述,"Ajax注册页面代码"涵盖了前端与后端的交互,涉及到JavaScript基础、HTTP协议、JSON数据格式、前端表单处理、错误处理以及可能的前端框架应用等多个方面的知识。通过学习和实践这些知识点,你可以构建一个...

    Ajax异步请求简单示例

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

    ajax跨域请求WebService.asmx

    Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在这个场景中,我们使用Ajax进行跨域请求,即从一个源(Origin)向另一个不同的源(例如,不同域名...

    ajax实现的动态树菜单

    在本案例中,"真正的使用ajax动态交互的动态树"意味着当用户展开或点击一个树节点时,相关数据将通过Ajax请求从服务器获取,而不是在页面加载时一次性加载所有数据。 动态树菜单的实现通常包括以下步骤: 1. **...

    Ajax页面载入等待特效

    本项目提供了一套完整的Ajax页面载入等待特效解决方案,包括演示、调用方法以及实际效果展示。 首先,我们来理解Ajax的工作原理。当用户触发一个Ajax请求时,JavaScript代码会创建一个新的XMLHttpRequest对象,通过...

    ajax请求,asp的实例

    ### AJAX 请求与 ASP 实例详解 #### 一、引言 在现代Web开发中,异步JavaScript和XML(Ajax)技术被广泛应用于实现无刷新页面更新。通过Ajax,客户端能够与服务器进行数据交换而不必重新加载整个网页。本文将详细...

    Ajax与PHP基础教程.pdf(清晰)

    当用户与网页互动时,Ajax会发送请求到服务器,并在服务器返回数据后更新页面的某一部分,而不是刷新整个页面。 #### 二、从CGI到Flash再到DHTML - **CGI的历史地位**:Common Gateway Interface(CGI)是早期的一...

    ajax请求例子

    ### AJAX请求基础知识与示例解析 #### 一、AJAX技术概述 AJAX(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着...

    extjs ajax同步请求所需js

    在提供的压缩包文件中,`ext-basex.js`可能是ExtJS库的一个组成部分,包含了对Ajax请求等基础功能的支持。这个文件可能包含了实现同步请求的必要代码,但具体使用时还需要结合其他组件和配置。 总的来说,虽然同步...

Global site tag (gtag.js) - Google Analytics