ajax应用的五个步骤
ajax 应用的五个步骤
ajax
Ajax 即Asynchronous Javascript And XML（异步JavaScript 和XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步JavaScript 和XML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页
的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步
更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行
更新。
jQuery 5种调用AJax的方法
jQuery 如何调用AJax（五种方法）方法一：load() 使用load方法可以帮助你加载非本地的HTML页面，并注入到当前调用的DOM中。 $.ajaxSetup({ cache: false }); var ajax_load = "
"; var loadUrl = "ajax/load.php"; $("#load_button").click(function() { $("#result").html(ajax_load).load(loadUrl);
}); cache: false 的意思是让浏览器不执行缓存功能，这样的话页面的内容将实时更新，否则某些浏览器会出现内容不更新的问题，当点击按钮后，因为加载过程需要时间，所以这里我们先使用.html方法来添加一个”加载中”的图片，然后执行load方法。 高级使用方法： 1. 加载页面某一部分 例如只加载ID为”pic”的部分，代码如下： $("#load_button").click(function() { $("#result").html(ajax_load).load(loadUrl + " #pic"); }); 2. 递交参数执行页面加载
可以给load方法添加GET或者POST参数，代码如下： $("#load_get").click(function() { $("#result").html(ajax_load).load(loadUrl, "page=0&size=10"); }); $("#load_post").click(function() { $("#result").html(ajax_load).load(loadUrl, { page: 0, size: 10 }); }); 3. 添加回调函数 回调函数可以让你在结束AJAX调用后调用该函数，比如在页面load后提示用户加载完毕：
jQuery Ajax 应用实例解析大全
jQuery Ajax应用解析 jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。 我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) ：载入远程HTML 文件代码并插入至DOM 中。 url(String) : 请求的HTML页的URL地址。 data(Map) : (可选参数) 发送至服务器的key/value 数据。 callback(Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。 这个方法默认使用GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的HTML 文档，DOM 中将仅插入筛选出的HTML 代码。语法形如"url #some > selector"。 这个方法可以很方便的动态加载一些HTML文件，例如表单。 示例代码： $(".ajax.load").load("https://www.360docs.net/doc/bf8292212.html,/QLeelulu/archive/2008/03/30/1130270.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态：success，error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 这里将显示结果。 注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求 参数： url(String) : 发送请求的URL地址. data(Map) : (可选) 要发送给服务器的数据，以Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。 callback(Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。 这是一个简单的GET 请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。示例代码： $.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){
AJAX技术简介
AJAX技术简介 知识点： 1、基本概念 AJAX ——A synchronous J avaScript a nd X ML 异步的Javascript和XML 传统的WEB模型：同步模型——必须是一次请求，一次响应。 每次请求服务器（地址栏输入，点击超链接，提交表单），页面都会刷新。 传统的WEB模型——同步模型——缺点： 由于浏览器在向服务器发出请求之后，必须等待服务器给响应，有可能页面成为一片空白，客户体验不好。 由于每次都要刷新整个页面，导致服务器的网络带宽被浪费。
AJAX技术的WEB模型：异步模型——可以连续发出多个请求给服务器，在随后 不确定的时间里响应回来。 我们有了一种新的请求服务器的方法（以前传统的浏览器请求服务器的方式：地址栏输入、点击超链接、提交表单），通过下图的Ajax Engine（引擎）。 我们可以通过AJAX引擎发出多个请求，然后可以接收服务器的响应。 此时可以不必刷新整个浏览器页面，就能更新页面的部分内容。 AJAX技术优势： 1、传统模式每次请求页面都会刷新，这样比较占用服务器网络带宽。 AJAX模式可以实现局部刷新，大大节约服务器网络带宽。 2、AJAX模式能很好的改善客户体验。 2、X MLHttpRequest使用 Ajax Engine在浏览器中是一个对象，它的类型是：XMLHttpRequest 1、创建XMLHttpRequest对象（它在不同浏览器中，创建方式不一样的；但是使用上是一样的） ······ 小结：使用常见系统对象以及这些对象的属性和方法，创建对象，对象方法和属性的使用。 2.文档对象模型的应用 ·文档结构树 ······
我的链接我的标题
······ 3.事件处理运用 ·浏览器中的事件 ······Ajax技术与传统Web应用的比较
中图分类号:TP393.01 文献标识码:B 文章编号:1009-2552(2010)01-0108-03 Ajax技术与传统Web应用的比较 孙启良 (济南大学理学院,济南250022) 摘 要:Ajax技术是浏览器与服务器交互方式的巨大改进,是Web2.0时代的重要标志。Ajax技术利用客户端闲置的处理能力,减轻了服务器和带宽的负担,使用户交互变得流畅而连续。介绍了Aja x的工作原理,基本特点以及与传统Web应用的区别,并给出了一个Ajax实例。 关键词:HTML;Ajax;JSP;JavaScript Comparison between Ajax technology and traditional Web applications SUN Qi liang (School of Science,Jinan University,Jinan250022,China) Abstract:Ajax technology is a tre mendous improvement of the browser and server.It is also an important indicator of Web2.0era.It uses the idle processing power of client to reduce the burden on servers and bandwidth,and then the user interaction has become smooth and continuous.This paper introduces the working principle of Aja x and the difference between traditional Web applications and Aja x.Finally,a section of the source code is given. Key w ords:HTML;Ajax;JSP;JavaScript 0 引言 Aja x即异步JavaScript和XML,是Web2.0中的一项关键技术,它允许把用户和Web页面间的交互与Web浏览器和服务器间的通信分离开来。 传统的Web应用允许用户填写表单(form),当提交表单时就向Web服务器发送一个请求。服务器接收并处理传来的表单,然后返回一个新的网页。这个做法浪费了许多带宽,因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。如果严重超过响应时间,服务器干脆告诉用户页面不可用。另外,某些时候,如果只是想改变页面一小部分的数据,那么如何不必重新加载整个责面,减少用户等待的时间是亟待解决的问题。现在,这个问题基本得到了解决,除了更优秀的程序设计、编码优化和调整服务器之外,还可以采用Ajax技术。1 Ajax的工作原理 与传统的Web应用不同,Ajax采用异步交互过程。Ajax在用户与服务器之间引入一个中间介质,消除了网络交互过程中的处理、等待等缺点。相当于在用户和服务器之间增加了一个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转移到客户端,利用客户端闲置的处理能力,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。 传统Web应用程序和Ajax程序工作原理如图1所示。 图1左侧图形为传统Web程序工作原理,此时服务器端承担大量的工作,客户端只有数据显示的功能。右侧图形为Ajax应用程序工作原理图,客户 收稿日期:2009-07-13 作者简介:孙启良(1980-),男,讲师,在职硕士研究生,主要研究方向为计算机网络和计算机体系结构。 108
AJAX
1、简介 AJAX：（Asynchronnous JavaScript And XML）异步的JavaScript与XML。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 下面是Ajax 应用程序所用到的基本技术： ①HTML 用于建立Web 表单并确定应用程序其他部分使用的字段。 ②JavaScript 代码是运行Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。 ③DHTML 或Dynamic HTML，用于动态更新表单。我们将使用div、span 和其他动态HTML 元素来标记HTML。 ④文档对象模型DOM 用于（通过JavaScript 代码）处理HTML 结构和（某些情况下）服务器返回的XML。 Ajax不是一种新技术，而是几种蓬勃发展的几种强大技术以新的方式组合而成，Ajax包括：基于XHTML和CSS标准的表示；使用Document Object Model进行动态的显示和交互；使用XML Request与服务器进行异步通讯；使用JavaScript绑定一切。 之前的是用户的请求直接向服务器提交。我们看一个计算的例子。 Ajax的工作原理，Ajax的核心是JavaScript和XMLHttpRequest。该对象在Internet Explorer5中首次引入，它是一种支持异步请求的技术。简单的说：XmlHttpRequest使你可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性能。下面是使用Ajax完成的功能：1、动态更新购物车的物品总数，无需用户单击Update并等待服务器发送整个页面。2、提升站点的性能，这是通过减少从服务器下载的数据量来实现的。例如：当更新购物车一个物品的数量时，会重新载入整个页面，这必须下载32K的数据，而使用Ajax计算新的总量，服务器只需要返回新的总量值，因此所需要的带宽仅仅为原来的百分之一。3、消除了用户每次输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。 用户的请求不再直接向服务器提交，而是使用XMLHttpRequest异步的向服务器发送，从而避免了重载页面。 特征： 异步发送请求 服务器响应的是数据不是页面内容。 2、XMLHttpRequest/ActiveXObject XMLHttpRequest对象，现代浏览器均支持XMLHttpRequest对象（IE5 和IE6 使用ActiveXObject）。 XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 XMLHttpRequest是整个Ajax技术的灵魂。Ajax异步发送请求，就是使用的XMLHttpRequest对象。 使用Ajax进行异步通信的过程： 创建XMLHttpRequest对象。 通过XMLHttpRequest对象向服务器发送请求。 创建回调函数，见识服务器响应状态，在服务器响应完成后，启动回调函数。 回调函数动态更新HTML页面。 创建XMLHttpRequest对象，所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及Opera）都支持创建XMLHttpRequest对象的语法： Varxhr=new XMLHttpRequest(); 为了应对所有的现代浏览器，包括IE5 和IE6，请检查浏览器是否支持XMLHttpRequest对象。如果支持，则创建XMLHttpRequest对象。如果不支持，则创建ActiveXObject： var xmlHttpRequest; function createXMLHttpRequest() { if(window.XMLHttpRequest) { //火狐谷歌 window.alert("支持XMLHttpRequest"); xmlHttpRequest = new XMLHttpRequest(); }else if (window.ActiveXObject) { //IE5 IE6 try{ xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP"); window.alert("不支持XMLHttpRequest,但是是Msxml2.XMLHTTP"); } catch (e) { try{ xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); window.alert("不支持XMLHttpRequest,但是是Microsoft.XMLHTTP"); } catch (e) { } } } } XMLHttpRequest对象的方法，属性和事件 方法： 1.open(method,url),
AJAX-AjaxPro的应用
https://www.360docs.net/doc/bf8292212.html, AjaxPro的应用 1、首先下载AjaxPro组件。并将AjaxPro.dll引用到网站（或项目）。 2、修改Web.config。在
AJAX(用法总结-精华版)
1、ajax是什么? ajax: asynchronous javascript and xml: 异步的javascript和xml。 ajax是一种用来改善用户体验的技术，其本质是利用浏览器内置的一种特殊的对象(XMLHttpRequest)异步(即发送请求时，浏览器不会销毁当前页面，用户可以继续在当前页面做其它的操作)的向服务器发送请求,并且利用服务器返回的数据(不再是一个完整的页面，只是部分的数据，一般使用文本或者xml返回)来部分更新当前页面。 使用ajax技术之后，页面无刷新，并且不打断用户的操作。 2、ajax对象 (1)如何获得ajax对象? XMLHttpRequest并没有标准化，要区分浏览器: function getXhr() { var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); // 非ie浏览器}else{ xhr = new ActiveXObject('Microsoft.XMLHttp'); // ie浏览器} } (2)ajax对象的属性 a. onreadystatechange: 绑订一个事件处理函数(即: 注册一个监听器) 当ajax对象的readyState值发生了改变(比如， 从0-->1)，就会产生readystatechange事件。 b. responseText: 获得服务器返回的文本 c. responseXML: 获得服务器返回的XML dom对象 d. status: 获得状态码 e. readyState: 返回ajax对象与服务器通讯的状态。返回值是一个number 类型的值，不同的值表示不同的含义: 0: (为初始化) --> 对象已建立，但是尚未初始化(尚未调用 open方法) 1: (初始化) --> 对象已建立，尚未调用send方法 2: (发送数据) --> send方法已调用 3: (数据传送中) --> 已接受部分数据 4: (响应结束) --> 接收了所有的数据 (3)ajax编程的基本步骤 1) 获取ajax对象(XmlHttpRequest) 2)使用 XmlHttpRequest向服务器发送请求 3)在服务器端处理请求 4)在监听器当中，处理服务器返回的响应