×

ajax 实例

ajax究竟是怎么回事?请问ajax的应用有哪些…最好举个例子,还有用这种技术的好处是什么

admin admin 发表于2022-05-25 23:36:13 浏览99 评论0

抢沙发发表评论

ajax究竟是怎么回事


ajax AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

主要包含了以下几种技术

Ajax(Asynchronous JavaScript + XML)的定义

基于web标准(standards-based presentation)XHTML+CSS的表示;

使用 DOM(Document Object Model)进行动态显示及交互;

使用 XML 和 XSLT 进行数据交换及相关操作;

使用 XMLHttpRequest 进行异步数据查询、检索;

使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文。

类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。

AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。

与传统的web应用比较

传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然后返回一个新的网页。这个做法浪费了许多带宽,因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快 的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。

Ajax应用程序的优势在于:

1. 通过异步模式,提升了用户体验

2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用

3. Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。

Ajax的工作原理

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

在创建Web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能:

动态更新购物车的物品总数,无需用户单击Update并等待服务器重新发送整个页面。

提升站点的性能,这是通过减少从服务器下载的数据量而实现的。例如,在某购物车页面,当更新篮子中的一项物品的数量时,会重新载入整个页面,这必须下载整 个页面的数据。如果使用Ajax计算新的总量,服务器只会返回新的总量值,因此所需的带宽仅为原来的百分之一。 消除了每次用户输入时的页面刷新。例如,在Ajax中,如果用户在分页列表上单击Next,则服务器数据只刷新列表而不是整个页面。
直接编辑表格数据,而不是要求用户导航到新的页面来编辑数据。对于Ajax,当用户单击Edit时,可以将静态表格刷新为内容可编辑的表格。用户单击Done之后,就可以发出一个Ajax请求来更新服务器,并刷新表格,使其包含静态、只读的数据。

一切皆有可能!但愿它能够激发您开始开发自己的基于Ajax的站点。然而,在开始之前,让我们介绍一个现有的Web站点,它遵循传统的提交/等待/重新显示的范例,我们还将讨论Ajax如何提升用户体验。

Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。

我们以两个验证通行证帐号是否存在的例子来讲述AJAX在实际中的应用:

(1)用文本字符串的方式返回服务器的响应来验证网易通行证帐号是否存在;

(2)以XMLDocument对象方式返回响应来验证金山通行证帐号是否存在;

首先,我们需要用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求, XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入,被称为XMLHTTP。 后来Mozilla、Netscape、Safari 和其他浏览器也提供了XMLHttpRequest类,不过它们创建XMLHttpRequest类的方法不同。

对于Internet Explorer浏览器,创建XMLHttpRequest 方法如下:

xml

请问ajax的应用有哪些…最好举个例子,还有用这种技术的好处是什么


现在最热门的微博系统就是大量运用的ajax的.
你会发现你的微博会无刷新提示最新信息,会无刷新更新最新微博,这些都是ajax.
还有一个应用比较广泛的是gmail和163的邮箱.在新邮件到达的时候会提示,这也是ajax的应用.
还有就是谷歌和=百度输入框的下拉提示也是ajax的一种应用.
ajax可以使在很友好的,无打断用户状态的情况下更新服务器信息,这是未来客户体验度的一种很重要的步骤.

jQuery中ajax - get() 方法实例详解


在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax
-
get()
方法,具体介绍请看下文。
jQuery
Ajax
参考手册
实例
使用
AJAX

GET
请求来改变
div
元素的文本:
$(“button“).click(function(){
$.get(“demo_ajax_load.txt“,
function(result){
$(“div“).html(result);
});
});
亲自试一试
定义和用法
get()
方法通过远程
HTTP
GET
请求载入信息。
这是一个简单的
GET
请求功能以取代复杂
$.ajax
。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用
$.ajax。
语法
$(selector).get(url,data,success(response,status,xhr),dataType)

详细说明
该函数是简写的
Ajax
函数,等价于:
$.ajax({
url:
url,
data:
data,
success:
success,
dataType:
dataType
});
根据响应的不同的
MIME
类型,传递给
success
回调函数的返回数据也有所不同,这些数据可以是
XML
root
元素、文本字符串、JavaScript
文件或者
JSON
对象。也可向
success
回调函数传递响应的文本状态。
对于
jQuery
1.4,也可以向
success
回调函数传递
XMLHttpRequest
对象。
示例
请求
test.php
网页,忽略返回值:
$.get(“test.php“);
更多示例
例子
1
请求
test.php
网页,传送2个参数,忽略返回值:
$.get(“test.php“,
{
name:
“John“,
time:
“2pm“
}
);
例子
2
显示
test.php
返回值(HTML

XML,取决于返回值):
$.get(“test.php“,
function(data){
alert(“Data
Loaded:

+
data);
});
例子
3
显示
test.cgi
返回值(HTML

XML,取决于返回值),添加一组请求参数:
$.get(“test.cgi“,
{
name:
“John“,
time:
“2pm“
},
function(data){
alert(“Data
Loaded:

+
data);
});
jquery
ajax

$.get()用法详解
js文件
$(document).ready(function(){
$(“form“).submit(function(event)
{event.preventDefault()})//取消submit的默认行为
$(“form
input[type=’submit’]“).click(function(){
var
url
=
$(’form’).attr(’action’);
//
取Form中要提交的链接
var
param
=
{};
//
组装发送参数
param[’name’]
=
$(’form
input[name=name]’).val();
param[’age’]
=
$(’form
input[name=age]’).val();
$.get(url,
param,
function(dom)
{
$(’div.get’).append(dom)
})
;
//
发送并显示返回内容
});
})
html文件
《form
action=“ajax.php“
method=“get“》
Name:
《input
type=“text“
name=“name“
/》
Age:
《input
type=“text“
name=“age“
/》
《input
type=“submit“
/》
《/form》
《div
class=“get“》这是ajax的get方法《/div》
php文件
error_reporting(0);
if($_GET[“name“]==“kitty“)
{
$name=
“you
are
the
lucky“;
}
else
$name=$_GET[“name“];
$age=$_GET[“age“];
echo
“《div》
“.$name.“
“.$age.“《/div》“;
以上介绍就是本文给大家分享的jQuery中ajax
-
get()
方法实例详解,希望大家喜欢。
-ajax 实例