下载文档原格式
简介本文介绍一种方法，Ajax(Asynchronous JavaScript andXML，提出：Jesse James Garrett)，使用它可以构建更为动态和响应更灵敏的Web应用程序。
Ajax是2005年2月才正式提出的一项综合技术，其主要特点是为Web开发提供异步的数据传输和交换方式，可以在不重载（Reload）刷新（Refresh）界面的情况下与服务器进行数据交换。
该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。
如果使用得当，这种强大的力量可以使应用程序更加自然和响应灵敏（无刷新更新局部页面），从而提升用户的浏览体验。
术语Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。
在Ajax之前，Web站点强制用户进入提交/等待/重新显示范例，用户的动作总是与服务器的“思考时间”同步。
Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。
借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML（是利用CSS(层叠样式表),JavaScript,HTML等技术而建立的能与访问者产生互动的网页）立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。
当请求返回时，就可以使用JavaScript和CSS来相应地更新UI，而不是刷新整个页面。
最重要的是，用户甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应的虽然Ajax所需的基础架构已经出现了一段时间，但直到最近异步请求的真正威力才得到利用。
能够拥有一个响应极其灵敏的Web站点确实激动人心，因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的（desktop-like）”可用性。
Google Suggest、Google Maps所有这些Web站点都告诉我们，Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。
AJAX入门系列：Timer控件简单使用本文主要通过一个简单示例，让Web页面在一定的时间间隔内局部刷新，来学习一下 AJAX中的服务端Timer控件的简单使用。
主要内容Timer控件的简单使用1．添加新页面并切换到设计视图。
2．如果页面没有包含ScriptManager控件，在工具箱的AJAX Extensions标签下双击ScriptManager控件添加到页面中。
3．单击ScriptManager控件并双击UpdatePanel控件添加到页面中。
4．在UpdatePanel控件内单击并双击Timer控件添加到UpdatePanel中。
Timer控件可以作为UpdatePanel的触发器不管是否在UpdatePanel中。
5．设置Interval属性为10000。
Interval属性的单位是毫秒，所以我们设置为10000，相当于10秒钟刷新一次。
6．在UpdatePanel控件中添加一个Label控件。
7．设置Label控件的Text属性为“Panel not refreshed yet ”。
确保Label控件添加在了UpdatePanel控件里面。
8．在UpdatePanel之外再添加一个Label控件。
确保第二个Label控件在UpdatePanel的外面。
9．双击Timer控件添加Tick事件处理，在事件处理中设置Label1的Text属性为当前时间。
protected void Timer1_Tick(object sender, EventArgs e){Label1.Text = "Panel refreshed at: " +DateTime.Now.ToLongTimeString();}10．在Page_Load事件中添加代码设置Label2的Text属性为页面创建时间，如下代码所示：protected void Page_Load(object sender, EventArgs e){Label2.Text = "Page created at: " +DateTime.Now.ToLongTimeString();}11．切换到代码视图，确保代码如下所示：protected void Page_Load(object sender, EventArgs e){Label2.Text = "Page created at: " +DateTime.Now.ToLongTimeString();}protected void Timer1_Tick(object sender, EventArgs e){Label1.Text = "Panel refreshed at: " +DateTime.Now.ToLongTimeString();}12．保存并按Ctrl + F5运行13．等待10秒钟后可以看到Panel刷新，里面的Label文字改变为刷新的时间而外面的Label没有改变。
ajax格式及用法Ajax（AsynchronousJavaScriptandXML）是一种使用客户端脚本（通常是JavaScript）与服务器交互的强大技术。
通过Ajax，我们可以实现异步的、基于事件的、基于浏览器的数据请求，从而极大地提高了网页的交互性和响应性。
本篇文章将详细介绍Ajax的格式及用法。
一、Ajax请求格式Ajax请求的基本格式如下：`XMLHttpRequest对象.open(method,url,async,user,password);`其中，method表示请求方法，如GET或POST；url表示请求的URL；async表示是否异步请求，通常为true；user和password用于HTTP认证。
在请求中，我们通常会发送一些数据，这些数据可以以查询字符串的形式附加在URL之后，也可以作为POST请求的数据主体发送。
这些数据可以通过JavaScript对象来创建，或者从XML、JSON或其他数据源获取。
二、Ajax请求示例以下是一个简单的AjaxGET请求示例：`varxhr=newXMLHttpRequest();xhr.open("GET","data.json",true);xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){//请求成功，将返回的数据处理成JSON格式并输出到consolevardata=JSON.parse(xhr.responseText);console.log(data);}};xhr.send();`在这个示例中，我们创建了一个新的XMLHttpRequest对象，并打开了到"data.json"的GET请求。
当请求状态改变时，我们检查请求是否成功，并使用JSON.parse将返回的文本转换为JSON格式。
原作者介绍---1. AJAX介绍AJAX是一种运用JavaScript和可扩展标记语言(XML)，在网络浏览器和服务器之间传送或接受数据的技术。
2. AJAX实例AJAX可以用来创建更多交互式的网络应用程序。
3. AJAX源代码简要分析上一章节效果的代码原理4. AJAX与数据库AJAX可以用来和数据端进行数据的交互联通。
5. 使用AJAX制作留言本使用已有的AJAX教程，制作一个属于自己的留言本吧....Ajax实例---AJAX can be used to create more interactive applications.AJAX可以用来创建更多交互式的网络应用程序。
AJAX ExampleAJAX 实例In the AJAX example below we will demonstrate how a web page can communicate with a web server online as a user enters data into a web form. 在以下的AJAX范例中，我们将了解到当用户以网页格式输入数据时一个网页是如何与网络服务器连接的。
Type a Name in the Box Below在下面的框中输入姓名 *实际操作请前往W3SchoolsSuggestions:Example Explained - The HTML Form实例解析-超文本标记语言模式The form above has the following HTML code:以上的范例所含超文本标记语言代码如下：<form>First Name:<input type="text" id="txt1"onkeyup="showHint(this.value)"></form><p>Suggestions: <span id="txtHint"></span></p>As you can see it is just a simple HTML form with a simple input field called "txt1".就如你看到的，它只是一个普通的表单，里面有一称为"txt1"的输入框The paragraph below the form contains a span called "txtHint". The span is used as a placeholder for hints retrieved from the web server.下一段包括了一个称做“txtHint”的SPAN。
AJAXAJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。
专为描述JavaScript 的两项强大性能.这两项性能在多年来一直被网络开发者所忽略,直到最近Gmail, Google suggest 和google Maps 的横空出世才使人们开始意识到其重要性. 这两项被忽视的性能是:* 无需重新装载整个页面便能向服务器发送请求.* 对XML 文档的解析和处理DOM．根據Ajax提出者Jesse James Garrett建議[1]，它：使用XHTML+CSS来表示信息；使用JavaScript操作DOM（Document Object Model）进行动态显示及交互；使用XML和XSLT进行数据交换及相关操作；使用XMLHttpRequest对象与Web服务器进行异步数据交换；使用JavaScript将所有的东西绑定在一起。
类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。
事实上，一些基于AJAX的“派生／合成”式（derivative/composite）的技术正在出现，如AFLAX。
AJAX的应用使用支持以上技术的Web浏览器作为运行平台。
这些浏览器目前包括：Internet Explorer、Mozilla、Firefox、Opera、Konqueror及Mac OS的Safari。
但是Opera不支持XSL格式对象，也不支持XSLT[2]。
步骤1 – "请!" --- 如何发送一个HTTP请求为了用JavaScript向服务器发送一个HTTP请求, 需要一个具备这种功能的类实例. 这样的类首先由Internet Explorer以ActiveX对象引入, 被称为XMLHTTP. 后来Mozilla, Safari 和其他浏览器纷纷仿效, 提供了XMLHttpRequest类,它支持微软的ActiveX对象所提供的方法和属性.因此, 为了创建一个跨浏览器的这样的类实例(对象), 可以应用如下代码:if (window.XMLHttpRequest) { // Mozilla, Safari, ...http_request = new XMLHttpRequest();} else if (window.ActiveXObject) { // IEhttp_request = new ActiveXObject("Microsoft.XMLHTTP");}(上例对代码做了一定简化,这是为了解释如何创建XMLHTTP类实例. 实际的代码实例可参阅本篇步骤3.)如果服务器的响应没有XML mime-type header,某些Mozilla浏览器可能无法正常工作. 为了解决这个问题, 如果服务器响应的header不是text/xml,可以调用其它方法修改该header.http_request = new XMLHttpRequest();http_request.overrideMimeType('text/xml');接下来要决定当收到服务器的响应后,需要做什么.这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应.可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名,如下所示:http_request.onreadystatechange = nameOfTheFunction;注意:在函数名后没有括号,也无需传递参数.另外还有一种方法,可以在扉页(fly)中定义函数及其对响应要采取的行为,如下所示:http_request.onreadystatechange = function(){// do the thing};在定义了如何处理响应后,就要发送请求了.可以调用HTTP请求类的open()和send()方法, 如下所示:http_request.open('GET', '/some.file', true);http_request.send(null);open()的第一个参数是HTTP请求方式– GET, POST, HEAD 或任何服务器所支持的您想调用的方式. 按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求.有关HTTP请求方法的详细信息可参考/Protocols/rfc2616/rfc2616-sec9.html W3C specs第二个参数是请求页面的URL.由于自身安全特性的限制,该页面不能为第三方域名的页面.同时一定要保证在所有的页面中都使用准确的域名,否则调用open()会得到"permission denied"的错误提示.一个常见的错误是访问站点时使用domain.tld,而当请求页面时,却使用www.domain.tld.第三个参数设置请求是否为异步模式.如果是TRUE, JavaScript函数将继续执行,而不等待服务器响应.这就是"AJAX"中的"A".如果第一个参数是"POST",send()方法的参数可以是任何想送给服务器的数据. 这时数据要以字符串的形式送给服务器,如下所示:name=value&anothername=othervalue&so=on步骤2 – "收到!" --- 处理服务器的响应当发送请求时,要提供指定处理响应的JavaScript函数名.http_request.onreadystatechange = nameOfTheFunction;我们来看看这个函数的功能是什么.首先函数会检查请求的状态.如果状态值是4,就意味着一个完整的服务器响应已经收到了,您将可以处理该响应.if (http_request.readyState == 4) {// everything is good, the response is received} else {// still not ready}readyState的取值如下:0 (未初始化)1 (正在装载)2 (装载完毕)3 (交互中)4 (完成)接着,函数会检查HTTP服务器响应的状态值. 完整的状态取值可参见W3C site. 我们着重看值为200 OK的响应.if (http_request.status == 200) {// perfect!} else {// there was a problem with the request,// for example the response may be a 404 (Not Found)// or 500 (Internal Server Error) response codes}在检查完请求的状态值和响应的HTTP状态值后, 您就可以处理从服务器得到的数据了.有两种方式可以得到这些数据:http_request.responseText –以文本字符串的方式返回服务器的响应http_request.responseXML –以XMLDocument对象方式返回响应.处理XMLDocument对象可以用JavaScript DOM函数步骤3 – "万事俱备!" - 简单实例我们现在将整个过程完整地做一次,发送一个简单的HTTP请求. 我们用JavaScript请求一个HTML文件, test.html, 文件的文本内容为"I'm a test.".然后我们"alert()"test.html文件的内容.<script type="text/javascript" language="javascript">var http_request = false;function makeRequest(url) {http_request = false;if (window.XMLHttpRequest) { // Mozilla, Safari,...http_request = new XMLHttpRequest();if (http_request.overrideMimeType) {http_request.overrideMimeType('text/xml');}} else if (window.ActiveXObject) { // IEtry {http_request = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {http_request = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {}}}if (!http_request) {alert('Giving up :( Cannot create an XMLHTTP instance');return false;}http_request.onreadystatechange = alertContents;http_request.open('GET', url, true);http_request.send(null);}function alertContents() {if (http_request.readyState == 4) {if (http_request.status == 200) {alert(http_request.responseText);} else {alert('There was a problem with the request.');}}}</script><spanstyle="cursor: pointer; text-decoration: underline"onclick="makeRequest('test.html')">Make a request</span>本例中:用户点击浏览器上的"请求"链接;接着函数makeRequest()将被调用.其参数– HTML文件test.html在同一目录下;这样就发起了一个请求.onreadystatechange的执行结果会被传送给alertContents();alertContents()将检查服务器的响应是否成功地收到,如果是,就会"alert()"test.html文件的内容.步骤4 – "X-文档" --- 处理XML响应在前面的例子中,当服务器对HTTP请求的响应被收到后,我们会调用请求对象的reponseText属性.该属性包含了test.html文件的内容.现在我们来试试responseXML属性.首先,我们新建一个有效的XML文件,后面我们将使用这个文件.该文件(test.xml)源代码如下所示:<?xml version="1.0" ?><root>I'm a test.</root>在该脚本中,我们只需修改请求部分:...onclick="makeRequest('test.xml')">...接着,在alertContents()中,我们将alert()的代码alert(http_request.responseText);换成:var xmldoc = http_request.responseXML;var root_node = xmldoc.getElementsByTagName('root').item(0);alert(root_node.firstChild.data);这里,我们使用了responseXML提供的XMLDocument对象并用DOM方法获取存于XML文件中的内容.您的第一个AJAX 应用程序为了让您理解AJAX 的工作原理，我们将创建一个小型的AJAX 应用程序。
AJAX入门系列：使用UpdatePanel控件<<!----></ContenteTemplateContainer <Background:<br /><asp:DropDownList ID="ColorList" AutoPostBack="True" OnSelectedIndexC hanged="DropDownSelection_Change"runat="server"><asp:ListItem Selected="True" Value="White">White </asp:ListItem><asp:ListItem Value="Silver">Silver </asp:ListItem><asp:ListItem Value="DarkGray">Dark Gray </asp:ListItem><asp:ListItem Value="Khaki">Khaki </asp:ListItem><asp:ListItem Value="DarkKhaki"> Dark Khaki </asp:ListItem></asp:DropDownList></div></ContentTemplate></asp:UpdatePanel>事件代码：<script runat="server">void DropDownSelection_Change(Object sender, EventArgs e){Calendar1.DayStyle.BackColor =System.Drawing.Color.FromName(ColorList.SelectedItem.Value);}</script>四．ContentTemplateContainer属性如果要使用编程的手法去设置UpdatePanel中的内容，需要创建一个UpdatePanel，并且添加控件到ContentTemplateContainer，而不能直接添加控件到ContentTemplate，如果想直接设置ContentTemplate，则需要编写一个自定义的Template，并去实现位于System.Web.UI命名空间下的接口ITemplate。
ajax技术原理Ajax是一种用于创建交互式Web应用程序的技术，它可以让Web页面可以在不刷新整个页面的情况下向服务器发送请求并获取数据，然后在页面中动态地显示它们。
Ajax技术是基于多种技术的复杂集成，它涉及到浏览器端JavaScript、DOM、XMLHttpRequest对象、服务器端脚本等多个方面。
本文将针对Ajax技术的原理、工作流程、技术架构等方面进行详细的介绍。
一、Ajax技术的原理Ajax全称为Asynchronous JavaScript and XML，它最初是由Jesse James Garrett提出的一种Web开发技术，Ajax技术的核心思想是使用JavaScript和XMLHttpRequest对象来与服务器异步通信，从而实现页面的更新，而不需要刷新整个页面。
在使用Ajax技术前，Web应用程序需要刷新整个页面，同时每次页面刷新会向服务器发送一次请求，导致页面响应延迟，影响用户体验。
而使用Ajax技术后，浏览器可以只更新部分页面，不需要刷新整个页面，同时可以多次向服务器请求数据。
Ajax技术的原理是基于JavaScript语言，通过JavaScript语法实现浏览器与服务器之间的异步通信。
在Web页面中，我们可以通过JavaScript创建一个XMLHttpRequest对象，然后使用该对象向服务器发送请求并获取数据。
发送的请求类型可以是各种不同的请求类型，比如GET、POST、PUT、DELETE等。
服务器接收到请求后，会对请求进行处理，并将响应数据返回给浏览器。
浏览器接收到响应数据后，就可以将其显示到页面中，完成页面的更新，而不需要刷新整个页面。
二、Ajax技术的工作流程Ajax技术的工作流程是由浏览器端和服务器端两部分组成。
浏览器端负责通过JavaScript创建XMLHttpRequest 对象，然后向服务器发送HTTP请求。
在服务器端，接收到HTTP请求后，服务器会根据请求类型进行相应的处理，然后将处理结果返回给浏览器。
Ajax基本语法案例代码：$(function(){$('#send').click(function(){$.ajax({type: "GET",url: "test.json",data: {username:$("#username").val(), content:$("#content").val()},//发送到服务器的数据dataType: "json",success: function(data){$('#resText').empty(); //清空resText⾥⾯的所有内容var html = '';$.each(data, function(commentIndex, comment){html += '<div class="comment"><h6>' + comment['username']+ ':</h6><p class="para"' + comment['content']+ '</p></div>';});$('#resText').html(html);}});});});1.url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。
2.type:要求为String类型的参数，请求⽅式（post或get）默认为get。
注意其他http请求⽅法，例如put和delete也可以使⽤，但仅部分浏览器⽀持。
3.timeout:要求为Number类型的参数，设置请求超时时间（毫秒）。
此设置将覆盖$.ajaxSetup()⽅法的全局设置。
