1、使用ajax發(fā)送數(shù)據(jù)的步驟
創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),銅陵企業(yè)網(wǎng)站建設(shè),銅陵品牌網(wǎng)站建設(shè),網(wǎng)站定制,銅陵網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,銅陵網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學習、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
第一步:創(chuàng)建異步對象
var xhr = new XMLHttpRequest();
第二步:設(shè)置 請求行 open(請求方式,請求url):
// get請求如果有參數(shù)就需要在url后面拼接參數(shù),
// post如果有參數(shù),就在請求體中傳遞 xhr.open("get","validate.php?username="+name)
xhr.open("post","validate.php");
第三步:設(shè)置請求(GET方式忽略此步驟)頭:setRequestHeader()
// 1.get不需要設(shè)置
// 2.post需要設(shè)置請求頭:Content-Type:application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
第四步:設(shè)置請求體 send()
// 1.get的參數(shù)在url拼接了,所以不需要在這個函數(shù)中設(shè)置
// 2.post的參數(shù)在這個函數(shù)中設(shè)置(如果有參數(shù))
xhr.send(null) xhr.send("username="+name);
第五步:讓異步對象接收服務(wù)器的響應(yīng)數(shù)據(jù)
一個成功的響應(yīng)有兩個條件:
xhr.onreadystatechange = function(){ ?
if(xhr.status == 200 xhr.readyState == 4){?
console.log(xhr.responseText);?
}
ajax-get方式請求案例:
var xhr = new XMLHttpRequest();?
xhr.open("get","validate.php?username="+name);?
xhr.send(null);?
xhr.onreadystatechange = function(){?
if(xhr.status == 200 xhr.readyState == 4){
console.log(xhr.responseText);
document.querySelector(".showmsg").innerHTML = xhr.responseText;;
}
}
ajax-post方式請求案例:
var xhr = new XMLHttpRequest();
xhr.open("post","validate.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+name);
xhr.onreadystatechange = function(){
// 判斷服務(wù)器是否響應(yīng),判斷異步對象的響應(yīng)狀態(tài)
if(xhr.status == 200 xhr.readyState == 4){
document.querySelector(".showmsg").innerHTML = xhr.responseText;
}
}
二、Jquery中的Ajax
$.ajax({
type: "get",// get或者post
url: "abc.php",// 請求的url地址
data: {},//請求的參數(shù)
dataType: "json",//json寫了jq會幫我們轉(zhuǎn)換成數(shù)組或者對象 他已經(jīng)用JSON.parse弄好了
timeout: 3000,//3秒后提示錯誤
beforeSend: function () {
// 發(fā)送之前就會進入這個函數(shù)
// return false 這個ajax就停止了不會發(fā) 如果沒有return false 就會繼續(xù)
},
success: function (data) { // 成功拿到結(jié)果放到這個函數(shù) data就是拿到的結(jié)果
},
error: function () {//失敗的函數(shù)
},
complete: function () {//不管成功還是失敗 都會進這個函數(shù)
}
})
// 常用
$.ajax({
type: "get",
url: "",
data: {},
dataType: "json",
success: function (data) {
}
})
$.ajax() 都可以發(fā)
$.post(url,data,success,datatype):本質(zhì)上只能發(fā)送post請求
$.get(url,data,success,datatype):本質(zhì)上只能發(fā)送get請求
jQuery中ajax的4種常用請求方式:
1.$.ajax()返回其創(chuàng)建的 XMLHttpRequest 對象。
$.ajax() 只有一個參數(shù):參數(shù) key/value 對象,包含各配置及回調(diào)函數(shù)信息。如果指定了 dataType 選項,請確保服務(wù)器返回正確的 MIME 信息,(如 xml 返回 "text/xml")。
實例:
保存數(shù)據(jù)到服務(wù)器,成功時顯示信息。
$.ajax({ type: "post", dataType: "html", url: '/Resources/GetList.ashx', data: dataurl, success: function (data) {
if (data != "") {
$("#pager").pager({
pagenumber: pagenumber, pagecount: data.split("$$")[1],
buttonClickCallback: PageClick });
$("#anhtml").html(data.split("$$")[0]);
}
}
});
2.通過遠程 HTTP GET 請求載入信息。
這是一個簡單的 GET 請求功能以取代復雜 $.ajax 。請求成功時可調(diào)用回調(diào)函數(shù)
。如果需要在出錯時執(zhí)行函數(shù),請使用 $.ajax。 實例:
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
3. 通過遠程 HTTP POST 請求載入信息。 這是一個簡單的 POST 請求功能以取代復雜 $.ajax 。
請求成功時可調(diào)用回調(diào)函數(shù)。如果需要在出錯時執(zhí)行函數(shù),請使用 $.ajax。
實例:
$.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames },
function (data) {
if (data == "ok") {
alert("添加成功!");
}
}
)
4.通過 HTTP GET 請求載入 JSON 數(shù)據(jù)。
實例:
$.getJSON("api.flickr.com/services/feeds/photos_public.gne?tags=cattagmode=anyformat=json
jsoncallback=?,前面加上http://", function(data){
$.each(data.items, function(i,item){
$("img/").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
運用ajax()方法,比其它如load()、get()、post()全局性函數(shù)它更多地關(guān)注實現(xiàn)過程中的細節(jié);首先要了解其參數(shù)列表:
url: 要求為String類型的參數(shù),(默認為當前頁地址)發(fā)送請求的地址。
type:要求為String類型的參數(shù),請求方式(post或get)默認為get。注意其他http請求方法,例如put和delete也可以使用,但僅部分瀏覽器支持。
timeout: 要求為Number類型的參數(shù),設(shè)置請求超時時間(毫秒)。此設(shè)置將覆蓋$.ajaxSetup()方法的全局設(shè)置。
async:要求為Boolean類型的參數(shù),默認設(shè)置為true,所有請求均為異步請求。如果需要發(fā)送同步請求,請將此選項設(shè)置為false。注意,同步請求將鎖住瀏覽器,用戶其他操作必須等待請求完成才可以執(zhí)行。
cache:要求為Boolean類型的參數(shù),默認為true(當dataType為script時,默認為false)。設(shè)置為false將不會從瀏覽器緩存中加載請求信息。
data: 要求為Object或String類型的參數(shù),發(fā)送到服務(wù)器的數(shù)據(jù)。如果已經(jīng)不是字符串,將自動轉(zhuǎn)換為字符串格式。get請求中將附加在url后。防止這種自動轉(zhuǎn)換,可以查看processData選項。對象必須為key/value格式,例如{foo1:"bar1",foo2:"bar2"}轉(zhuǎn)換為foo1=bar1foo2=bar2。如果是數(shù)組,JQuery將自動為不同值對應(yīng)同一個名稱。例如{foo:["bar1","bar2"]}轉(zhuǎn)換為foo=bar1foo=bar2。
dataType: 要求為String類型的參數(shù),預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定,JQuery將自動根據(jù)http包mime信息返回responseXML或responseText,并作為回調(diào)函數(shù)參數(shù)傳遞??捎玫念愋腿缦拢?/p>
xml:返回XML文檔,可用JQuery處理。
html:返回純文本HTML信息;包含的script標簽會在插入DOM時執(zhí)行。
script:返回純文本JavaScript代碼。不會自動緩存結(jié)果。除非設(shè)置了cache參數(shù)。注意在遠程請求時(不在同一個域下),所有post請求都將轉(zhuǎn)為get請求。
json:返回JSON數(shù)據(jù)。
jsonp:JSONP格式。使用SONP形式調(diào)用函數(shù)時,例如myurl?callback=?,JQuery將自動替換后一個 “?”為正確的函數(shù)名,以執(zhí)行回調(diào)函數(shù)。
text:返回純文本字符串。
beforeSend:要求為Function類型的參數(shù),發(fā)送請求前可以修改XMLHttpRequest對象的函數(shù),例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求XMLHttpRequest對象是惟一的參數(shù)。
function(XMLHttpRequest){
this; //調(diào)用本次ajax請求時傳遞的options參數(shù)
}
complete:要求為Function類型的參數(shù),請求完成后調(diào)用的回調(diào)函數(shù)(請求成功或失敗時均調(diào)用)。參數(shù):XMLHttpRequest對象和一個描述成功請求類型的字符串。
function(XMLHttpRequest, textStatus){
this; //調(diào)用本次ajax請求時傳遞的options參數(shù)
}
success:要求為Function類型的參數(shù),請求成功后調(diào)用的回調(diào)函數(shù),有兩個參數(shù)。
(1)由服務(wù)器返回,并根據(jù)dataType參數(shù)進行處理后的數(shù)據(jù)。
(2)描述狀態(tài)的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //調(diào)用本次ajax請求時傳遞的options參數(shù)
error:要求為Function類型的參數(shù),請求失敗時被調(diào)用的函數(shù)。該函數(shù)有3個參數(shù),即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。
ajax事件函數(shù)如下:
function(XMLHttpRequest, textStatus, errorThrown){
//通常情況下textStatus和errorThrown只有其中一個包含信息
this; //調(diào)用本次ajax請求時傳遞的options參數(shù)
}
contentType:要求為String類型的參數(shù),當發(fā)送信息至服務(wù)器時,內(nèi)容編碼類型默認為"application/x-www-form-urlencoded"。該默認值適合大多數(shù)應(yīng)用場合。
dataFilter:要求為Function類型的參數(shù),給Ajax返回的原始數(shù)據(jù)進行預(yù)處理的函數(shù)。提供data和type兩個參數(shù)。data是Ajax返回的原始數(shù)據(jù),type是調(diào)用jQuery.ajax時提供的dataType參數(shù)。函數(shù)返回的值將由jQuery進一步處理。
function(data, type){
//返回處理后的數(shù)據(jù)
return data;
}
global:要求為Boolean類型的參數(shù),默認為true。表示是否觸發(fā)全局ajax事件。設(shè)置為false將不會觸發(fā)全局ajax事件,ajaxStart或ajaxStop可用于控制各種ajax事件。
ifModified:要求為Boolean類型的參數(shù),默認為false。僅在服務(wù)器數(shù)據(jù)改變時獲取新數(shù)據(jù)。服務(wù)器數(shù)據(jù)改變判斷的依據(jù)是Last-Modified頭信息。默認值是false,即忽略頭信息。
jsonp:要求為String類型的參數(shù),在一個jsonp請求中重寫回調(diào)函數(shù)的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數(shù)里的"callback"部分,例如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務(wù)器。
username:要求為String類型的參數(shù),用于響應(yīng)HTTP訪問認證請求的用戶名。
password:要求為String類型的參數(shù),用于響應(yīng)HTTP訪問認證請求的密碼。
processData:要求為Boolean類型的參數(shù),默認為true。默認情況下,發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對象(從技術(shù)角度來講并非字符串)以配合默認內(nèi)容類型"application/x-www-formurlencoded"。如果要發(fā)送DOM樹信息或者其他不希望轉(zhuǎn)換的信息,請設(shè)置為false。
scriptCharset:要求為String類型的參數(shù),只有當請求時dataType為"jsonp"或者"script",并且type是GET時才會用于強制修改字符集(charset)。通常在本地和遠程的內(nèi)容編碼不同時使用。
第一種:
$.ajax({
type:?"POST",?//提交方式?post?和?get
url:?"連接地址",//連接地址
data:?'{"'?+?+?'"}',//數(shù)據(jù)類型
contentType:?"application/json;charset=utf-8",//編碼形式
dataType:?"json",?//提交數(shù)據(jù)類型
success:?function?(data)?{
var?it?=?eval(data.d);
var?Html?=?"";
for?(var?i?in?it)?{}
},?async:?false
});
第二種:
$(document).ready(function(){
$("#a").click(function(){
htmlobj=$.ajax({url:"/test.txt",async:false});
$("#b").html(htmlobj.responseText);
});
});
第三種:
$.ajax({?url:?"abc.html",?context:?document.body,?success:?function(){
$(this).addClass("Dmoe");
}});
//參考文獻:鋒利的Jquery??如有疏漏或者錯誤?還望大家指出