ajax經常使用實例代碼總結新手向參考(一)

http的交互方法有四種：get、post、put(增長數據)、delete(刪除數據)

put和delete實現用的是get和post

 

get方式

頁面不能被修改，只是獲取查詢信息。可是提交的數據會經過連接暴露在外，使用get請求會被人拿到登錄的用戶名和密碼，url長度有限制

post方式

頁面能夠修改，好比回帖、評論。可是提交的數據不會暴露在外，url長度無限制，可是提交大小會有限制

默認不被緩存，不在同一個請求域下遠程請求，post都會被轉爲get

 

推薦兩篇不錯的jquery教程：《jQuery的起點教程》和《使用 jQuery 簡化 Ajax 開發》

dataType:string

響應的數據類型主要是mime信息，不填寫的話會智能判斷。通常MIME（多功能網際郵件擴充協議）被定義在Content-Type header中。

通常包括有：xml、html、script、json、jsonp、text

 

$.ajax，$.get/$.post

$.ajax:執行異步複雜的請求，若是不須要在出錯時執行能夠用$.get或$.post替代

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

jQuery.get(url,data,success(response,status,xhr),dataType)

url（必需，其餘爲可選）:要發送的url

data：數據

success：成功時的操做

success(data, textStatus, jqXHR)：（處理後的數據、請求狀態字符串、jq1.4中xhr對象）

dataType：響應的數據類型

實例：

var loginFn=function(){
  $.ajax({
      type:'post',            //String 默認爲GET
      timeout:'2000',        //Number 設置超時時間（毫秒）
      url:{"url"},            //String 發送請求的地址
      dataType:"json",        //String xml、html、script、json、jsonp、jQuery、text
      data:{'ur;':url},
      //或者data能夠如如下寫法
      data:{username:$("#username").val(),content:$("#content").val()},
//GET請求中將附在URL後；對象必須爲key/value形式。若是是數組，jQuery將自動爲不一樣值對應同一名稱例如：{foo:["bar1","bar2"]}轉換爲&foo=bar1&foo=bar2
  //提交前回調函數（發送請求前能夠修改XMLHttpRequest對象的函數）
      beforeSend:function(XMLHttpRequest){
          this;   //調用本次Ajax請求時傳遞的options參數
      },
      //請求成功後處理（data多是xmlDoc、jsonObj、html、text；textStatus
（請求狀態）：success、error、notimodified、timeout）
      success:function(data,textStatus){
          this;   //調用本次Ajax請求時傳遞的options參數//window.location.href = data.getCodeUrl;/*location.reload();*/
      },
      //請求失敗後處理（一般狀況下textStatus和errorThrown只有其中一個包含信息）
      error: function (XMLHttpRequest,textStatus,errorThrown) {
          this;   //調用本次Ajax請求時傳遞的options參數
          console.log("error-----------");
      },
      //請求完成後處理（請求成功或失敗時均調用）
      complete:function(XMLHttpRequest,textStatus){
          this;   //調用本次Ajax請求時傳遞的options參數
      }
  });
}

$("#object").on("click",loginFn);

 

接上，success擴展：

success: function(xml){
$(xml).find('item').each(function(){
var item_text = $(this).text();
 
$('<li></li>')
.html(item_text)
.appendTo('ol');
});
}

load：請求加載數據並返回到指定位置。通常爲經常使用爲：點擊或輸入文本框在指定位置加載出文本，

若是提供數據的是方法，得用post或者get才能生效

實例：

$("button").click(function(){
  $("div").load('demo_ajax_load.txt');
});

$("#result").load("ajax/test.html", function() {
  alert("Load was performed.");
});

 

 

瀏覽器兼容

function() getXhr{
    var xhr;
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();//非ie瀏覽器
    }else{
        xhr=new ActiveXobject('Microsoft.XMLHttp');//ie瀏覽器
    }
}

/*保證返回內容包含text/html,超文本文件
 * MIME（多功能網際郵件擴充協議）
 * 被定義在Content-Type header中

*經常使用的有：

超文本標記語言文本 .html,.html text/html 
普通文本 .txt text/plain 
RTF文本 .rtf application/rtf 
GIF圖形 .gif image/gif 
 * */

 1 xhr.overrideMimeType('text/html'); 


 

var xhr =new XMLHttpRequest();

→相似於jq的$. ajax

xhr.open("get/post","/*/*/url",true);

→相似於jq的type,url,async

xhr.responseType="text"/"blob"/"json";

→相似於jq的dataType

xhr.send();

→相似於jq的success

 

 

 推薦參考：原生和jQuery的ajax用法

推薦參考精華：AJAX(用法總結-精華版)

JQuery中的AJAX詳解

javascript教程ajax

Ajax小實例驗證登陸框---經驗總結

使用jquery簡化ajax的開發