JavaScript中ajax的實(shí)例用法

發(fā)布時(shí)間：2021-09-03 12:52:50 來源：億速云閱讀：186 作者：chen 欄目：開發(fā)技術(shù)

這篇文章主要講解了“JavaScript中ajax的實(shí)例用法”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JavaScript中ajax的實(shí)例用法”吧！

（1）$.load(url,[data],[callback])

作用：加載指定的資源寫入當(dāng)前頁(yè)面

例子：

$(function() {
	$("body #d1").load("2.html");
	alert($("現(xiàn)在html").html());
	$("#b1").click(function() {
		alert($("html").html());
	});
});<strong>
</strong>

html：

1.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/demo1.js"></script>
</head>
<body>
1111111111
<div id="d1"></div>
<input id="b1" type="button" value="點(diǎn)擊">
</body>
</html>

2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
22222
</body>
</html>

$.get(url,[data],[callback])

作用：向服務(wù)器發(fā)送get請(qǐng)求：

$("button").click(function(){
  $.get("demo_ajax_load.txt", function(result){
    $("div").html(result);
  });
});

$.post(url,[data],[callback])

作用：同上

$.getJSON(url,[data],[callback])

作用：同上，只不過載入的數(shù)據(jù)要是json數(shù)據(jù)

$.getJSON("test.js",  function(json){
  alert("JSON Data: " + json.users[3].name);
});

$.getScript(url,[callback])

作用：從指定的url載入js數(shù)據(jù)，并執(zhí)行

例子（來自w3school）

$.Ajax(options)：

參數(shù)詳解：

async://Boolean類型 此鍵值對(duì)默認(rèn)情況下為true，也就是異步請(qǐng)求（局部刷新）；如果設(shè)置為false，將會(huì)變成同步請(qǐng)求，那么此時(shí)將會(huì)鎖住瀏覽器，用戶無(wú)法對(duì)其進(jìn)行其他操作，必須等待請(qǐng)求完畢后才會(huì)解鎖。



global (Boolean類型) //表示是否觸發(fā)全局，默認(rèn)為觸發(fā)（true），Ajax的全局設(shè)置將在后面的章節(jié)講，設(shè)置全局則表示所有的Ajax將能夠使用此全局內(nèi)容，比如所有的Ajax事件都觸發(fā)同一個(gè)路徑。



type (String) : //(默認(rèn): "GET") 請(qǐng)求方式 ("POST" 或 "GET")， 默認(rèn)為 "GET"。注意：其它 HTTP 請(qǐng)求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。



cache:(Boolean類型) //設(shè)置false將不會(huì)從瀏覽器緩存中加載信息，用于jQuery1.2或更高的版本。



contentType:(String類型) //用于設(shè)置編碼格式，默認(rèn)為: "application/x-www-form-urlencoded")格式，一般推薦此格式。



ifModified (Boolean) : //(默認(rèn): false) 僅在服務(wù)器數(shù)據(jù)改變時(shí)獲取新數(shù)據(jù)。



processData (Boolean) : // (默認(rèn): true) 默認(rèn)情況下，發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對(duì)象。



timeout (Number) ://設(shè)置置請(qǐng)求超時(shí)時(shí)間（毫秒）。此設(shè)置為全局設(shè)置。



dataType:(String類型) //用于設(shè)置服務(wù)器返回的數(shù)據(jù)類型，但填寫的內(nèi)容也是有限制的，可用值如下
                 ┠xml //設(shè)置此值服務(wù)器端將XML文檔，如果大家對(duì)Ajax比較了解，我想大家也知道Ajax中的x代表是什么了吧？因此叫做A(Asynchronous)j(javascript)a(and)x(xml)
                 ┠html //服務(wù)器返回HTML格式文檔,（根據(jù)個(gè)人理解，如果按照遭上面的理解xml表示x的話，那么此類型不就表示ajah了嘛）。
                 ┠script //服務(wù)器返回【純文本】的腳本，不會(huì)執(zhí)行或進(jìn)行計(jì)算。
                 ┠json //返回Json格式的文檔
                 ┠text //返回純文本
                 ┗jsonp //JSONP是一個(gè)非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過javascript callback的形式實(shí)現(xiàn)跨域訪問，比如用戶想得到["kwoojan","KwooShung"]，如果設(shè)置了jsonp那么服務(wù)器將返回callbackFunction(["kwoojan","KwooShung"])



data(String類型) //此方法至關(guān)重要，主要用于將數(shù)據(jù)發(fā)送至服務(wù)器。格式為鍵值對(duì)，如userName=CSS學(xué)習(xí)網(wǎng)&Address=http://www.cssxuexi.cn/ 那么服務(wù)器接受到的userName相對(duì)應(yīng)的值就是CSS學(xué)習(xí)網(wǎng)



url (String) :// (默認(rèn): 當(dāng)前頁(yè)地址) 發(fā)送請(qǐng)求的地址，也就是你的data數(shù)據(jù)需要被處理的地址。



beforeSend(function) //此鍵值為函數(shù)方法，當(dāng)你發(fā)送請(qǐng)求之前調(diào)用此方法。例如當(dāng)用戶進(jìn)行了某個(gè)操作，這時(shí)頁(yè)面上顯示出“正在加載中，請(qǐng)稍后”等類似的字樣，多數(shù)情況下此鍵值對(duì)用于給予用戶友好的提示。



success (Function) //當(dāng)Ajax請(qǐng)求成功時(shí)，調(diào)用此方法，一般用于解析服務(wù)器所返回的數(shù)據(jù)。



error (Function) //求失敗時(shí)調(diào)用此方法。



complete (Function) //當(dāng)Ajax請(qǐng)求完畢的時(shí)候調(diào)用此方法

在配上一個(gè)具體的例子：

function reg()//注冊(cè)
{
	$.ajax
	({
		type: "POST",
		cache:false,
		url: "servlet/UserServer",
		dataType:"json",
		data: "class=reg&userName="+ $("#userName").val() +"&userPwd="+ $("#userPwd").val(),
		success: function(data)
		{
			alert(data.info);
		},
		error:function()
		{
        	alert("訪問數(shù)據(jù)失?。?quot;);
		}
	});
}

感謝各位的閱讀，以上就是“JavaScript中ajax的實(shí)例用法”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)JavaScript中ajax的實(shí)例用法這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

JavaScript中ajax的實(shí)例用法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽