12-《AJAX概述》.pptVIP

Ajax基础 本次课程内容 课程目标： Ajax的简介 核心概念非同步 XMLHttpRequest介绍 第一个Ajax程序 发送请求参数 发送与接收XML * AJAX的基本概念 构建网页的一种综合使用JavaScript和XML的技术 不是什么划时代的技术 HTML网页的异步传输技术 在等待网页的传输过程中，用户依然可以和系统进行交互 页面不用刷新就可以更新内容 合理的运用可以让用户感觉更好更方便 但也不要滥用 原来的流程 AJAX的流程 Ajax的简介 Ajax是Asynchronous JavaScript + XML的简称，这指出了Ajax的核心观念（Asynchronous）与所使用到的主要两个技术（JavaScript、XML）。 核心概念非同步 Asynchronous为非同步，要了解Ajax，必须先了解为何要非同步。 现在许多的应用程式都是在Web上展现，这托了网际网路的普及之福，然而网路当初是Web应用程式繁荣的舞台，现在却也成了限制Web应用程式发展的因素。限制的原因来自于网路延迟的不可确定性，网路连线其实是个很耗资源的行为，程式必须序列化、通讯协定沟通、实体路由传送等动作，这些动作都很耗时间与资源，所有透过网路必需的额外操作，常足以拖慢一个系统，就Web应用程式而言，通常只能透过表单进行资料提交，在同步的情况下，使用者送出表单之后，就只能等待远端服务器回应，在这段时间内，使用者无法作进一步的操作。 核心概念非同步 核心概念非同步 现在的问题是，谁来发送非同步请求，事实上有几种解决方案，在Ajax这个名词被提出之前，早就有着用IFrame的方式，也就是在HTML页面中内嵌另一个HTML页面，由内嵌的页面来发出请求，而外围的HTML页面还是可以继续让使用者进行操作，有时候IFrame的解决方式会是简单的，甚至比较好的。 不过现在谈到Ajax，都着重在 XMLHttpRequest 物件，您可以使用JavaScript来建立，其实Firefox、NetScape、Safari、Opera中才叫XMLHttpRequest， Internet Explorer中是Microsoft.XMLHTTP或Msxml2.XMLHTTP的ActiveX物件，不过IE7中也正名为 XMLHttpRequest。 Ajax应用程式是必须由客户端、伺服端一同合作的应用程式，JavaScript是用来撰写Ajax应用程式客户端的语言，XML则是请求时或回应时，建议使用的交换资料格式，Ajax的客户端与伺服端基本上是可以独立开发的，只要协议好沟通的资料格式，伺服端不限于使用何种技术。 XMLHttpRequest介绍 在Ajax应用程式中，如果是Mozilla/Firefox/Safari中，可以透过XMLHttpRequest来发出非同步请求，如果是在IE6 或IE先前版本，则是使用ActiveXObject来发出非同步请求，为了各个不同浏览器间的相容性，必须进行测试可取得XMLHttpRequest 或ActiveXObject var xmlHttp; function createXMLHttpRequest() { if (window.XMLHttpRequest) { // 如果可以取得XMLHttpRequest xmlHttp = new XMLHttpRequest(); // Mozilla、Firefox、Safari } else if (window.ActiveXObject) { // 如果可以取得ActiveXObject xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); // Internet //Explorer } } XMLHttpRequest介绍 在建立XMLHttpRequest之后，则可以使用以下的几种方法： void open(string method, string url, boolean asynch, string username, string password) 开启对伺服端的连结；method为请求方式（GET、POST）；url为伺服端位址，如果是GET的话，可加上请求参数与值；asynch为非同步设定，预设是true，表示使用非同步方式。 void send(content) 对伺服端传送请求，content这以放XML、输入串流、字串、JSON格式的内容，放进去会放在POST本体中发送。 void setRequestHeader(string header, string value)