ajax小心得

神馬是Ajax

通過在后臺與服務器進行少量數(shù)據交換屠阻,AJAX可以使網頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網頁的情況下吧恃,對網頁的某部分進行更新麻诀。

封裝原生ajax函數(shù)

type:傳值方式get post。
http://www.cnblogs.com/zhangpengshou/archive/2012/07/09/2583096.htmlRect機制
uri:要訪問的服務器的地址
async:同步異步請求默認為異步操作若為同步操作呻率,訪問數(shù)據的時候呻引,頁面無法進行任何操作,呈現(xiàn)出一種假死狀態(tài)藐守;同步操作是相對安全的
obj:(相當于jq中的data屬性
angular params:{}//get方式
data:{}//post)傳遞一個json對象進去(后端規(guī)定傳遞的數(shù)據:傳遞給后端的值)
fun:回調函數(shù)有返回數(shù)據時進行的操作

function ajax(type,url,async,obj,fun){
  var str = "";
 /*循環(huán)遍歷傳進來的json對象(遍歷json都是用for in循環(huán)key代表后端規(guī)定傳遞的數(shù)據卢厂,obj[key]代表傳遞給后端的值)*/
  for(var key in obj){
    str += key + '=' + obj[key]+'&';
    //拼接成類似uname=’admin’&upass=’123456’&
  }
  if(str!=""&&type=='get'){
  //uname=’admin’&upass=’123456’&結尾處多了個&去掉它
    url+="?"+str.substring(0,str.length-1);
    //如果是get方式發(fā)送一個空的字符串慎恒,send(str)
    str='';
  }
  var xhr;
  //兼容ie低版本7以下
  if(*window*.XMLHttpRequest){
    xhr=newXMLHttpRequest();
   }else{
    xhr=newActiveXObject('Microsoft.XMLHTTP')
   }
   //async異步執(zhí)行向服務器發(fā)送請求open
   //基礎配置信息open(method,uri,async)
  /*method*:請求的類型撵渡;GET或POST
   *url*:文件在服務器上的位置
   *async*:true(異步)或false(同步)*/
    xhr.open(type,url,async);
    xhr.send(str);//將請求發(fā)送到服務器。Get傳遞空Post傳遞str字符串
    xhr.onreadystatechange = function(){
    //創(chuàng)建信息返回0 配置信息返回 1 發(fā)送信息完成返回     2訪問數(shù)據結束返回4
    /*xhr.statusHTTP協(xié)議狀態(tài)碼
    xhr.status==200訪問資源路徑正確并且結束成功正確
    xhr.status==304緩存路徑
    xhr.status==400請求參數(shù)錯誤(參數(shù)傳少了)
    xhr.status==404訪問路徑錯誤路(路徑寫錯了)
    xhr.status==500后臺服務器錯誤*/
    if(xhr.readyState==4&&xhr.status==200){
      //responseText 獲得字符串形式的響應數(shù)據粒氧。
      var data=xhr.responseText;
      //異常處理機制
       try{
          //JSON.parse將JSON字符串轉換為對象
         var e=JSON.parse(data);
        }catch(s){
         console.info(s); //拋出異常
        };
        fun(e);
    }
  }
}

調用ajax

var url = "后端提供的網址",
var obj = {
  upass:頁面獲取的用戶名节腐,
  upass:頁面獲取的密碼,
}
ajax('get',url,true,obj,function(e){
  if(e.code==200&&e.data){
    alert('登陸成功');
    window.location=index.html';
    }else{
    alert('對不起我們服務器掛掉了');
  }
})

同源安全策略

是網景公司提出的一個著名的安全策略,只有在域名端口協(xié)議相同時才進行訪問饱苟;
同源是指域名狼渊,協(xié)議,端口相同城须;

Jsonp跨域處理

JSONP(JSON with Padding)是一個非官方的協(xié)議米苹,它允許在服務器端集成Script tags返回至客戶端驱入,通過javascript callback的形式實現(xiàn)跨域訪問。Callback回調函數(shù)~~~
跨域原理:利用js構造一個script標簽莺褒,把json的url賦給script的scr屬性雪情,把這個script插入到dom里,讓瀏覽器去獲取尘执。

function jsonp(url,data){
  var param='';
  for(var in data){
    param+=i+'='+data[i]+'&';
  }
  //跟ajax一樣,獲取url后的一串字符串
   url+='?'+param;
   var domScript = document.createElement('script');
  //創(chuàng)建一個script標簽
  domScript.src=url;
  //給script標簽添加地址,將script(帶有src地址)插入到head中
  document.getElementsByTagName('head')[0].appendChild(domScript);
}
//測試訪問的是360天氣表悬,傳遞值會返回城市天氣等等數(shù)據
 var url="http://cdn.weather.hao.#/api_weather_info.php";
 var data={app:'hao360',code:101011200,_jsonp:"weath"}
 jsonp(url,data);
 function weath(e) {
  var weathArr=e.weather;
  var dayWeath=[];
  var nightWeath=[];
  var dateArr=[]
  for(var i=0;i<weathArr.length;i++){
    var everyday=weathArr[i];
    dayWeath.push(everyday.info.day[2]);
    nightWeath.push(everyday.info.night[2]);
    dateArr.push(everyday.*date*.substring(5));
  }
}
//script標簽引用的內容我們獲取不到,則返回一個自動運行的函數(shù)丧靡;
//由前端給后端傳遞函數(shù)名

Jquery中的ajax

常用方法
load(url,[data]蟆沫,[callback])常用于遠程將html代碼插入dom元素中
url:(必填)請求html頁面的url地址、
若data為空則為get方式傳值温治,否則post方式
如$(‘#demo’).load(‘text.html’)將text頁面的內容加入到id為demo的div中饭庞,
注意:load()方法 無論Ajax請求是否成功,只要當請求完成后熬荆,回調函數(shù)就被觸發(fā)

$.get(url,[data],[callback],[type])以get方式進行ajax請求
    Type:服務器端返回內容的格式(xml舟山,html,script·卤恳,json累盗,text)
    Callback函數(shù)
    function(e,textStatus){
      //e:返回的內容
      //請求數(shù)據返回的狀態(tài)有success error
}

$.post()以post方式進行ajax請求
Get方式跟post方式的區(qū)別get方式對傳輸?shù)臄?shù)據大小有限制(通常不能大于2kb)纬黎,get方式請求的數(shù)據會被瀏覽器緩存起來幅骄,其他人可以從瀏覽器的歷史記錄中取得這些數(shù)據,安全性差本今。
$.getJSON()用于加載json文件
最麻煩但最正宗的方法:
$.ajax(
{
type:’get’,
url:’’,
success:function(e){
}
}
常用參數(shù):url拆座,type:請求方式(get/post),
data:傳json對象后者string字符串 建議傳json對象 好理解一點冠息;
注意:
1挪凑、如果在ajax外部獲取ajax的數(shù)據,必須使用全局變量來進行定義
2、ajax后添加進來的數(shù)據 如果 想綁定事件逛艰,一般使用事件委托jq的on()方法

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末躏碳,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子散怖,更是在濱河造成了極大的恐慌菇绵,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件镇眷,死亡現(xiàn)場離奇詭異咬最,居然都是意外死亡,警方通過查閱死者的電腦和手機欠动,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進店門永乌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來惑申,“玉大人,你說我怎么就攤上這事翅雏∪ν眨” “怎么了?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵望几,是天一觀的道長绩脆。 經常有香客問我,道長橄妆,這世上最難降的妖魔是什么衙伶? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮害碾,結果婚禮上,老公的妹妹穿的比我還像新娘赦拘。我一直安慰自己慌随,他們只是感情好,可當我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布躺同。 她就那樣靜靜地躺著阁猜,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蹋艺。 梳的紋絲不亂的頭發(fā)上剃袍,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天,我揣著相機與錄音捎谨,去河邊找鬼民效。 笑死,一個胖子當著我的面吹牛涛救,可吹牛的內容都是我干的畏邢。 我是一名探鬼主播,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼检吆,長吁一口氣:“原來是場噩夢啊……” “哼舒萎!你這毒婦竟也來了?” 一聲冷哼從身側響起蹭沛,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤臂寝,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后摊灭,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體咆贬,經...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年斟或,在試婚紗的時候發(fā)現(xiàn)自己被綠了素征。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖御毅,靈堂內的尸體忽然破棺而出根欧,到底是詐尸還是另有隱情,我是刑警寧澤端蛆,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布凤粗,位于F島的核電站,受9級特大地震影響今豆,放射性物質發(fā)生泄漏嫌拣。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一呆躲、第九天 我趴在偏房一處隱蔽的房頂上張望异逐。 院中可真熱鬧,春花似錦插掂、人聲如沸灰瞻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽酝润。三九已至,卻和暖如春璃弄,著一層夾襖步出監(jiān)牢的瞬間要销,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工夏块, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留疏咐,地道東北人。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓拨扶,卻偏偏與公主長得像凳鬓,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子患民,可洞房花燭夜當晚...
    茶點故事閱讀 43,452評論 2 348

推薦閱讀更多精彩內容