ajax网站开发（ajax项目）

本文目录一览：

• 1、如何使用ajax开发web应用程序
• 2、AJAX是什么？
• 3、网页开发中使用ajax json 有什么特别的好处吗
• 4、AJAX技术是什么，和JS有什么区别？
• 5、怎样将Ajax用于网站开发？
• 6、AJAX的主要用途是什么?

如何使用ajax开发web应用程序

一、简介

AJAX，一个异步JavaScript和XML的缩略词，是最近出来的技术词语。异步意味着你可以经由超文本传输协议(HTTP)向一个服务器发出请求并且在等待该响应时继续处理另外的数据。这就意味着，例如，你可以调用一个服务器端脚本来从一个数据库中以XML方式检索数据，把数据发送到存储在一个数据库的服务器脚本，或者简单地装载一个XML文件以填充你的Web站点而不需刷新该页面。然而，在这项新技术提供巨大能力的同时，它也引起了在"Back"按钮问题上的很多争论。本文将帮助你确定在真实世界中何时使用AJAX是最佳选择。

首先，我假定你对缩略词JavaScript和XML部分有一个基本了解。尽管你能通过AJAX请求任何类型的文本文件，但是我在此主要集中讨论XML。我将解释怎样在真实世界中使用AJAX以及怎样在一个工程中评估它的价值。在你读完本文后，你将会明白什么是AJAX，在什么情况下，为什么以及怎样使用这项技术。你将要学习，在保持给用户提供直观体验的同时怎样创建对象，发出请求以及定制响应。

我已创建了一个适合于本文的示例工程(你可以下载源代码)。这个示例实现了一个简单的请求-它装载一个包含页面内容的XML文件并且分析数据以把它显示在一个HTML页面中。

二、常规属性和方法

表1和2提供了一个属性和方法的概述- 它们为Windows Internet Explorer 5，Mozilla，Netscape 7，Safari 1.2，和Opera等浏览器所支持。

表1属性

属性 描述

onreadystatechange 当请求对象变化时该事件处理器激活。

readyState 返回指示对象的当前状态的值。

responseText 来自服务器的响应串的版本 。

responseXML 来自服务器的响应的DOM兼容的文档对象。

status 来自服务器的响应的 状态码。

statusText 以一个字符串形式返回的状态消息。

表2方法

方法 描述

Abort() 取消当前HTTP请求。

getAllResponseHeaders() 检索所有的HTTP头值。

getResponseHeader("headerLabel") 从响应体中检索一个HTTP头部的值。

open("method","URL"[,asyncFlag[,"userName" [,"password"]) 初始化一个MSXML2.XMLHTTP请求，并从该请求指定方法，URL和认证信息 。

send(content) 发送一个HTTP请求到服务器并接收响应。

setRequestHeader ("label", "value") 指定一个HTTP头的名字。

三、从哪里开始

首先，你需要创建XML文件-后面我们对之进行请求并作为页面内容进行分析。你正在请求的文件必须与 目标工程驻留在相同的服务器上。

下一步，创建发出请求的HTML文件。当页面通过使用页面主体 中的onload方法进行加载时，该请求发生。接着，该文件需要一个有ID的div标签，这样当我们准备好要 显示内容时就可以对之进行定位。当你做完所有这些，你的页面的主体上去，如下：

＜body onload="makeRequest('xml/content.xml'); "＞

＜div id="copy"＞＜/div＞

＜/body＞

四、创建请求对象

为了创建请求对 象，你必须检查是否浏览器使用XMLHttpRequest或ActiveXObject。这两个对象之间的主要区别在于使用 它们的浏览器。Windows IE 5 及以上版本使用ActiveX对象; 而Mozilla，Netscape 7，Opera和Safari 1.2及以上版本使用XMLHttpRequest对象。另外一个区别是你创建对象的方式：Opera，Mozilla， Netscape和Safari允许你简单地调用该对象的构造器，但是Windows IE需要把对象的名字传递到ActiveX 构造器中。下面是怎样创建代码来决定要使用哪个对象和怎样创建它的示例：

if (window.XMLHttpRequest)

{ request = new XMLHttpRequest(); }

else if (window.ActiveXObject)

{ request = new ActiveXObject("MSXML2.XMLHTTP"); }

五、发出请求

现在既然你已经创建了你的请求对象，那么你已经为向服务器发 出请求作了准备。创建一个到事件处理器的参考以听取onreadystatechange事件。然后，该事件处理器 方法将在状态发生变化时作出响应。一旦我们完成请求，我们就开始创建这个方法。打开连接以GET或 POST一个定制的URL-在此是一个content. xml，并且设置一个布尔定义-是否你想要进行异步调用。

现在到了发出请求的时间了。在这个示例中，我使用了null，因为我们使用的是GET; 为了使用 POST，你需要使用下面这个方法发出一个查询串：

request.onreadystatechange = onResponse;

request.open("GET". url, true);

request.send (null);

六、定制加载和错误处理消息

你为onreadystatechange方法创建的事件处理器 正是集中进行加载和处理错误的场所。现在到了考虑用户并针对他们与之交互的内容的状态提供反馈的 时候了。在这个实例中，我针对所有的装载状态代码提供反馈，并且也对最经常发生的错误处理状态代 码提供一些基本的反馈。为了显示请求对象的当前状态，readyState属性包括显示在下表中的一些值。

值 描述

0 未初始化，对象没有用数据进行初始化。

1 装载中，对象正在装载它 的数据。

2 装载结束，对象完成了它的数据的装载。

3 可交互，用户能与对象交互了， 尽管它还没有装载结束。

4 完成，对象已经完全被初始化。

W3C中有很长的一串有关HTTP 状态代码的定义。我选择了两个状态代码:

200:请求成功了。

404:服务器没有找到与所 请求的文件相匹配的任何东西。

最后，我检查任何另外的状况代码-它们将生成一个错误并提供 一个一般错误信息。下面是一个代码示例-你可以用之来处理这些情况。注意，我在定位我们前面在HTML 文件的主体中创建的div ID并且对它应用装载和/或错误信息-通过innerHTML方法-这个方法用于设置在 div对象的开始和结束标签之间的HTML:

if(obj.readyState == 0)

{ document.getElementById('copy').innerHTML = "Sending Request..."; }

if(obj.readyState == 1)

{ document.getElementById('copy').innerHTML = "Loading Response..."; }

if(obj.readyState == 2)

{ document.getElementById('copy').innerHTML = "Response Loaded..."; }

if(obj.readyState == 3)

{ document.getElementById('copy').innerHTML = "Response Ready..."; }

if(obj.readyState == 4){

if(obj.status == 200){ return true; }

else if(obj.status == 404)

{

// 添加一个定制消息或把用户重定 向到另外一个页面

document.getElementById('copy').innerHTML = "File not found";

}

else

{document.getElementById('copy').innerHTML = "There was a problem retrieving the XML."; }

当状况代码为200 时，这意味着请求成功。下面开始进行响应了。

七、分析响应

当你准备好分析来自请求 对象的响应时，真正的工作开始了。现在你可以用你请求的数据开始工作。仅为测试目的，在开发期间 ，可以使用responseText和responseXML属性来显示来自响应的原始数据。为了存取XML响应中的结点， 首先使用你创建的请求对象，定位到responseXML属性以检索(你可能已经猜测出来)来自响应的XML。定 位到documentElement-它检索一个到XML响应的根结点的参考。

var response = request.responseXML.documentElement;

现在既然你有了到响应的根结点的参考，那么你可以使 用getElementsByTagName()以结点名字来检索childNodes。下面一行用一个头部的nodeName来定位一个 childNode：

response.getElementsByTagName('header') [0].firstChild.data;

使用firstChild.data可以允许你存取该元素中的文本：

response.getElementsByTagName('header')[0].firstChild.data;

下面是怎样 创建这些代码的完整的例子：

var response = request.responseXML.documentElement;

var header = response.getElementsByTagName ('header')[0].firstChild.data;

document.getElementById ('copy').innerHTML = header;

八、需求分析

现在既然你知道怎样使用 AJAX的基础知识，那么下一步就是决定是否在一工程使用它。须记住的最重要的事情是，在你还没有刷 新页面时你无法使用"Back"按钮。为此，可以先专注于你的工程中的一小部分-它能够从使用 这种类型的交互中受益。例如，你可以创建一个表单-它在用户每次输入一个输入字段或一个字母时查询 一个脚本以便进行实时校验。你可以创建一个拖放页面-在释放一项时，它能够把数据发送到一个脚本中 并把该页面的状态保存到一个数据库中。使用AJAX的理由毫无疑问是存在的; 并且这种使用无论对开发 者还是用户都会带来益处; 这全依赖于具体的条件和执行情况。

还有其它方法可用来解决 "Back"按钮的问题，例如使用Google Gmail-它现在能够为你的操作提供一种撤消功能而不刷 新该页面。以后还会出现许多更具创造性的例子-它们将通过提供给开发者创建独特实时的体验的手段给 用户带来更大的好处。

九、结论

尽管AJAX允许我们构建新的和改进的方式来与一个WEB页 面进行/交互; 但是作为开发者，我们需要牢记产品是不考虑技术的; 它关心的是用户以及其如何与用户 进行交互。没有了用户群，我们构建的工程毫无用处。基于这个标准，我们就能评估应该使用什么技术 以及何时使用它们来创建对相应用户有用的应用。

AJAX是什么？

AJAX是创建交互式网页应用的网页开发技术的一种。

Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。可以用于创建快速动态网页的技术。在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

扩展资料

Ajax 开发与传统的 B/S开发有很大的不同。这些不同引入了新的编程问题，最大的问题在于易用性。由于 Ajax 依赖浏览器的 JavaScript 和XML，浏览器的兼容性和支持的标准也变得和 JavaScript 的运行时性能一样重要了。

综合各种变化的技术和强耦合的客户服务端环境，Ajax 提出了一种新的开发方式。Ajax 开发人员必须理解传统的 MVC 架构，这限制了应用层次之间的边界。同时，开发人员还需要考虑 B/S 环境的外部和使用 Ajax 技术来重定型 MVC 边界。

最重要的是，Ajax 开发人员必须禁止以页面集合的方式来考虑 Web 应用而需要将其认为是单个页面。一旦 UI 设计与服务架构之间的范围被严格区分开来后，开发人员就需要更新和变化的技术集合了。

参考资料来源：百度百科-ajax

网页开发中使用ajax json 有什么特别的好处吗

我之前做个算是比较大的项目了吧

都是用json进行前后的数据传输

撇开大堆网上的复制粘贴， 我谈谈我自己的理解和感受

json呢，在我的理解中，是一种轻量级的数据传输方式

不管是在前段的js，还是后台的脚本，他都可以被程序读成一个对象（object）

这样以来，我们就可以很好很方便的管理和读取我们所需要的数据

举个最简单的例子，比如我们从后台返回一段json

{

data: [{"name":"jerry"},{"name":"tom"}]

}

前段用js读取这一段json并复值给data，我们就可以轻松的抽取我们想要的数据

data.data[0].name //jerry

data.data.length //2

是不是很方便？

而且这样做，有效的把前后台完全分离

前段的 和 后端的修改都不会对彼此造成影响，你给我什么json，我就怎么读怎么写

而我不在乎你的json是怎么来的

在前段，只要后台返回的json格式不变，就能正常显示，不管你后台怎么大改，只要json格式不变，就不影响前端

后台也是一样，我接受到的json格式不变，你前台如何大改，对后台也无影响

这样有效的降低了由于修改造成的重复劳动的次数

关于资料的事，json其实本身就是一种传输方式，与脚本种类无关，而且现在大多数脚本都提供了直接转换json的方法（例如php的json_encode()之类），这个根据你自己的需求去查文档资料吧

纯手打，望帮到你

AJAX技术是什么，和JS有什么区别？

AJAX就是“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术;

它不是一种语言，它算是一个多种语言共同协助的一个技术;

Ajax主要用于创建快速动态网页的技术;

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新;

Javascript是一个开发语言，在使用ajax技术中，需要使用到它;

Ajax和javascript的区别就是,ajax是一种多技术的综合使用（其中包含了javascript），javascript只是一种脚本语言。

怎样将Ajax用于网站开发？

怎样用，还不是一样的么？用XMLHttpRequest发送请求到服务器，服务器处理完了，客户端在用回调函数处理不就完了吗

AJAX的主要用途是什么?

ajax 主要是实现页面和 web 服务器之间数据的异步传输。

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

举个简单例子，不采用 ajax 的页面，当用户在页面发起请求时，就要进行整个页面的刷新，刷新快慢取决于服务器的处理快慢。在这个过程中用户必须得等待，不能进行其他操作。也就是同步的方式。客户端和服务端传递了很多不需要的数据。效率低，用户体验差。采用ajax的页面，可以实现页面的局部更新，而不是整个页面的更新；并且发起请求后，用户还可以进行页面上的其他操作。这就是异步的方式。客户端和服务端间只传递需要的数据，效率高，用户体验性好。

ajax 主要用在开发网站上，很明显的一个特点就是局部刷新，也就是说当你执行网页中的一小部分的时候其实是不用将整个网页提交上去的，只需要提交你改动的网页的局部信息。

扩展资料：

1、ajax 开发模式：

许多重要的技术和 Ajax 开发模式可以从现有的知识中获取。例如，在一个发送请求到服务端的应用中，必须包含请求顺序、优先级、超时响应、错误处理及回调，其中许多元素已经在Web 服务中包含了。同时，随着技术的成熟还会有许多地方需要改进，特别是UI部分的易用性。

Ajax 开发与传统的 B/S开发有很大的不同。这些不同引入了新的编程问题，最大的问题在于易用性。由于 Ajax 依赖浏览器的 JavaScript 和XML，浏览器的兼容性和支持的标准也变得和 JavaScript 的运行时性能一样重要了。这些问题中的大部分来源于浏览器、服务器和技术的组合，因此必须理解如何才能最好的使用这些技术。

综合各种变化的技术和强耦合的客户服务端环境，Ajax 提出了一种新的开发方式。Ajax 开发人员必须理解传统的 MVC 架构，这限制了应用层次之间的边界。同时，开发人员还需要考虑 B/S 环境的外部和使用 Ajax 技术来重定型 MVC 边界。最重要的是，Ajax 开发人员必须禁止以页面集合的方式来考虑 Web 应用而需要将其认为是单个页面。一旦 UI 设计与服务架构之间的范围被严格区分开来后，开发人员就需要更新和变化的技术集合了。

2、ajax 优点：

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。

Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。就像DHTML应用程序那样，Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。

参考资料来源：百度百科 - ajax

ajax网站开发的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于ajax项目、ajax网站开发的信息别忘了在云尚网络www.ysfad.net进行查找喔。