亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Ajax的使用代碼解析

 更新時(shí)間:2016年11月30日 09:12:03   作者:y丶卿  
Ajax被認(rèn)為是(Asynchronous(異步) JavaScript And Xml的縮寫(xiě))。現(xiàn)在,允許瀏覽器與服務(wù)器通信而無(wú)須刷新當(dāng)前頁(yè)面的技術(shù)都被叫做Ajax

Ajax 簡(jiǎn)介

Ajax被認(rèn)為是(Asynchronous(異步) JavaScript And Xml的縮寫(xiě))?,F(xiàn)在,允許瀏覽器與服務(wù)器通信而無(wú)須刷新當(dāng)前頁(yè)面的技術(shù)都被叫做Ajax.

同步是指:發(fā)送方發(fā)出數(shù)據(jù)后,等接收方發(fā)回響應(yīng)以后才發(fā)下一個(gè)數(shù)據(jù)包的通訊方式。 

異步是指:發(fā)送方發(fā)出數(shù)據(jù)后,不等接收方發(fā)回響應(yīng),接著發(fā)送下個(gè)數(shù)據(jù)包的通訊方式 。

通常不用刷新網(wǎng)頁(yè)而與服務(wù)器通訊的方法:

  • Flash 框架
  • Frameset:如果使用一組框架構(gòu)造了一個(gè)網(wǎng)頁(yè),可以只更新其中一個(gè)框架,而不必驚動(dòng)整個(gè)頁(yè)面
  • XMLHttpRequest:該對(duì)象是對(duì) JavaScript 的一個(gè)擴(kuò)展,可使網(wǎng)頁(yè)與服務(wù)器進(jìn)行通信。是創(chuàng)建 Ajax 應(yīng)用的最佳選擇。實(shí)際上通常把 Ajax 當(dāng)成XMLHttpRequest(XHR) 對(duì)象的代名詞

ajax基本使用

  ajax在我們的開(kāi)發(fā)中是必須使用的一個(gè)技術(shù),ajax即異步的javascript和xml但是現(xiàn)在我們通常使用json來(lái)完成數(shù)據(jù)的交互,ajax職責(zé)很單一就是數(shù)據(jù)的交互,發(fā)送數(shù)據(jù)接收數(shù)據(jù)是它的核心功能也是唯一的功能。

  ajax的實(shí)現(xiàn)依賴XMLHttpRequest,它的基本使用如下:

var xhr;
window.XMLHttpRequest?xhr = new XMLHttpRequest():xhr = new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("get","demo!register.action?name=zt&age=23",true);
xhr.send(null);
xhr.onreadystatechange = function(){
  if(xhr.readyState==4&&xhr.status==200){
   alert(JSON.parse(xhr.responseText));
  }
}

  ajax的職責(zé)就是發(fā)送數(shù)據(jù)和接收數(shù)據(jù)我們基本使用流程為:

  1.獲取一個(gè)XMLHttpRequest對(duì)象

  2.發(fā)送數(shù)據(jù)

  3.接收處理服務(wù)器返回的數(shù)據(jù)

  根據(jù)上面的步驟來(lái)實(shí)現(xiàn)一個(gè)異步請(qǐng)求數(shù)據(jù)的過(guò)程,首先獲取一個(gè)xhr對(duì)象,在現(xiàn)代瀏覽器中我們可以直接通過(guò)實(shí)例化來(lái)獲取一個(gè)xhr對(duì)象:var xhr = new XMLHttpRequest();在IE5、IE6中我們必須使用ActiveXObject來(lái)獲取xhr對(duì)象:var xhr = new ActiveXObject("Microsoft.XMLHTTP")。

  此時(shí)我們已經(jīng)得到了xhr對(duì)象接下來(lái)就是發(fā)送數(shù)據(jù),通過(guò)xhr.open()方法來(lái)執(zhí)行發(fā)送數(shù)據(jù)的方式,xhr.open()可以接收5個(gè)參數(shù),我們經(jīng)常使用的是前三個(gè):

xhr.open(arg1,arg2,arg3)

  arg1表示請(qǐng)求數(shù)據(jù)的方式一般為get或者post

  arg2表示請(qǐng)求的服務(wù)器地址

  arg3表示本次請(qǐng)求是同步還是異步,ajax的突出特點(diǎn)就是異步所以我們一般都是使用異步的方式第三個(gè)參數(shù)設(shè)置為true(true表示進(jìn)行異步請(qǐng)求false表示進(jìn)行同步請(qǐng)求)

  xhr.open()方法只是準(zhǔn)備一個(gè)請(qǐng)求,在調(diào)用open之后并不會(huì)和服務(wù)器進(jìn)行通訊,而是在調(diào)用send()函數(shù)之后才會(huì)和服務(wù)器開(kāi)始通訊,send()函數(shù)的參數(shù)將作為請(qǐng)求體發(fā)送到服務(wù)端。如果我們?cè)趏pen()函數(shù)中指定請(qǐng)求的方式為get通常我們將send()設(shè)置為xhr.send(null),如果我們希望通過(guò)請(qǐng)求體發(fā)送數(shù)據(jù)則要將open()函數(shù)的請(qǐng)求方式設(shè)置為post同時(shí)將我們需要發(fā)送的數(shù)據(jù)作為send()函數(shù)的參數(shù):xhr.send(param),在調(diào)用send()函數(shù)之后,和服務(wù)器的通訊就開(kāi)始了。

  對(duì)xhr的所有的設(shè)置都應(yīng)該在send()函數(shù)之前設(shè)置好:

 xhr.open(...);
 xhr.setRequestHeader(...);
 xhr.overrideMimeType(...);
 xhr.onreadystatechange = function(){...};
 xhr.send(...);

   但是由于xhr.onreadystatechange是一個(gè)事件,所以其放在send()之后也是可以執(zhí)行的,出于易讀性我們一般都將對(duì)xhr的設(shè)置放在send()函數(shù)之前。

  在send()之后可以通過(guò)xhr.readyState和xhr.status的來(lái)監(jiān)測(cè)本次請(qǐng)求的狀態(tài),如果滿足xhr.readyState==4&&xhr.status==200則本次請(qǐng)求成功:

在請(qǐng)求成功時(shí)我們可以通過(guò)xhr.responseText來(lái)獲取服務(wù)器返回的數(shù)據(jù),需要注意xhr.responseText是一個(gè)字符串。

ajax常用API

  上面的請(qǐng)求過(guò)程是一個(gè)最基本的請(qǐng)求過(guò)程xhr對(duì)象還有幾個(gè)經(jīng)常使用的方法分別為xhr.abort()、xhr.setRequestHeader()、xhr.overrideMimeType()。

  xhr.abort():終止一個(gè)請(qǐng)求,直接調(diào)用即可不需要設(shè)置參數(shù)

xhr.abort()

  xhr.setRequestHeader():設(shè)置發(fā)送的請(qǐng)求頭:

xhr.setRequestHeader("Content-Type","application/json; charset=utf-8")

  第一個(gè)參數(shù)表示要設(shè)置的header,第二個(gè)參數(shù)表示要設(shè)置的header的值。xhr.setRequestHeader()必須在xhr.open()和xhr.send()之間,否則會(huì)拋出異常,同時(shí)xhr.setRequestHeader()的第一個(gè)參數(shù)是對(duì)大小寫(xiě)不敏感的只要我們字母寫(xiě)的對(duì)就能夠設(shè)置成功,但是出于易讀性我們要設(shè)置為正確的格式。

  xhr.overrideMimeType():重寫(xiě)響應(yīng)頭的Content-Type:

xhr.overrideMimeType('text/plain; charset=utf-8')

   xhr.overrideMimeType()同樣要設(shè)置在xhr.send()之前。

JSON.parse()和JSON.stringify()使用

  JSON.parse()用來(lái)將一個(gè)對(duì)象轉(zhuǎn)換為字符串,JSON.stringify()用來(lái)將一個(gè)字符串轉(zhuǎn)換為對(duì)象。在利用ajax進(jìn)行數(shù)據(jù)交互的過(guò)程中返回的數(shù)據(jù)多數(shù)的時(shí)候是一個(gè)JSON格式的字符串,如果服務(wù)器給我們返回了數(shù)據(jù)此時(shí)我們就需要利用JSON.parse()來(lái)解析返回的數(shù)據(jù)(xhr.responseText即為服務(wù)器返回的數(shù)據(jù)):

xhr.onreadystatechange = function(){
  if(xhr.readyState==4&&xhr.status==200){
 var data = JSON.parse(xhr.responseText);
  }
}

   在使用post方式發(fā)送數(shù)據(jù)的過(guò)程中,如果不是文件上傳一般情況下傳輸?shù)囊彩且粋€(gè)JSON數(shù)據(jù),要想能夠成功的發(fā)送到后臺(tái)就需要用JSON.stringify()來(lái)將JSON對(duì)象來(lái)轉(zhuǎn)換為一個(gè)字符串,同時(shí)Content-Type要設(shè)置為application/json:

var sendData = {name:"zt",age:23};
...
xhr.setRequestHeader("Content-Type","application/json; charset=utf-8");
xhr.send(JSON.stringify(sendData));

  另外利用JSON.parse()和JSON.stringify()可以實(shí)現(xiàn)一個(gè)對(duì)象的深拷貝功能:

var sendData = {name:"zt",age:23};
var copyData = JSON.parse(JSON.stringify(sendData));

$.ajax基本使用

   為了方便使用JQ為我們封裝好了一個(gè)ajax來(lái)方便我們的使用:

$.ajax({
 type:"post",//請(qǐng)求方式
 url:"url",//請(qǐng)求地址
 data:"...",//發(fā)送至服務(wù)端的數(shù)據(jù)
 contentType:"...",//設(shè)置發(fā)送數(shù)據(jù)的類型如果data是一個(gè)json字符串這里要設(shè)置為application/json
 success:function(data){...},//請(qǐng)求成功的回調(diào)函數(shù)data可看做是服務(wù)器返回的數(shù)據(jù)
 error:function(){...}//請(qǐng)求失敗的回調(diào)函數(shù)
 });

  或者:

$.ajax({
 type:"post",
 url:"url",
 data:"...",
 contentType:"...",
 })
 .done(function(data){...})
 .fail(function(){...});

  回調(diào)函數(shù)中的data即為服務(wù)器返回的數(shù)據(jù)的一個(gè)代理,直接使用即可。

  為了簡(jiǎn)化我們的開(kāi)發(fā)JQ提供了一些全局設(shè)置函數(shù)包括$.ajaxSetup()、$.()ajaxStart()、$().ajaxStop()、$().ajaxComplete()、$().ajaxError()、$().ajaxSuccess()、$().ajaxSend()。

  $.ajaxSetup()用來(lái)設(shè)置基本的參數(shù)例如:

$.ajaxSetup({
 type:"post",
 contentType:"application/json; charset=utf-8"
 });

  我們?cè)谑褂?.ajax時(shí)可以直接這樣設(shè)置:

 $.ajax({
 url:"",
 success:function(){...},
 error:function(){...}
 })

  最終等價(jià)于:

 $.ajax({
 type:"post",
 contentType:"application/json; charset=utf-8",
 url:"",
 success:function(){...},
 error:function(){...}
 })

  $().ajaxStart()、$().ajaxStop()、$().ajaxComplete()、$().ajaxError()、$().ajaxSuccess()、$().ajaxSend()都是用來(lái)設(shè)置一些全局回調(diào)函數(shù)的。例如我們?cè)谔峤粩?shù)據(jù)時(shí)為了防止多次提交我們需要在發(fā)送請(qǐng)求時(shí)產(chǎn)生一個(gè)loading遮罩在數(shù)據(jù)發(fā)送完成后取消遮罩,如果在每一次ajax請(qǐng)求時(shí)我們都設(shè)置一次就會(huì)很麻煩,此時(shí)我們就可以用全局回調(diào)函數(shù)來(lái)簡(jiǎn)化我們的操作:

  利用全局事件在請(qǐng)求開(kāi)始時(shí)產(chǎn)生一個(gè)遮罩在請(qǐng)求完成時(shí)取消遮罩:

$(document).ajaxStart(function(){
 loadingMask.show();
 });
 $(document).ajaxComplete(function(){
 loadingMask.hide();
 });

以上所述是小編給大家介紹的Ajax的使用代碼解析,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

最新評(píng)論