精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

原文出處 http://blog.poetries.top/2016/11/26/Ajax-summary

本文主要總結(jié)整理Ajax的一些常用的基礎(chǔ)知識，適合初學者。

一、Ajax簡介、優(yōu)劣勢、應(yīng)用場景以及技術(shù)

• Ajax簡介 :

  • Asynchronous Javascript And XML （異步的
    JavaScript和XML）
  • 它並不是一種單一的技術(shù)，而是有機利用一系列交互式網(wǎng)頁應(yīng)用相關(guān)的技術(shù)所形成的結(jié)合體
  • AJAX 是一種用於創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。通過在後臺與服務(wù)器進行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。

• 優(yōu)點：

  • 頁面無刷新，用戶體驗好。
  • 異步通信，更加快的響應(yīng)能力。
  • 減少冗餘請求，減輕了服務(wù)器負擔
  • 基於標準化的並被廣泛支持的技術(shù)，不需要下載插件或者小程序

• 缺點：

  • ajax幹掉了back按鈕，即對瀏覽器後退機制的破壞。
  • 存在一定的安全問題。
  • 對搜索引擎的支持比較弱。
  • 破壞了程序的異常機制。
  • 無法用URL直接訪問

• ajax應(yīng)用場景

  • 場景 1. 數(shù)據(jù)驗證
  • 場景 2. 按需取數(shù)據(jù)
  • 場景 3. 自動更新頁面

• ajax所包含的技術(shù)

  • ajax並非一種新的技術(shù)，而是幾種原有技術(shù)的結(jié)合體。它由下列技術(shù)組合而成。
  • 使用CSS和XHTML來表示。
  • 使用DOM模型來交互和動態(tài)顯示。
  • 使用XMLHttpRequest來和服務(wù)器進行異步通信。
  • 使用javascript來綁定和調(diào)用。

在上面幾中技術(shù)中，除了XmlHttpRequest對象以外，其它所有的技術(shù)都是基於web標準並且已經(jīng)得到了廣泛使用的，XMLHttpRequest雖然目前還沒有被W3C改採納，但是它已經(jīng)是一個事實的標準，因為目前幾乎所有的主流瀏覽器都支持它

XMLHttpRequest對象的屬性

XMLHttpRequest對象的方法

二、創(chuàng)建ajax的步驟

Ajax的原理簡單來說通過XmlHttpRequest對象來向服務(wù)器發(fā)異步請求，從服務(wù)器獲得數(shù)據(jù)，然後用javascript來操作DOM而更新頁面。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請求數(shù)據(jù)。原生創(chuàng)建ajax可分為以下四步

1、創(chuàng)建XMLHttpRequest對象

Ajax的核心是XMLHttpRequest對象，它是Ajax實現(xiàn)的關(guān)鍵，發(fā)送異步請求、接受響應(yīng)以及執(zhí)行回調(diào)都是通過它來完成

所有現(xiàn)代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內(nèi)建 XMLHttpRequest 對象。

• 創(chuàng)建 XMLHttpRequest對象的語法：

  var xhr = new XMLHttpRequest();

• 老版本的 Internet Explorer（IE5 和 IE6）使用ActiveX 對象：

  var xhr = new ActiveXObject("Microsoft.XMLHTTP");

  為了應(yīng)對所有的現(xiàn)代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest對象。如果支持，則創(chuàng)建XMLHttpRequest對象。如果不支持，則創(chuàng)建ActiveXObject：

• 兼容各個瀏覽器的創(chuàng)建Ajax的工具函數(shù)

function createRequest (){    try {        xhr = new XMLHttpRequest();    }catch (tryMS){        try {            xhr = new ActiveXObject("Msxm12.XMLHTTP");        } catch (otherMS) {            try {                xhr = new ActiveXObject("Microsoft.XMLHTTP");            }catch (failed) {                xhr = null;            }        }    }    return xhr;}

2、準備請求

• 初始化該XMLHttpRequest對象，接受三個參數(shù)：

  xhr.open(method,url,async);

• 第一個參數(shù)表示請求類型的字符串，其值可以是GET或者POST。
• GET請求：

  xhr.open("GET",demo.php?name=tsrot&age=24,true);

• POST請求：

  xhr.open("POST",demo.php,true);

• 第二個參數(shù)是要作為請求發(fā)送目標的URL。
• 第三個參數(shù)是true或false，表示請求是以異步還是同步的模式發(fā)出。（默認為true，一般不建議為false）
  • false：同步模式發(fā)出的請求會暫停所有javascript代碼的執(zhí)行，知道服務(wù)器獲得響應(yīng)為止，如果瀏覽器在連接網(wǎng)絡(luò)時或者在下載文件時出了故障，頁面就會一直掛起。
  • true：異步模式發(fā)出的請求，請求對象收發(fā)數(shù)據(jù)的同時，瀏覽器可以繼續(xù)加載頁面，執(zhí)行其他javascript代碼

3、發(fā)送請求

xhr.send();

一般情況下，使用Ajax提交的參數(shù)多是些簡單的字符串，可以直接使用GET方法將要提交的參數(shù)寫到open方法的url參數(shù)中，此時send方法的參數(shù)為null或為空。

• GET請求：

  xhr.open("GET",demo.php?name=tsrot&age=24,true);xhr.send(null);

• POST請求：
  如果需要像 HTML 表單那樣 POST 數(shù)據(jù)，請使用 setRequestHeader()來添加 HTTP 頭。然後在send()方法中規(guī)定您希望發(fā)送的數(shù)據(jù)：

  xhr.open("POST",demo.php,true);xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");xhr.sen

4、處理響應(yīng)

xhr.onreadystatechange = function(){    if(xhr.readyState == 4 && xhr.status == 200){        console.log(xhr.responseText);    }}

• onreadystatechange ：當處理過程發(fā)生變化的時候執(zhí)行下面的函數(shù)

• readyState ：ajax處理過程

  • 0：請求未初始化（還沒有調(diào)用 open()）。
  • 1：請求已經(jīng)建立，但是還沒有發(fā)送（還沒有調(diào)用 send()）。
  • 2：請求已發(fā)送，正在處理中（通常現(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭）。
  • 3：請求在處理中；通常響應(yīng)中已有部分數(shù)據(jù)可用了，但是服務(wù)器還沒有完成響應(yīng)的生成。
  • 4：響應(yīng)已完成；您可以獲取並使用服務(wù)器的響應(yīng)了。

• status屬性：

  • 200:"OK"
  • 404: 未找到頁面

• responseText：獲得字符串形式的響應(yīng)數(shù)據(jù)

• responseXML：獲得 XML形式的響應(yīng)數(shù)據(jù)
• 返回值一般為json字符串，可以用JSON.parse(xhr.responseText)轉(zhuǎn)化為JSON對象

HTTP狀態(tài)碼

5、完整例子

var xhr = false; if(XMLHttpRequest){    xhr = new XMLHttpRequest(); }else{    xhr = new ActiveXObject("Microsoft.XMLHTTP");};if(xhr) {//如果xhr創(chuàng)建失敗，還是原來的false   xhr.open("GET","./data.json",true);   xhr.send();   xhr.onreadystatechange = function(){    if(xhr.readyState == 4 && xhr.status == 200){        console.log(JSON.parse(xhr.responseText).name);    }    }}

• data.json

{    "name":"tsrot",    "age":24}

• 這個過程是一定要記在腦子裡的

function ajax(url, success, fail){    // 1. 創(chuàng)建連接    var xhr = null;    xhr = new XMLHttpRequest()    // 2. 連接服務(wù)器    xhr.open('get', url, true)    // 3. 發(fā)送請求    xhr.send(null);    // 4. 接受請求    xhr.onreadystatechange = function(){        if(xhr.readyState == 4){            if(xhr.status == 200){                success(xhr.responseText);            } else { // fail                fail && fail(xhr.status);            }        }    }}

三、 jQuery中的Ajax

• jQuery中的ajax封裝案例

//ajax請求後臺數(shù)據(jù)var btn =  document.getElementsByTagName("input")[0];btn.onclick = function(){    ajax({//json格式        type:"post",        url:"post.php",        data:"username=poetries&pwd=123456",        asyn:true,        success:function(data){            document.write(data);        }    });}//封裝ajaxfunction ajax(aJson){    var ajx = null;    var type = aJson.type || "get";    var asyn = aJson.asyn || true;    var url = aJson.url;        // url 接收 傳輸位置    var success = aJson.success;// success 接收 傳輸完成後的回調(diào)函數(shù)    var data = aJson.data || '';// data 接收需要附帶傳輸?shù)臄?shù)據(jù)    if(window.XMLHttpRequest){//兼容處理        ajx = new XMLHttpRequest();//一般瀏覽器    }else    {        ajx = new ActiveXObject("Microsoft.XMLHTTP");//IE6+    }    if (type == "get" && data)    {        url +="/?"+data+"&"+Math.random();    }    //初始化ajax請求    ajx.open( type , url , asyn );    //規(guī)定傳輸數(shù)據(jù)的格式    ajx.setRequestHeader('content-type','application/x-www-form-urlencoded');    //發(fā)送ajax請求（包括post數(shù)據(jù)的傳輸）    type == "get" ?ajx.send():ajx.send(aJson.data);    //處理請求    ajx.onreadystatechange = function(aJson){    if(ajx.readState == 4){        if (ajx.status == 200 && ajx.status<300)//200是HTTP 請求成功的狀態(tài)碼        {            //請求成功處理數(shù)據(jù)            success && success(ajx.responseText);        }else{            alert("請求出錯"+ajx.status);        }    }    }

jQuery中的Ajax的一些方法

jquery對Ajax操作進行了封裝，在jquery中的$.ajax()方法屬於最底層的方法，第2層是load()、$.get()、$.post();第3層是$.getScript()、$.getJSON()，第2層使用頻率很高

load()方法

• load()方法是jquery中最簡單和常用的ajax方法，能載入遠程HTML代碼並插入DOM中 結(jié)構(gòu)為：load(url,[data],[callback])
  • 使用url參數(shù)指定選擇符可以加載頁面內(nèi)的某些元素 load方法中url語法：url selector 注意：url和選擇器之間有一個空格
• 傳遞方式
  • load()方法的傳遞方式根據(jù)參數(shù)data來自動指定，如果沒有參數(shù)傳遞，則採用GET方式傳遞，反之，採用POST
• 回調(diào)參數(shù)
  • 必須在加載完成後才執(zhí)行的操作，該函數(shù)有三個參數(shù) 分別代表請求返回的內(nèi)容、請求狀態(tài)、XMLHttpRequest對象
  • 只要請求完成，回調(diào)函數(shù)就會被觸發(fā)

$("#testTest").load("test.html",function(responseText,textStatus,XMLHttpRequest){    //respnoseText 請求返回的內(nèi)容    //textStatus 請求狀態(tài) ：sucess、error、notmodified、timeout    //XMLHttpRequest })

• load方法參數(shù)

$.get()和$.post()方法

load()方法通常用來從web服務(wù)器上獲取靜態(tài)的數(shù)據(jù)文件。在項目中需要傳遞一些參數(shù)給服務(wù)器中的頁面，那麼可以使用$.get()和$.post()或$.ajax()方法

• 注意：$.get()和$.post()方法是jquery中的全局函數(shù)

• $.get()方法

  • $.get()方法使用GET方式來進行異步請求
  • 結(jié)構(gòu)為：$.get(url,[data],callback,type)
    • 如果服務(wù)器返回的內(nèi)容格式是xml文檔，需要在服務(wù)器端設(shè)置Content-Type類型 代碼如下：header("Content-Type:text/xml:charset=utf-8") //php
• $.get()方法參數(shù)解析

• $.post()方法

  • 它與$.get()方法的結(jié)構(gòu)和使用方式相同，有如下區(qū)別
    • GET請求會將參數(shù)跟張乃URL後進行傳遞，而POST請求則是作為Http消息的實體內(nèi)容發(fā)送給web服務(wù)器，在ajax請求中，這種區(qū)別對用戶不可見
      • GET方式對傳輸數(shù)據(jù)有大小限制（通常不能大於2KB），而使用POST方式傳遞的數(shù)據(jù)量要比GET方式大得多（理論不受限制）
      • GET方式請求的數(shù)據(jù)會被瀏覽器緩存起來，因此其他人可以從瀏覽器的歷史紀錄中讀取這些數(shù)據(jù)，如：賬號、密碼。在某種情況下，GET方式會帶來嚴重的安全問題，而POST相對來說可以避免這些問題
      • GET和POST方式傳遞的數(shù)據(jù)在服務(wù)端的獲取也不相同。在PHP中，GET方式用$_GET[]獲取；POST方式用$_POST[]獲取;兩種方式都可用$_REQUEST[]來獲取

• 總結(jié)

  • 使用load()、$.get()和$.post()方法完成了一些常規(guī)的Ajax程序，如果還需要複雜的Ajax程序，就需要用到$.ajax()方式

$.ajax()方法

• $.ajax()方法是jquery最底層的Ajax實現(xiàn)，它的結(jié)構(gòu)為$.ajax(options)
• 該方法只有一個參數(shù)，但在這個對象裡包含了$.ajax()方式所需要的請求設(shè)置以及回調(diào)函等信息，參數(shù)以key / value存在，所有參數(shù)都是可選的
• $.ajax()方式常用參數(shù)解析

• 參考
  • 鋒利的jQuery