主頁(yè) > 知識(shí)庫(kù) > AJAX機(jī)制詳解以及跨域通信

AJAX機(jī)制詳解以及跨域通信

熱門(mén)標(biāo)簽:外呼系統(tǒng)獲取客戶手機(jī)號(hào) 徐州電銷(xiāo)卡外呼系統(tǒng)供應(yīng)商 科智聯(lián)智能電銷(xiāo)機(jī)器人 百靈鳥(niǎo) 襄陽(yáng)外呼系統(tǒng)接口 老虎郵局地圖標(biāo)注點(diǎn) 青海醫(yī)療智能外呼系統(tǒng)怎么樣 上海浦東百度地圖標(biāo)注中心注冊(cè) 目標(biāo)三維地圖標(biāo)注

1.Ajax

1.1.Ajax簡(jiǎn)介
  Ajax簡(jiǎn)介這一部分我們主要是談一下ajax的起源,ajax是什么?因?yàn)檫@些是跟技術(shù)無(wú)關(guān)的。所以,大多細(xì)節(jié)都是一筆帶過(guò)。

  Ajax的起源?

  Ajax一詞源于2005年 Jesse James Garrett發(fā)表的一篇題為"Ajax:A new Approach to Web Applications".他在這篇文       章中介紹了一種新技術(shù),用他的話說(shuō),就是Ajax :Asynchronous JavaScript +XML的縮寫(xiě)。

  Ajax是什么?

  這種新技術(shù)的主要目的就是為了使前端網(wǎng)頁(yè)能夠向服務(wù)器請(qǐng)求額外的數(shù)據(jù)而不需要卸載頁(yè)面。自從這種技術(shù)出現(xiàn)以后,微軟率先引入XHRt對(duì)象(ajax能夠?qū)崿F(xiàn)的核心對(duì)象),然后其他瀏覽器相繼實(shí)現(xiàn)這種技術(shù)。總而言之,ajax就是一種能異步通信的技術(shù)。

1.2.Ajax的核心對(duì)象---XMLHttpRequest
  因?yàn)镮E5是最先引入這個(gè)XHR對(duì)象的,當(dāng)時(shí)并沒(méi)有事實(shí)上的標(biāo)準(zhǔn)。在IE中有三種不同的XHR對(duì)象版本:MSXML2.XMLHttp,MSXML2.XMLHttp.3.0和MSXML2.XMLHttp.6.0;

根據(jù)這三種版本號(hào),在IE中創(chuàng)建一個(gè)XHR對(duì)象如下:

function createXHR() { //IE7之前的版本通過(guò)這種方式
  var versions = [
    'MSXML2.XMLHttp',
    'MSXML2.XMLHttp.3.0',
    'MSXML2.XMLHttp.6.0'
  ];
  var xhr = null;
  for (var item in versions) {
    try {
      xhr = new ActiveXObject(item); //若不存在該版本,可能會(huì)出錯(cuò)
      if (xhr) break;
    } catch (e) {
      //一般對(duì)這種錯(cuò)誤不做處理
    }
  }
  return xhr;
}
在IE引入這個(gè)對(duì)象之后,其他瀏覽器廠商也相繼跟隨,這時(shí)候XHR對(duì)象成為事實(shí)上的標(biāo)準(zhǔn)!

跨瀏覽器創(chuàng)建XHR對(duì)象;

function createXHttpRequest() {
  if (typeof XMLHttpRequest !== 'undefined') { //不要用 if(XMLHttpRequest){}這種形式,
    return new XMLHttpRequest();              //如果是這種形式在找不到XMLHttpRequest函數(shù)的情況下,會(huì)報(bào)錯(cuò)。
} else if (typeof ActiveXObject !== 'undefined') {
         return createXHR(); //用到剛才我們創(chuàng)建的函數(shù)
  } else { throw new Error('不能創(chuàng)建XMLHttpRequest對(duì)象'); } }

1.2.XMLHttpRequest的用法
XMLHttpRequest對(duì)象的函數(shù)有6個(gè):

open("method",url,boolean);
              //該方法的三個(gè)參數(shù),分別為----提交方式"get"或者"post"等 
                // url是相對(duì)于執(zhí)行代碼的當(dāng)前頁(yè)面的路徑(使用絕對(duì)路徑是允許的)是否異步 
send();    
           //這個(gè)方法接收一個(gè)參數(shù),這個(gè)參數(shù)是作為請(qǐng)求主體發(fā)送的數(shù)據(jù), 
           //說(shuō)明: 如果有參數(shù),請(qǐng)使用post方式提交 使用方式如下,send("user="+username+"pwd="+password);
           //如果沒(méi)有參數(shù),為了兼容性考慮,必須在參數(shù)中傳入null,即send(null);該方式使用get方式提交

abort();       //取消當(dāng)前響應(yīng),關(guān)閉連接并且結(jié)束任何未決的網(wǎng)絡(luò)活動(dòng)。

          //這個(gè)方法把 XMLHttpRequest 對(duì)象重置為 readyState 為 0 的狀態(tài),并且取消所有未決             //的網(wǎng)絡(luò)活動(dòng)。例如,如果請(qǐng)求用了太長(zhǎng)時(shí)間,而且響應(yīng)不再必要的時(shí)候,可以調(diào)用這個(gè)方法。

getResponseHeader()   

          //返回指定的 HTTP 響應(yīng)頭部的值。其參數(shù)是要返回的 HTTP 響應(yīng)頭部的名稱??梢允褂萌?            //何大小寫(xiě)來(lái)制定這個(gè)頭部名字,和響應(yīng)頭部的比較是不區(qū)分大小寫(xiě)的。

          //該方法的返回值是指定的 HTTP 響應(yīng)頭部的值,如果沒(méi)有接收到這個(gè)頭部或者 readyStat             //e 小于 3 則為空字符串。如果接收到多個(gè)有指定名稱的頭部,這個(gè)頭部的值被連接起來(lái)并             //返回,使用逗號(hào)和空格分隔開(kāi)各個(gè)頭部的值。

getAllResponseHeaders()       

          //把 HTTP 響應(yīng)頭部作為未解析的字符串返回。

          //如果 readyState 小于 3,這個(gè)方法返回 null。否則,它返回服務(wù)器發(fā)送的所有 HTTP 響應(yīng)的

          //頭部。頭部作為單個(gè)的字符串返回,一行一個(gè)頭部。每行用換行符 "\r\n" 隔開(kāi)。

setRequestHeader()

         //向一個(gè)打開(kāi)但未發(fā)送的請(qǐng)求設(shè)置或添加一個(gè) HTTP 請(qǐng)求。

  XMLHttpRequest對(duì)象的屬性有5個(gè):

屬性 描述
responseText 作為響應(yīng)主題被返回的文本
responseXML 如果相響應(yīng)的是text/html或者application/xml類(lèi)型的話,這個(gè)屬性將保存著響應(yīng)的XML文檔
status http的響應(yīng)狀態(tài)碼
statusText http狀態(tài)的說(shuō)明
readyState XMLHttpRequest對(duì)象的狀態(tài)位 0 1 2 3 4 分別表示5種狀態(tài)
timeout 設(shè)置超時(shí)時(shí)間,單位是ms.目前只有IE8+支持---尚未標(biāo)準(zhǔn)化(不推薦使用)

  XMLHttpRequest對(duì)象的事件屬性onReadyStateChange:-----所有瀏覽器兼容

  該屬性監(jiān)聽(tīng)的是  XMLHttpRequest對(duì)象的readyState屬性的變化:

  readyState的變化分別對(duì)應(yīng)如下?tīng)顟B(tài):

  0:尚未初始化。未調(diào)用open()之前

  1:?jiǎn)?dòng)。調(diào)用open()之后,但是未調(diào)用send();

  2:發(fā)送。調(diào)用send()但是尚未得到響應(yīng)。

  3:正在接收數(shù)據(jù)。剛接收到響應(yīng)數(shù)據(jù)開(kāi)始到接收完成之前。

  4: 完成。數(shù)據(jù)接收完成。

xhr.onreadystatechange = function () {
 if (xhr.readyState == 4) {
  if (xhr.status >= 200  xhr.status == 300 || xhr.status == 304) {
   alert(xhr.responseText);
   //處理接收的數(shù)據(jù)
  } else {
   //請(qǐng)求失敗,未得到響應(yīng)數(shù)據(jù)
  }
 }
}; //補(bǔ)充說(shuō)明:注冊(cè)事件必須發(fā)生在send()以前

XMLHttpRequest對(duì)象的事件屬性ontimeout -----僅限IE8+,不過(guò)最新的主流高版本瀏覽器也已經(jīng)實(shí)現(xiàn)(不推薦使用)

xhr.timeout=1000;//一秒鐘

xhr.ontimeout=functon(){
  //處理代碼
  ......
}
  這種使用方式有個(gè)問(wèn)題需要注意,就是在超時(shí)之后,在接收到數(shù)據(jù)后仍然會(huì)觸發(fā)onreadystatechange事件,如果在處理onreadychange事件時(shí)訪問(wèn)xhr.status屬性,會(huì)出錯(cuò)。所以我們?cè)谠L問(wèn)該屬性時(shí)需要做一下try{}catch處理。但是,因?yàn)檫@個(gè)屬性暫不兼容,所有我們就不重點(diǎn)講了。

XMLHttpRequest對(duì)象的事件屬性onload onerror onloadstar onbort onprogress:

                                                                                                   -----非IE瀏覽器和IE 10+已實(shí)現(xiàn)

       onload在IE8以上可以實(shí)現(xiàn),大部分事件根據(jù)readySate變化均可以實(shí)現(xiàn),以上事件只不過(guò)是方便使用而已。

  onload和onprogress 這兩種事件分別對(duì)應(yīng)著readyState=4和readyState=3的情況,使用方式分別如下:

   xhr.onload= function (event) {
      //event只包含一個(gè)屬性 event.target=xhr;使用方式只是在readyState=4時(shí)差不多..
    }
   xhr.onprogress=function(event){
     //event除了包含event.target=xhr之外,還包含三種屬性
     //lengthComputale(進(jìn)度信息是否可用),position(已接受字節(jié)數(shù))和totalSize(總字節(jié)數(shù)).
     
   }


補(bǔ)充:有些事件均可以根據(jù)readyState的狀態(tài)進(jìn)行模擬。只有有的瀏覽器進(jìn)行了方便化處理而已。  

3.單向跨域技術(shù) ---CORS
 今天我們這里講的是客戶端網(wǎng)頁(yè)向不在同一個(gè)域的服務(wù)器請(qǐng)求數(shù)據(jù)..客戶端在收到返回的數(shù)據(jù)時(shí)時(shí),用回調(diào)函數(shù)處理數(shù)據(jù)。

即:

 1. 客戶端向域外服務(wù)器請(qǐng)求數(shù)據(jù)

 2.服務(wù)器得到響應(yīng)后向客戶端發(fā)送數(shù)據(jù)。

 3.客戶端根據(jù)返回的數(shù)據(jù)執(zhí)行回調(diào)函數(shù).

 我知道不同域下的iframe也可以進(jìn)行通信,而且這也是一種跨域通信技術(shù)。但是,這種iframe頁(yè)面之間的雙向通信,我們?cè)谙乱粋€(gè)專題里面講解,今天主要講的是單向通信。

3.1.CORS跨域請(qǐng)求的原理
在用xhr(XMLHttpRequest)對(duì)象或者xdr(XDomainRequest)對(duì)象,發(fā)送域外請(qǐng)求時(shí),大概的實(shí)現(xiàn)原理如下圖:

 3.2.IE中CORS技術(shù)的實(shí)現(xiàn)
 IE8引入了一個(gè)XDR類(lèi)型,這個(gè)類(lèi)型與XHR基本類(lèi)似,但是其能實(shí)現(xiàn)安全可靠地跨域通信。

 XHD的特點(diǎn):

 1.cookie不會(huì)隨請(qǐng)求發(fā)送,也不會(huì)隨響應(yīng)返回。

 2.只能設(shè)置請(qǐng)求頭部中的Content-Type片段。

 3.不能訪問(wèn)響應(yīng)頭部信息。

 4.只是支持get和post請(qǐng)求。

 XDR支持onload和onerror事件屬性,且其使用方式和XHR基本一致,不過(guò)其open()只接收兩個(gè)參數(shù),默認(rèn)是異步的。


var xdr = new XDomainRequest();
xdr.onload = function () {
 //處理xdr.responseText
}
xdr.onerror = function () {
};
xdr.open('get', '絕對(duì)url');
xhr.send(null);


3.3.跨瀏覽器的CORS技術(shù)實(shí)現(xiàn)

在標(biāo)準(zhǔn)瀏覽器中XHR對(duì)象就已經(jīng)可以自動(dòng)實(shí)現(xiàn)跨域請(qǐng)求,但是XHR和XDR的不同之處:

1.XHR可以在設(shè)置 withCredentials =true時(shí),瀏覽器會(huì)把cookie發(fā)送給服務(wù)器,服務(wù)器此時(shí)通過(guò)設(shè)置頭部Access-Control-Allow-Credentials:true時(shí)來(lái)響應(yīng)。如果,服務(wù)器不設(shè)置這個(gè)屬性,則瀏覽器會(huì)觸發(fā)onerror事件。

2.在回調(diào)函數(shù)中可以訪問(wèn)status和statusText屬性,而且支持同步請(qǐng)求。

 以下是實(shí)現(xiàn)跨域請(qǐng)求的代碼:

function createCrosRequest(method, url) {
 var xhr = new XMLHttpRequest(); //IE7+
 if ('withCredentials' in xhr) { //IE8-IE9瀏覽器沒(méi)有這個(gè)屬性
  xhr.open(method, url, true);
 } else if (typeof XDomainRequest != 'undefined') {
  xhr = new XDomainRequest();  //IE
  xhr.open(method, url)
 }
 return xhr;
}
var request=CreateCrosRequest("get","url");
if(request){
 request.onload=function(){
 //處理request.responseText;
 }
 request.send(null);
}

4.單向跨域技術(shù) ---JSONP技術(shù)

 JSONP技術(shù)比較簡(jiǎn)單,其主要原理主要是利用script標(biāo)簽的特性。

 script標(biāo)簽和image標(biāo)簽一樣,它們都具有src屬性,而且這個(gè)屬性是可跨域的。

因?yàn)閟cript標(biāo)簽返回的都是js代碼,且該js代碼會(huì)自動(dòng)執(zhí)行。所以,如果我們請(qǐng)求返回的數(shù)據(jù)也是類(lèi)似一段js代碼的形式,豈不是就可以實(shí)現(xiàn)在腳本加載完畢后自動(dòng)執(zhí)行。

如果我們的請(qǐng)求,返回的數(shù)據(jù)是 callback + '(' + json + ')'; 這種形式的數(shù)據(jù), 那么在腳本加載完畢之后也就能自動(dòng)執(zhí)行callback()函數(shù)了.

4.1.客戶端寫(xiě)法

!DOCTYPE html>
html>
head>
  meta http-equiv="content-type" content="text/html; charset=utf-8">
/head>
body>
    button id="button">請(qǐng)求數(shù)據(jù)/button>
/body>
script>
  window.onload=function(){
    var button=document.getElementById("ibutton");
    function callback(data){
      //處理data
    }
    button.onclick=function(){
      var script=document.createElement("script");
      script="http://www.sasd.com/json/?callbak=callback"; 
      document.body.insertBefore(script,document.body.firstChild);//加載腳本
      
    }
    
  }
/script>
/html>

   1.客戶端將回調(diào)函數(shù)名寫(xiě)入Script>腳本的url參數(shù)中。

   2.script加載的時(shí)候會(huì)發(fā)送跨域請(qǐng)求。

4.2.服務(wù)器端

 1.通過(guò)url得到函數(shù)名,命名為callback

 2.將請(qǐng)求的數(shù)據(jù)作為函數(shù)的參數(shù)格式轉(zhuǎn)化json格式,命名為。

 3.將返回結(jié)果拼接為 callback+"("+json+")"; --------返回的就是填充式的數(shù)據(jù),這段數(shù)據(jù)在腳本中會(huì)自動(dòng)執(zhí)行。

 4.返回?cái)?shù)據(jù).

 4.3.JSONP技術(shù)的缺點(diǎn)

 1.因?yàn)槭峭ㄟ^(guò)url傳參數(shù),所以請(qǐng)求只能是get類(lèi)型的。

 2.script>目前只有onload屬性事件,onerror還沒(méi)有統(tǒng)一化,如果加載腳本出錯(cuò),客戶端很難得到反饋。

 3.所請(qǐng)求數(shù)據(jù)的站點(diǎn)必須是可信任的,如果返回的數(shù)據(jù)段中注入的有惡意的代碼,危害較大,且難以發(fā)現(xiàn)。

以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。

您可能感興趣的文章:
  • AJAX簡(jiǎn)單異步通信實(shí)例分析
  • ajax實(shí)現(xiàn)遠(yuǎn)程通信
  • 快速獲取Ajax通信對(duì)象的方法

標(biāo)簽:辛集 紅河 咸寧 荊州 佛山 揭陽(yáng) 商洛 股票

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《AJAX機(jī)制詳解以及跨域通信》,本文關(guān)鍵詞  AJAX,機(jī)制,詳解,以及,跨域,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《AJAX機(jī)制詳解以及跨域通信》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于AJAX機(jī)制詳解以及跨域通信的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章