一、Web 2.0简介
•深入研究 Ajax ，一定要清楚 Web 2.0 的概念
•先说明 Web 1.0 ，指的是具有完全不同的请求和响应模型的传统 Web
•Web 2.0是相对Web1.0（2003年以前的互联网模式）的新的一类互联网应用的统称，是一次从核心内容到外部应用的革命
•由Web1.0单纯通过网络浏览器浏览html网页模式向内容更丰富、联系性更强、工具性更强的Web2.0互联网模式的发展成为互联网新的发展趋势。
Web2.0是以 Flickr、Google 等网站为代表，以Blog、TAG、SNS、RSS、wiki 等应用为核心，依据xml、ajax等新理论和技术实现的互联网新一代模式。
二
二、XMLHttpreRuest创建一
•XMLHttpRequest 常用方法
–open()：建立到服务器的新请求
–send()：向服务器发送请求
–abort()：退出当前请求
–readyState：提供当前 HTML 的就绪状态
–responseText：服务器返回的请求响应文本
•XMLHttpRequest 所有的方法和属性，都与非常简单的请求/响应模型有关，但是就是基于这些简单的东西可以做出非常好的效果，彻底改变你的应用。
三、XMLHttpreRuest创建二
•创建具有错误处理能力的 XMLHttpRequest
<script language="javascript" type="text/javascript">
• var request = false;
• try { request = new XMLHttpRequest(); }
• catch (failed) { request = false; }
• if (!request) alert(“初始化 XMLHttpRequest 失败!");
•</script>
步骤：
•创建一个新变量 request 并赋值 false。后面将使用 false 作为判定条件，它表示还没有创建 XMLHttpRequest 对象。
•增加 try/catch 块：
–尝试创建 XMLHttpRequest 对象。
–如果失败（catch (failed)）则保证 request 的值仍然为 false。
•检查 request 是否仍为 false（如果一切正常就不会是 false）。
•如果出现问题（request 是 false）则使用 JavaScript 警告通知用户出现了问题。
四、XMLHttpreRuest创建三
•创建具有错误处理能力的 XMLHttpRequest
<script language="javascript" type="text/javascript">
• var request = false;
• try { request = new XMLHttpRequest(); }
• catch (trymicrosoft) {
• try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) {
• try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } }
• if (!request) alert("初始化 XMLHttpRequest 失败!");
•</script>
五、XMLHttpreRuest创建四
•步骤
•1、创建一个新变量 request 并赋值 false。使用 false 作为判断条件，它表示还没有创建 XMLHttpRequest 对象。
•2、增加 try/catch 块：
–尝试创建 XMLHttpRequest 对象。
–如果失败（catch (trymicrosoft)）：
•尝试使用较新版本的 Microsoft 浏览器创建 Microsoft 兼容的对象（Msxml2.XMLHTTP）。
•如果失败（catch (othermicrosoft)）尝试使用较老版本的 Microsoft 浏览器创建 Microsoft 兼容的对象（Microsoft.XMLHTTP）。
–如果失败（catch (failed)）则保证 request 的值仍然为 false。
•3、检查 request 是否仍然为 false（如果一切顺利就不会是 false）。
•4、如果出现问题（request 是 false）则使用 JavaScript 警告通知用户出现了问题。
六、XMLHttpreRuest创建五
/* 返回一个新的 XMLHttpRequest 对象,支持多种浏览器，如果创建失 *败，返回false */
•function newXMLHttpRequest() {
• var xmlreq = false;
•if (window.XMLHttpRequest) { //判断浏览器是否支持 XMLHttpRequest 类
• //尝试以非 Microsoft 浏览器的方式创建 XMLHttpRequest
• xmlreq = new XMLHttpRequest();
•} else if (window.ActiveXObject) { //判断浏览器是否支持 ActiveXObject
• try { //经由 Miscrosoft ActiveX 实例化 XMLHttpRequest 对象
• //在较新版本的 Internet Explorer 中创建 XMLHttpRequest 对象
• xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
• } catch (e1) {
• try {//在较老版本的 Internet Explorer 中创建 XMLHttpRequest 对象
• xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
• } catch (e2) { //创建 XMLHttpRequest 对象失败
• xmlreq = false;
• } } }
• if (! xmlreq) alert("初始化 XMLHttpRequest 失败!");
• return xmlreq; //返回
•}
七、用XMLHttpRequest发送请求一
•XMLHttpRequest 惟一的目的是让您发送请求和接收响应
•其他一切都是 JavaScript、CSS 或页面中其他代码的工作：改变用户界面、切换图像、解释服务器返回的数据
•准备好 XMLHttpRequest 之后，就可以向服务器发送请求了，步骤如下：
--从 Web 表单中获取需要的数据
--建立要连接服务器的 URL
--打开请求(或打开到服务器的连接)
--指定回调方法
--发送请求
•准备工作，做一个静态页面
<body>
<p>订单查询</p>
<form action="POST">
<p>输入您的电话号码:
<input type="text" size="14" name="phone“ id="phone" onChange="getCustomerInfo();" /> </p>
<p>您的订单发往:</p> <div id="address"></div>
<p>您的订单内容:</p>
<p><textarea name="order" rows="6" cols="50" id="order"></textarea></p>
<p><input type="submit" value="Order Pizza" id="submit" /></p>
</form>
</body>
八、用XMLHttpRequest发送请求二
•多数应用程序中都会结合一些静态数据和用户处理的表单中的数据来构造该URL ，页面有电话输入框 id=phone
<input type="text" size="14" name="phone" id="phone" onChange="getCustomerInfo();" />
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/lookupCustomer.jsp?phone=" + escape(phone);
}
Ajax 沙箱模型简介：
Ajax 采用一种沙箱安全模型。Ajax 代码（具体来说就说XMLHttpRequest 对象）只能对所在的同一个域发送请求。
•上例中，采用的静态的 URL ，采用了 GET 方式传递请求。
•escape() 方法，它用于转义不能用明文正确发送的任何字符。比如，电话号码中的空格将被转换成字符 %20，从而能够在 URL 中传递这些字符。
•可以根据需要添加任意多个参数。比如，如果需要增加另一个参数，只需要将其附加到 URL 中并用“与”（&）字符分开 [第一个参数用问号（?）和脚本名分开]
•有了连接URL ，可以用XMLHttpRequest对象的 open方法打开请求，该方法有五个参数
–request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求
–url：要连接的 URL
–asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true
–username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值
–password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值
注意：通常使用其中的前三个参数。事实上，即使需要异步连接，也应该指定第三个参数为“true”。这是默认值，但坚持明确指定请求是异步的还是同步的更容易理解
九、用XMLHttpRequest发送请求三
•使用 open方法打开请求
•function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/lookupCustomer.jsp?phone=" + escape(phone);
//打开请求，
xmlreq.open("GET", url, true);
}
十、发送请求四
•配置好 open() 后，指定回调函数
•Ajax 和 Web2.0 最大的秘密就是 XMLHttpRequest 中的一个简单属性 onreadystatechange
•异步操作服务器端不会等待，服务器在完成通过 XMLHttpRequest 发送给它的请求处理之后需要某种指示说明怎么做
•onreadystatechange 属性允许指定一个回调函数。回调允许服务器反向调用Web 页面中的代码。它也给了服务器一定程度的控制权，当服务器完成请求之后，会查看 XMLHttpRequest 对象，特别是 onreadystatechange 属性。然后调用该属性指定的任何方法。
•之所以称为回调是因为服务器向网页发起调用，无论网页本身在做什么。比方说，可能在用户坐在椅子上手没有碰键盘的时候调用该方法，但是也可能在用户输入、移动鼠标、滚动屏幕或者点击按钮时调用该方法。它并不关心用户在做什么。
xmlreq.onreadystatechange = updatePage;
十一、请求五
•配置好 open() 后，可以用XMLHttpRequest对象的 send 方法打开请求，该方法有一个参数，就是要发送的内容
•之前我们用URL 本身发送数据
•var url = "/lookupCustomer.jsp?phone=" + escape(phone);
•如果发送安全信息或 XML ，使用 send() 方法
注意：实际上在 Ajax 应用中80%都是通过 Get 方法传递数据的，用URL容易的多。如果不要send() ，传递 null 作为参数。
•function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/lookupCustomer.jsp?phone=" + escape(phone);
xmlreq.open("GET", url, true);
xmlreq.onreadystatechange = updatePage;
xmlreq.send(null);
}
十二、处理服务器响应一
•服务器完成了请求处理。服务器查看 onreadystatechange 属性确定要调用的方法。
•将 XMLHttpRequest 对象的 onreadystatechange 属性设置为要运行的函数名。这样，当服务器处理完请求后就会自动调用该函数。也不需要担心该函数的任何参数。
•function updatePage() {
• alert("Server is done!");
•}
•输入电话号码然后离开该字段，将看到一个弹出的警告窗口，但是根据浏览器的不同，在表单停止弹出警告之前会看到两次、三次甚至四次警告。这是因为我们还没有考虑 HTTP 就绪状态，这是请求/响应循环中的一个重要部分。
处理服务器响应二
•HTTP 就绪状态表示请求的状态或情形。
•它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。
•它还可以帮助确定读取服务器提供的响应文本或数据是否安全
•Ajax 应用程序中需要了解五种就绪状态
–0：请求没有发出（在调用 open() 之前）
–1：请求已经建立但还没有发出（调用 send() 之前）
–2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）
–3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应
–4：响应已完成，可以访问服务器响应并使用它
•一些浏览器从不报告 0 或 1 而直接从 2 开始，然后是 3 和 4。其他浏览器则报告所有的状态。
处理服务器响应三
•对于 Ajax 编程，需要直接处理的惟一状态就是就绪状态 4，它表示服务器响应已经完成，可以安全地使用响应数据了
function updatePage() {
if (xmlreq.readyState == 4)
alert("Server is done!");
}
•尝试运行新版本的 Ajax 代码，现在就会看到与预期的一样，只显示一次警告信息了。
处理服务器响应四
•除了就绪状态外，还需要检查 HTTP 状态。
•我们期望的状态码是 200，它表示一切顺利。
•如果就绪状态是 4 而且状态码是 200，就可以处理服务器的数据了，而且这些数据应该就是要求的数据（而不是错误或者其他有问题的信息）
//增加一点错误检查
function updatePage() {
if (xmlreq.readyState == 4)
if (xmlreq.status == 200)
alert("Server is done!");
else if (xmlreq.status == 404)
alert("Request URL does not exist");
else alert("Error: status code is " + xmlreq.status);
}
注意：小小的改变能够涵盖典型 Web 应用程序中 80% 的问题
处理服务器响应五
•读取响应文本
•在确保请求已经处理完成（通过就绪状态），服务器给出了正常的响应（通过状态码），最后我们可以处理服务器返回的数据了。
•返回的数据保存在 XMLHttpRequest 对象的 responseText 属性中。
•关于 responseText 中的文本内容，比如格式和长度，有意保持含糊。这样服务器就可以将文本设置成任何内容。比方说，一种脚本可能返回逗号分隔的值，另一种则使用 | 字符分隔的值，还有一种则返回长文本字符串。如何选择，由服务器决定。
处理六
//增加一点错误检查
function updatePage() {
if (xmlreq.readyState == 4) {
if (xmlreq.status == 200) {
var response = xmlreq.responseText.split("|");
document.getElementById("order").value = response[0];
document.getElementById("address").innerHTML = response[1].replace(/"n/g, "
");
}
else if (xmlreq.status == 404){
alert("Request URL does not exist");}}
else{
alert("Error: status code is " + xmlreq.status); }
}
处理七
•上述方法的步骤
–得到 responseText 并使用 JavaScript split() 方法从管道符分开。得到的数组放到response 中
–数组中的第一个值——上一个订单——用 response[0] 访问，被设置为 ID 为“order”的字段的值
–第二个值 response[1]，即客户地址，则需要更多一点处理。因为地址中的行用一般的行分隔符（“"n”字符）分隔，代码中需要用 XHTML 风格的行分隔符 <br /> 来代替。替换过程使用 replace() 函数和正则表达式完成
–修改后的文本作为 HTML 表单 div 中的内部 HTML。结果就是表单突然用客户信息更新了
•XMLHttpRequest 所有的方法和属性，都与非常简单的请求/响应模型有关，但是就是基于这些简单的东西可以做出非常好的效果，彻底改变你的应用。
posted on 2009-04-29 10:23
玄风 阅读(180)
评论(0) 编辑 收藏