AJAX、AJAX实例及AJAX源代码(asp)

AJAX介绍

AJAX 关键词:
javascript脚本和可扩展标记语言(XML)
WEB浏览器技术
开放式WEB标准
浏览器以及独立平台
更好更快的网络应用程序
XML以及HTTP请求

AJAX = 异步JavaScript和可扩展标记语言
AJAX是一种运用JavaScript和可扩展标记语言(XML),在网络浏览器和服务器之间传送或接受数据的技术。

AJAX是一种浏览器技术
AJAX是一种运用于浏览器中的技术。在浏览器和服务器之间,它使用异步数据进行转换,并允许网页向服务器索取少量信息而非整个网页。
这项技术标志着网络应用程序的微小化、迅捷化以及便捷化。
AJAX是一种不需依靠服务器软件而独立运做的浏览器技术。

AJAX是基于公共标准的
AJAX基于以下一些公共标准:
XML 可扩展标记语言
HTML 超文本标记语言
CSS 层叠样式表
运用于ALAX的公共标准被很好的定义并且得到一些主要的常用浏览器支持。ALAX应用程序是独立的浏览器和平台(交互平台,交互浏览器技术)。

AJAX事关更好的网络应用程序
网络应用程序比单机应用程序有更多的好处,它能符合更多用户的需求,更易安装且方便支持和扩展。
然而,网络应用程序并非总是像单机应用程序一样好使唤。
而运用AJAX,网络应用程序将变地更实用(更小、更快、更易于使用)。

今天就开始使用AJAX吧!
无需学习新的知识。
AJAX是基于公共标准的。这些标准已经被大多数开发人员使用多年。
大多数现存的网络应用程序可以用AJAX进行重新编写以取代传统的超文本标记语言方式。

AJAX使用可扩展语言和HTTP请求
传统的网络应用程序会将输入的信息提交给服务器(使用HTML表单)。在服务器通过代码后,将会把一个全新的完整的页面传送给用户。
由于用户每次提交输入信息的时候服务器都将传回一个新的页面,传统的网络应用程序通常运行缓慢且使用不便。
使用AJAX,网页应用程序能不经重新下载整个网页就发送并重新获得数据。这是通过发送HTTP请求和使用JS对网页进行部分修改来实现的。
联系服务器的较好的方式是发送像可扩展标记语言这样的数据(其他的方法也可以采用)。
你将在这篇引论的下一章节更多地了解到这一切是如何做到的。

AJAX实例

AJAX可以用来创建更多交互式的网络应用程序。

AJAX 实例
在以下的AJAX范例中,我们将了解到当用户以网页格式输入数据时一个网页是如何与网络服务器连接的。

在下面的框中输入姓名 *实际操作请前往W3Schools
First Name: 
Suggestions:

实例解析-超文本标记语言模式
以上的范例所含超文本标记语言代码如下:
<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">

</form><p>Suggestions: <span id="txtHint"></span></p>
就如你看到的,它只是一个普通的表单,里面有一称为"txt1"的输入框
下一段包括了一个称做“txtHint”的SPAN。这个SPAN是用来存储从服务器重新获得的信息的。
当用户输入数据,名为“showHint()”的函数将被执行。这个函数的执行是由“onkeyup”事件触发的。换种说法:每当用户在txt1区域内触动键盘按钮,showHint的功能就被执行。

实例解析- showHint()函数
showHint()函数是一种位于HTML顶端的简单的JS函数。
函数包含以下代码:
function showHint(str)
{
if (str.length > 0)
{
var url="gethint.asp?sid="+Math.random()+"&q="+str
xmlHttp=GetXmlHttpObject(stateChanged)
xmlHttp.open("GET", url , true)
xmlHttp.send(null)
}
else
{
document.getElementById("txtHint").innerHTML=""
}
}
每当有字符被键入输入区内就会执行这个函数
如有字符被输入文字输入区(str.length>0)函数就执行:

建立一个XMLHTTP对象
发送一个HTTP请求到服务器上的"gethint.asp"上
当HTTP触发一次变动则XMLHTTP对象就会执行stateChanged()函数

实例解析 - stateChanged()函数
stateChanged()函数包含以下代码:
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
每当XMLHTTP对象的状态发生改变stateChanged()函数就会被执行
当状态改变为4(或为"完成"),txtHint span里就会显示反馈的文字

AJAX源代码

AJAX 实例 - AJAX 源码
下面的源代码是前一个页面的。你可以将它复制并粘贴,自己来尝试。

AJAX HTML页面
这是一个HTML网页。它包括了一个简单的HTML表单和关联JS的link
<html>
<head>
<script src="clienthint.js"></script>
</head><body><form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form><p>Suggestions: <span id="txtHint"></span></p> </body>
</html>The JavaScript code is listed below.
JS代码在下面

AJAX 的 JS
这是JS代码,被保存在"clienthint.js"文件中
var xmlHttp
function showHint(str)
{
if (str.length > 0)
{
var url="gethint.asp?sid=" + Math.random() + "&q=" + str
xmlHttp=GetXmlHttpObject(stateChanged)
xmlHttp.open("GET", url , true)
xmlHttp.send(null)
}
else
{
document.getElementById("txtHint").innerHTML=""

时间: 2025-01-30 12:43:55

AJAX、AJAX实例及AJAX源代码(asp)的相关文章

Jquery Ajax学习实例7 Ajax所有过程事件分析示例_jquery

一.Ajax所有过程事件分析    JQuery在执行Ajax的过程中会触发很多事件.   这些事件可以分为两种事件,一种是局部事件(Local),一种是全局事件(Global).   局部事件:可以通过$.ajax来调用,你某一个Ajax请求不希望产生全局的事件,则可以设置global:false.   全局事件:跟click等事件类似,可以绑定到到每一个DOM元素上.   这些事件的按照事件的触发顺序如下介绍:   局部事件(Local) 全局事件(Global) ajaxStart 全局事

jQuery+json实现的简易Ajax调用实例_jquery

本文实例讲述了jQuery+json实现的简易Ajax调用.分享给大家供大家参考,具体如下: Userservlet.java代码: package com.iss.servlet; import org.json.JSONException; import org.json.JSONObject; import com.iss.pojo.User; import com.iss.util.JSONUtil; public class UserServlet extends HttpServle

jquery ajax 应用实例代码

jquery ajax 应用实例代码 /*  ajax 向页面发送数据                 $.post('save.cgi', {     text: 'my string',     number: 23 }, function() {     alert('your data has been saved.'); });   如果您确实需要编写一些复杂的 ajax 脚本,那么需要用到 $.ajax() 函数.您可以指定 xml.script.html 或者 json,jquer

jQuery DataTables插件自定义Ajax分页实例解析_jquery

一.问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数据条数(pageSize),显示相应页的显示记录,且不能修改后端接口. 二.分析 先来分析下分页实现.一是后端分页:这种情况下,在后端很容易实现,在官网上有示例,不多说明.二是前端分页:前端分页也是支持的,不过需要一次把所有数据都获取到才可以. 看到这里,问题来了.由于后端在目前的情况下是更改不了,

jQuery Ajax 实例代码 ($.ajax、$.post、$.get)_jquery

$.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType }); 二.$.ajax的参数描述 参数 描述 url 必需.规定把请求发送到哪个 URL. data 可选.映射或字符串值.规定连同请求发送到服务器的数据. success(data, textS

js实现简单实用的AJAX完整实例_AJAX相关

本文实例讲述了js实现简单实用的AJAX的方法.分享给大家供大家参考,具体如下: //版权归属 WUJXPING //ajax 1.2 //更新2012-2-20 //1.异步数据加载可以进行加载方式get,post的设定 //2.异步同步模式的属性设定 //3.数据加载自动超时设置 //4.***数据加载事件的添加,通过事件可以进行服务器数据的实时处理 //5.增加回调函数中用户自定义参数this.e //6.增加ajax反复提交控制,只需将ajax对象定义为全局变量,每次提交都会进行等待上次

PHP and AJAX responseXML 实例教程

PHP and AJAX responseXML 实例教程 AJAX技术可以用来恢复的数据库信息为XML . AJAX的数据库为XML的例子 在AJAX以下例子,我们将演示如何网页上可以卖到信息从一个MySQL数据库,它转换为一个XML文档,并用它来显示信息在几个不同的地方. 这个例子我似乎很像" PHP的AJAX技术数据库"例如,在最后一章,但是有一个很大的不同:在这个例子中我们得到的数据从PHP的XML网页使用responseXML功能. 接收的响应作为XML文件使我们能够更新这个

AJAX、AJAX实例及AJAX源代码(asp)

ajax|源代码 AJAX介绍 AJAX 关键词: javascript脚本和可扩展标记语言(XML) WEB浏览器技术 开放式WEB标准 浏览器以及独立平台 更好更快的网络应用程序 XML以及HTTP请求 AJAX = 异步JavaScript和可扩展标记语言 AJAX是一种运用JavaScript和可扩展标记语言(XML),在网络浏览器和服务器之间传送或接受数据的技术. AJAX是一种浏览器技术 AJAX是一种运用于浏览器中的技术.在浏览器和服务器之间,它使用异步数据进行转换,并允许网页向服

AJAX教程实例,ASP+AJAX+ACCESS数据库应用教程(附源码)

access|asp+|数据|数据库|ajax教程 AJAX教程实例[阿里西西原创]  其实说起AJAX的初级应用是非常简单的,通俗的说就是客户端(javascript)与服务端(asp或php等)脚本语言的数据交互. 看完本篇ajax实例教程,我相信你也可以轻松做出一个初级的AJAX应用. 你也可以直接访问:http://www.alixixi.com/web/web/ajax/jiaocheng.html预览此篇ajax教程的源码示例. 好,下面我们就始一步步让你了解AJAX+ASP基础应用