JavaScript奧秘之簡述下你所知道的Ajax？
前言
ajax已經(jīng)流行很多年了，現(xiàn)在來說它是否已經(jīng)晚了呢？？？特別是有這樣框架那樣框架后，還有幾個人認識原生ajax呢？我們每天都會用到的東西你到底對他了解嗎？
在最近一次面試上不幸被問到了，原以為很熟悉的東西你會發(fā)現(xiàn)你對他根本不熟悉！要說熟悉AJAX的話你需要毫不猶豫回答以下問題：
- 1 不同瀏覽器下ajax實現(xiàn)上的差異
- 2 一次ajax請求過程中有哪幾種狀態(tài)值,不同狀態(tài)值之間含義是什么3 ajax在跨域的情況下會出現(xiàn)什么狀況，以及解決方案4 ajax和后臺數(shù)據(jù)交互時會有什么編碼問題嗎？5 最后可以說說XMLHttpRequest2有什么新東西
怎么樣？各位能輕易的答上以上4點，便可直接忽略此文，若是只能很含糊的說出1、2點的話，便硬著頭皮看我這篇水文吧，呵呵。
由于本文是邊寫邊實驗的，所以可能會有點亂，也可能會有我的唧唧歪歪的思考過程，請各位見諒。
另外，本人水平還很淺，寫的東西必定有問題，若是文中有任何錯誤以及不足，請請一定指出來，多謝！
ajax簡介
水文還是要有水文的樣子，我這里還是需要簡單介紹一番：
ajax全稱：Asynchronous JavaScript and XML 即傳說中的“異步JavaScript和XML”，他是由html、js、Dom等組成，這一杰出的技術可以將笨拙的web界面變成交互性的ajax應用程序。
ajax是一種構建網(wǎng)站的強大方法，他讓我們桌面上只剩一個瀏覽器的想法不再是空談，不再是妄想，雖說不大可能。。。
曾經(jīng)我們的頁面需要等待，等待服務器響應，等待屏幕刷新，等待請求返回和生成新頁面。ajax的出現(xiàn)就讓web頁面的等待變得不那么明顯，雖說只是感覺罷了（跟和美女在一起似的，感覺很爽）。。。
在一般的web應用程序中，用戶提交表單后將整個表單發(fā)送到服務器，服務器將它轉(zhuǎn)發(fā)給后臺腳步（.net,java,php），腳步執(zhí)行結(jié)束后將生成的新的htm頁面返回，這個過程中就會出現(xiàn)我們前面所說的等待：屏幕變得一片空白，等待返回數(shù)據(jù)在重新繪制，這種交互性就跟你和一個美女XXOO每隔10秒才能動一下似的，這種感受，這種交互性怎一個差字了得？？？
ajax基本就是把js對象XMLHttpRequest對象放在web表單和服務器之間，當用戶提交數(shù)據(jù)時只是將數(shù)據(jù)提交給js，然后由js發(fā)送給服務器并獲取返回數(shù)據(jù)修改頁面，過程中不會出現(xiàn)閃爍、消失或者延遲，傳說中的異步請求。。。
XMLHttpRequest
該js對象為ajax的核心，前面說過了XmlHttpRequest是一套可以在Javascript腳本語言中通過http協(xié)議傳送或接收XML及其他數(shù)據(jù)的一套API。XmlHttp最大的用處是可以更新網(wǎng)頁的部分內(nèi)容而不需要刷新整個頁面。
首先我們來創(chuàng)建一個xml對象，需要注意兼容，我們先來個管中窺豹：
- 初始化
- <script type="text/javascript">
- var xmlHttp = false;
- if (window.XMLHttpRequest) {
- try {
- xmlHttp = new XMLHttpRequest();
- } catch (e) {
- xmlHttp = false;
- }
- } else {
- try {
- xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
- } catch (e) {
- try {
- xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
- } catch (ee) {
- xmlHttp = false;
- }
- }
- }
- var s = '';
- </script>
ajax的請求響應模型
ajax基本流程基本如下：
- 1 從web表單中獲取所需數(shù)據(jù)（不用表單也行）
- 2 建立連接url
- 3 打開服務器連接
- 4 設置數(shù)據(jù)返回回調(diào)函數(shù)
- 5 發(fā)送請求
- xmlHttp.open('GET', url, true);
- xmlHttp.onreadystatechange = function (e) {};
- xmlHttp.send(null)
open時，最后一個參數(shù)為true將建立異步連接，false將等待服務器響應
onreadystatechage 可以指定數(shù)據(jù)返回時回調(diào)函數(shù)
send便是發(fā)送請求，參數(shù)便是要傳的參數(shù)，沒有參數(shù)可以填null
我們來寫段后臺程序試試：
- 前端
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- </head>
- <body>
- </body>
- <script type="text/javascript">
- var xmlHttp = false;
- function createXMLHttpRequest() {
- if (window.XMLHttpRequest) {
- try {
- xmlHttp = new XMLHttpRequest();
- } catch (e) {
- xmlHttp = false;
- }
- } else {
- try {
- xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
- } catch (e) {
- try {
- xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
- } catch (ee) {
- xmlHttp = false;
- }
- }
- }
- }
- createXMLHttpRequest();
- if (xmlHttp) {
- xmlHttp.open('GET', 'ajax.ashx', true);
- xmlHttp.onreadystatechange = function (e) {
- var tmp = xmlHttp.responseText;
- var s = '';
- }
- xmlHttp.send();
- }
- var s = '';
- </script>
- </html>
- 服務器端代碼
- <%@ WebHandler Language="C#" Class="ajax" %>
- using System;
- using System.Web;
- public class ajax : IHttpHandler {
- public void ProcessRequest (HttpContext context) {
- context.Response.ContentType = "text/plain";
- string name = context.Request.QueryString["name"] == null ? "" : context.Request.QueryString["name"].ToString();
- context.Response.Write("ajax 返回：" + name);
- }
- public bool IsReusable {
- get {
- return false;
- }
- }
- }
其實我們定義的會函數(shù)會被執(zhí)行三次，狀態(tài)碼依次返回2,3,4，現(xiàn)在我們來看看這個狀態(tài)碼是什么：
- xmlHttp.readyState:
- 0 ：未初始化，還沒有調(diào)用send()方法
- 1 ：載入，已調(diào)用send()方法，正在發(fā)送請求
- 2 ：載入完成，send()方法執(zhí)行完成，已經(jīng)接收到全部響應內(nèi)容
- 3 ：交互，正在解析響應內(nèi)容
- 4 ：完成，響應內(nèi)容解析完成，可以在客戶端調(diào)用了
意思是我們只需要關注4便可以了。
另外幾次請求返回數(shù)據(jù)一致可能是因為瀏覽器緩存原因，請各位自己加上隨機數(shù)喲。
#p#
那些年我們一起跨的域
ajax也會遇到跨域問題的，我們所說的跨域現(xiàn)在一般都是跨域請求數(shù)據(jù)，跨域提交數(shù)據(jù)這種事情好像只有html5的postMessage能做。
跨域請求數(shù)據(jù)的原理是，我們先在我們的頁面上定義一個js函數(shù)，然后以script的方式請求數(shù)據(jù)，數(shù)據(jù)返回的字符串便會調(diào)用我們定義的方法：
- xmlHttp.open('POST', 'http://localhost:47389/html5%E5%92%8Ccss3/ajax.ashx', true);
將前面代碼url處做一個修改后，請求就沒有響應了，我們先看看這個url會輸出什么：
- 跨域
- <%@ WebHandler Language="C#" Class="ajax" %>
- using System;
- using System.Web;
- public class ajax : IHttpHandler {
- public void ProcessRequest (HttpContext context) {
- context.Response.ContentType = "text/plain";
- context.Response.Write("Hello World");
- }
- public bool IsReusable {
- get {
- return false;
- }
- }
- }
我們修改下后臺代碼：
- 修改后
- <%@ WebHandler Language="C#" Class="ajax" %>
- using System;
- using System.Web;
- public class ajax : IHttpHandler {
- public void ProcessRequest (HttpContext context) {
- context.Response.ContentType = "text/html";
- string callback = context.Request.QueryString["callback"] == null ? "callback" : context.Request.QueryString["callback"].ToString();
- context.Response.Write(callback + "();");
- }
- public bool IsReusable {
- get {
- return false;
- }
- }
- }
如此便會返回callback字符，
其實，說到異步跨域問題，我感覺就和ajax關系不大了，我想的是這樣做：
- 跨域后臺
- <%@ WebHandler Language="C#" Class="ajax" %>
- using System;
- using System.Web;
- public class ajax : IHttpHandler {
- public void ProcessRequest (HttpContext context) {
- context.Response.ContentType = "text/html";
- string callback = context.Request.QueryString["callback"] == null ? "callback" : context.Request.QueryString["callback"].ToString();
- context.Response.Write(callback + "({name: '葉小釵'});");
- }
- public bool IsReusable {
- get {
- return false;
- }
- }
- }
- 跨域前臺
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- </head>
- <body>
- </body>
- <script type="text/javascript">
- function callback() {
- alert('函數(shù)回調(diào)');
- }
- var url = 'http://localhost:47389/html5%E5%92%8Ccss3/ajax.ashx';
- var scpt = document.createElement('script');
- scpt.setAttribute('type', 'text/javascript');
- scpt.setAttribute('src', url);
- document.getElementsByTagName("head")[0].appendChild(scpt);
- </script>
- </html>
如此一來，便跨域了！
針對跨域post的處理，一般是以form target指向一個隱藏的iframe實現(xiàn)的，比如我們最初的文件圖片上傳“ajax”的實現(xiàn)。
編碼問題
若是頁面采用utf-8編碼，而服務器采用gbk的話，也許會出現(xiàn)編碼問題，甚至引起莫名其妙的BUG：
這里便讓中文不能解析。
HTML5中的XMLHttpRequest
- 老版本缺點：
- 只支持文本數(shù)據(jù)的傳送，無法用來讀取和上傳二進制文件。
- 傳送和接收數(shù)據(jù)時，沒有進度信息，只能提示有沒有完成。
- 受到"同域限制"（Same Origin Policy），只能向同一域名的服務器請求數(shù)據(jù)。
- .0改進：
- 可以設置HTTP請求的時限。
- 可以使用FormData對象管理表單數(shù)據(jù)。
- 可以上傳文件。
- 可以請求不同域名下的數(shù)據(jù)（跨域請求）。
- 可以獲取服務器端的二進制數(shù)據(jù)。
- 可以獲得數(shù)據(jù)傳輸?shù)倪M度信息。
作為XMLHttpRequest的改進版，IE9都還不支持呢，估計最新的IE10應該沒問題了。
XMLHttpRequest Level2 在功能上有了很大的改進，比如2.0版本可以跨域啦！??！
跨域http請求包含一個origin頭部，他為服務器提供http請求源信息，頭部由瀏覽器保護，不能被程序更改，從本質(zhì)上講他與跨文檔消息通信中消息事件的origin屬性作用相同。
origin頭部不同于早先的refer，后者referer是一個包含路徑的完整url，路由可能包含敏感信息，瀏覽器不一定發(fā)送referer，但一定會發(fā)送origin。
算了，以上這塊是抄的，我完全沒有概念，反正意思是按照他的規(guī)則玩游戲，你就可以跨域！
我這里想要表達的重點其實是以下功能點：
XMLHttpRequest2.0支持了對進度的響應！確實是進度的響應，他讓我們上傳文件產(chǎn)生進度條變成了可能，之前僅有readystatechage一個事件能給用來響應進度，而且該事件并不兼容，如ie中就不會有狀態(tài)3，更別說上傳通信了，這種情況下要實現(xiàn)進度條是一件無比麻煩的事情：
我們來看看現(xiàn)在的事件列表
- loadStart
- 傳輸開始時觸發(fā)
- progress
- 上傳過程中觸發(fā)，他的e屬性會包含很多有用信息哦。
- abort
- 取消上傳時觸發(fā)
- error
- 出錯時觸發(fā)
- load
- 接受完數(shù)據(jù)觸發(fā)
- loadend
- 傳輸結(jié)束觸發(fā)，無論成功與否
若想查看例子請猛擊： 一次上機面試題帶來的感悟【學習的感覺、學習的方法】
此段參考資料：XMLHttpRequest Level 2 使用指南
結(jié)語
今天，我們一起學習了AJAX的相關知識，我感覺還是挺有用的。。。。若是有任何錯誤請指出哦。
