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