Ajax用法例項詳解
本文例項講述了jQuery學習筆記之Ajax用法。分享給大家供大家參考，具體如下：
一、Ajax請求
1、jQuery.ajax(options)
通過 HTTP 請求載入遠端資料。jQuery 底層 AJAX 實現。簡單易用的高層實現見 .get,.post 等。
.ajax()返回其建立的XMLHttpRequest物件。大多數情況下你無需直接操作該物件，但特殊情況下可用於手動終止請求。.ajax() 只有一個引數：引數 key/value 物件，包含各配置及回撥函式資訊。詳細引數選項見下。
注意： 如果你指定了 dataType 選項，請確保伺服器返回正確的 MIME 資訊，(如 xml 返回 "text/xml")。錯誤的 MIME 型別可能導致不可預知的錯誤。
注意：如果dataType設定為"script"，那麼在遠端請求時(不在同一個域下)，所有POST請求都將轉為GET請求。(因為將使用DOM的script標籤來載入)
jQuery 1.2 中，您可以跨域載入 JSON 資料，使用時需將資料型別設定為 JSONP。使用 JSONP 形式呼叫函式時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函式名，以執行回撥函式。資料型別設定為 "jsonp" 時，jQuery 將自動呼叫回撥函式。
返回值 XMLHttpRequest
引數
options (可選) : AJAX 請求設定。所有選項都是可選的。
選項
（1）、async (Boolean) : (預設: true)
預設設定下，所有請求均為非同步請求。如果需要傳送同步請求，請將此選項設定為 false。注意，同步請求將鎖住瀏覽器，使用者其它操作必須等待請求完成才可以執行。
（2）beforeSend (Function) : 傳送請求前可修改 XMLHttpRequest 物件的函式，如新增自定義 HTTP 頭。
XMLHttpRequest 物件是唯一的引數。這是一個 Ajax 事件。如果返回false可以取消本次ajax請求。
| 1 2 3 |
function
(XMLHttpRequest) {this;
// 呼叫本次AJAX請求時傳遞的options引數
}
|
（3）、cache (Boolean) : (預設: true,dataType為script時預設為false)
jQuery 1.2 新功能，設定為 false 將不會從瀏覽器快取中載入請求資訊。
（4）、complete (Function) : 請求完成後回撥函式 (請求成功或失敗時均呼叫)。
引數： XMLHttpRequest 物件和一個描述成功請求型別的字串。 這是一個 Ajax 事件
| 1 2 3 |
function
(XMLHttpRequest, textStatus) {
this;
// 呼叫本次AJAX請求時傳遞的options引數
}
|
（5）、contentType (String) : (預設: "application/x-www-form-urlencoded") 傳送資訊至伺服器時內容編碼型別。預設值適合大多數應用場合。
（6）、data (Object,String) : 傳送到伺服器的資料。將自動轉換為請求字串格式。GET 請求中將附加在URL 後。檢視processData選項說明以禁止此自動轉換。
必須為 Key/Value 格式。如果為陣列，jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。
（7）、dataFilter (Function) :給Ajax返回的原始資料的進行預處理的函式。提供data和type兩個引數：data是Ajax返回的原始資料，type是呼叫jQuery.ajax時提供的dataType引數。函式返回的值將由jQuery進一步處理。
?| 1 2 3 4 |
function
(data, type) {
// 對Ajax返回的原始資料進行預處理
return
data // 返回處理後的資料
}
|
（8）、dataType (String) : (預設值：智慧判斷xml或者html)
預期伺服器返回的資料型別。如果不指定，jQuery 將自動根據 HTTP 包 MIME 資訊返回responseXML 或 responseText，並作為回撥函式引數傳遞，可用值:
"xml": 返回 XML 文件，可用 jQuery 處理。
"html": 返回純文字 HTML 資訊；包含的script標籤會在插入dom時執行。
"script": 返回純文字 JavaScript 程式碼。不會自動快取結果。除非設定了"cache"引數。注意：在遠端請求時(不在同一個域下)，所有POST請求都將轉為GET請求。(因為將使用DOM的script標籤來載入)
"json": 返回 JSON 資料 。
"jsonp": JSONP 格式。使用 JSONP 形式呼叫函式時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函式名，以執行回撥函式。
"text": 返回純文字字串
（9）、error (Function) : (預設: 自動判斷 (xml 或 html)) 請求失敗時呼叫時間。引數有以下三個：XMLHttpRequest 物件、錯誤資訊、（可選）捕獲的錯誤物件。如果發生了錯誤，錯誤資訊（第二個引數）除了得到null之外，還可能是"timeout", "error", "notmodified" 和 "parsererror"。Ajax 事件。
?| 1 2 3 4 5 |
function
(XMLHttpRequest, textStatus, errorThrown) {
// 通常 textStatus 和 errorThrown 之中
// 只有一個會包含資訊
this;
// 呼叫本次AJAX請求時傳遞的options引數
}
|
（10）、global (Boolean) : (預設: true) 是否觸發全域性 AJAX 事件。設定為 false 將不會觸發全域性 AJAX 事件，如 ajaxStart 或 ajaxStop 可用於控制不同的 Ajax 事件。
（11）、ifModified (Boolean) : (預設: false) 僅在伺服器資料改變時獲取新資料。使用 HTTP 包 Last-Modified 頭資訊判斷。
（12）、jsonp (String) : 在一個jsonp請求中重寫回調函式的名字。這個值用來替代在"callback=?"這種GET或POST請求中URL引數裡的"callback"部分，比如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給伺服器。
（13）、password (String) : 用於響應HTTP訪問認證請求的密碼
（14）、processData (Boolean) : (預設: true) 預設情況下，傳送的資料將被轉換為物件(技術上講並非字串) 以配合預設內容型別 "application/x-www-form-urlencoded"。如果要傳送 DOM 樹資訊或其它不希望轉換的資訊，請設定為 false。
（15）、scriptCharset (String) : 只有當請求時dataType為"jsonp"或"script"，並且type是"GET"才會用於強制修改charset。通常在本地和遠端的內容編碼不同時使用。
（16）、success (Function) : 請求成功後的回撥函式。引數：由伺服器返回，並根據dataType引數進行處理後的資料；描述狀態的字串。 Ajax 事件。
?| 1 2 3 4 |
function
(data, textStatus) {
// data 可能是 xmlDoc, jsonObj, html, text, 等等
this;
// 呼叫本次AJAX請求時傳遞的options引數
}
|
（17）、timeout (Number) : 設定請求超時時間（毫秒）。此設定將覆蓋全域性設定。
（18）、type (String) : (預設: "GET") 請求方式 ("POST" 或 "GET")， 預設為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支援。
（19）、url (String) : (預設: 當前頁地址) 傳送請求的地址。
（20）、username (String) : 用於響應HTTP訪問認證請求的使用者名稱
（21）、xhr (Function) : 需要返回一個XMLHttpRequest 物件。預設在IE下是ActiveXObject 而其他情況下是XMLHttpRequest 。用於重寫或者提供一個增強的XMLHttpRequest 物件。這個引數在jQuery 1.3以前不可用。
ps:上述紅色標出的部分是大多數ajax呼叫常用的引數設定，利用這幾個引數就可以成功實現ajax呼叫了.
示例
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
//jQTest.js
function
jqAjaxTest() {
var
jqRequestUrl = "AjaxHandler.ashx";
//1、 載入並執行一個 JS 檔案
$.ajax({
type:
"GET",
url:
"js/jqLoadJs.js",
dataType:
"script"
});
//2、裝載一個 HTML 網頁最新版本
$.ajax({
url:
"test.htm",
cache:
false, //沒有快取的說
success:
function(html) {
//alert(html);
$("#spanGetHtml").css("display",
"block");
$("#spanGetHtml").css("color",
"red");
$("#spanGetHtml").append(html);
}
});
//3、獲取並解析一個xml檔案(從服務端獲取xml)
$.ajax({
type:
'GET',
dataType:
'xml', //這裡可以不寫，但千萬別寫text或者html
url: jqRequestUrl +
"?action=jquerGetXmlRequest",
success:
function(xml) {
//正確解析服務端的xml檔案
$(xml).find("profile").each(function(i)
{
var
name = $(this).children("userName").text();
//取物件文字
var
location = $(this).children("location").text();
alert("Xml at SERVER is gotten by CLIENT:"
+ name + " is living in "
+ location);
});
},
error:
function(xml) {
alert('An error happend while loading XML document ');
}
});
//4、傳送 XML 資料至伺服器(客戶端傳送xml到服務端)
var
xmlDocument = "<profile>"
+
" <userName>jeff wong</userName>"
+
" <location>beijing</location>"
+
"</profile>";
$.ajax({
url: jqRequestUrl +
"?action=jqueryXmlRequest",
processData:
false, //設定 processData 選項為 false，防止自動轉換資料格式。
//type: "xml",
cache:
false,
type:
"xml",
data: xmlDocument,
success:
function(html) {
alert(html);
//彈出提示
$("#spanResult").css("display",
"block");
$("#spanResult").css("color",
"red");
$("#spanResult").html(html);
//給當前dom的一個span元素賦值
},
error:
function(oXmlHttpReq, textStatus, errorThrown) {
alert("jquery ajax xml request failed");
$("#spanResult").css("display",
"block");
$("#spanResult").css("color",
"red");
$("#spanResult").html("jquery ajax xml request failed");
//提示出錯
}
});
//5、同步載入資料。傳送請求時鎖住瀏覽器。需要鎖定使用者互動操作時使用同步方式。
var
html = $.ajax({
//沒有type 預設為GET方式
url: jqRequestUrl +
"?action=syncRequest",
async:
false
}).responseText;
alert(html);
//6、顯式get測試
$.ajax({
type:
"GET",
url: jqRequestUrl +
"?action=jquery&userName="
+ $("#txtUserName").val(),
cache:
false,
success:
function(html) {
// alert(html); //彈出提示
$("#spanResult").css("display",
"block");
$("#spanResult").css("color",
"red");
$("#spanResult").html(html);
//給當前dom的一個span元素賦值
},
error:
function(oXmlHttpReq, textStatus, errorThrown) {
alert("jquery ajax request failed");
$("#spanResult").css("display",
"block");
$("#spanResult").css("color",
"red");
$("#spanResult").html("jquery ajax request failed");
//提示出錯
}
});
//7、顯式POST測試
$.ajax({
type:
"POST",
url: jqRequestUrl,
data:
"action=jquerySaveData&userName=jeffwong&location=beijing",
success:
function(html) {
alert(html);
}
});
}
|
幾個相關檔案：
a、處理ajax請求的服務端檔案：AjaxHandler.ashx，對應的cs檔案：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.SessionState;
using
System.Xml;
namespace
MyJqTest
{
public
class AjaxHandler : IHttpHandler, IRequiresSessionState
{
/// <summary>
/// 可複用
/// </summary>
public
bool IsReusable
{
get
{
return
true;
}
}
public
void ProcessRequest(HttpContext context)
{
AjaxOperations(context);
}
private
void AjaxOperations(HttpContext context)
{
string
action = context.Request["action"];
if
(!string.IsNullOrEmpty(action))
{
switch
(action)
{
default:
break;
case
"jquery":
ProcessJQueryRequest(context);
break;
case
"jquerySaveData":
ProcessJQuerySaveData(context);
break;
case
"syncRequest":
ProcessJQuerySyncRequest(context);
break;
case
"jqueryXmlRequest":
ProcessJQueryXMLRequest(context);
break;
case
"jquerGetXmlRequest":
ProcessJQueryGetXMLRequest(context);
break;
}
}
}
private
void ProcessJQueryRequest(HttpContext context)
{
context.Response.ClearContent();
context.Response.ContentType =
"text/plain";
//設定輸出流型別
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
//沒有快取
string
result = context.Request["userName"].Trim();
context.Response.Write("You have entered a name:"
+ result);
}
private
void ProcessJQuerySaveData(HttpContext context)
{
context.Response.ClearContent();
context.Response.ContentType =
"text/plain";
//設定輸出流型別
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
//沒有快取
string
name = context.Request["userName"].Trim();
string
location = context.Request["location"].Trim();
context.Response.Write("Your data have been saved:your name is "
+ name + ",living in "
+ location);
}
private
void ProcessJQuerySyncRequest(HttpContext context)
{
context.Response.ClearContent();
context.Response.ContentType =
"text/plain";
//設定輸出流型別
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
//沒有快取
context.Response.Write("Your sync ajax request has been processed.");
}
/// <summary>
/// 簡單的xml請求處理(服務端從客戶端獲取xml)
/// </summary>
/// <param name="context"></param>
private
void ProcessJQueryXMLRequest(HttpContext context)
{
context.Response.ClearContent();
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
//沒有快取
XmlDocument doc =
new XmlDocument();
try
{
doc.Load(context.Request.InputStream);
//獲取xml (這裡需要注意接受xml資料的方法)
context.Response.ContentType =
"text/plain";
//設定輸出流型別
string
name = doc.SelectSingleNode("profile/userName").InnerText;
string
location = doc.SelectSingleNode("profile/location").InnerText;
context.Response.Write("Your XML data have received,and your name is "
+ name + ",living in "
+ location);
}
catch
(Exception ex)
{
context.Response.Write("Get xml data failed.");
throw
ex;
}
}
/// <summary>
/// 返回簡單的xml(服務端返回客戶端xml)
/// </summary>
/// <param name="context"></param>
private
void ProcessJQueryGetXMLRequest(HttpContext context)
{
context.Response.ClearContent();
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
//沒有快取
XmlDocument doc =
new XmlDocument();
try
{
doc.Load(context.Server.MapPath("/jeffWong.xml"));
context.Response.ContentType =
"text/xml;charset=UTF-8";
//設定輸出流型別
context.Response.Write(doc.OuterXml);
}
catch
(Exception ex)
{
context.Response.Write("Load xml data failed.");
throw
ex;
}
}
}
}
|
b、aspx，html和xml檔案（直接放在根目錄下）
aspx檔案是ajax請求頁面：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<%@ Page Language="C#"
AutoEventWireup="true"
CodeBehind="JQuery.aspx.cs"
Inherits="MyJqTest.JQuery"
%>
<head runat="server">
<title></title>
<script src="js/jquery-1.3.1.js"
type="text/javascript"></script>
</head>
<body>
<form id="form1"
runat="server">
<div>
<span style="display: none"
id="spanGetHtml"></span>
<br />
Please input a name:<input id="txtUserName"
type="text"
/><input id="btnJQAjax"
type="button"
value="jQuery ajax 請求"
onclick="jqAjaxTest()"
/>
<span style="display: none"
id="spanResult"></span>
</div>
<script src="js/jQTest.js"
type="text/javascript"></script>
</form>
</body>
</html>
|
html很簡單：
test.htm：
| 1 2 3 4 5 6 7 8 9 |
<head>
<title></title>
</head>
<body>
<div>it is a simple ajax test</div>
</body>
</html>
|
xml檔案：
jeffWong.xml：
1
2
3
4
相關推薦Ajax用法例項詳解本文例項講述了jQuery學習筆記之Ajax用法。分享給大家供大家參考，具體如下： 一、Ajax請求 1、jQuery.ajax(options) 通過 HTTP 請求載入遠端資料。jQuery 底層 AJAX 實現。簡單易用的高層實現見 .get,.post 等。 javascript中this用法例項詳解JavaScript中的this含義非常豐富，它可以是全域性物件，當前物件或者是任意物件，這都取決於函式的呼叫方式。函式有以下幾種呼叫方式：作為物件方法呼叫、作為函式呼叫、作為建構函式呼叫、apply或call呼叫。 物件方法呼叫 作為物件方法呼叫的時候，this會被繫結到該物件。 ? js事件監聽器用法例項詳解本文例項講述了js事件監聽器用法。分享給大家供大家參考。具體分析如下： 1、當同一個物件使用.onclick的寫法觸發多個方法的時候，後一個方法會把前一個方法覆蓋掉，也就是說，在物件的onclick事件發生時，只會執行最後繫結的方法。而用事件監聽則不會有覆蓋的現象，每個繫結的事件都會被執行。 vue 元件高階用法例項詳解一、遞迴元件 元件在它的模板內可以遞迴地呼叫自己， 只要給元件設定name 的選項就可以了。 示例如下： <div id="app19"> <my-component19 :count="1"></my-component19> </ MySQL欄位自增長AUTO_INCREMENT用法例項詳解之前有碰到過開發同事指出一張InnoDB表的自增列 AUTO_INCREMENT 值莫明的變大，由於這張表是通過mysqldump匯出匯入的。 問題排查： 1、首先，查看錶表義的sql部分的 auto_increment 值部分是正常，所以排除是匯入表問題所引起的；2、最後，經過溝通了解懷疑是插入時 Python多程序併發(multiprocessing)用法例項詳解python多執行緒的限制python多執行緒有個討厭的限制，全域性直譯器鎖（global interpreter lock），這個鎖的意思是任一時間只能有一個執行緒使用直譯器，跟單cpu跑多個程式一個意思，大家都是輪著用的，這叫“併發”，不是“並行”。手冊上的解釋是為了保證 C++ pair的用法例項詳解（結構體模板應用初探）1 pair的應用（結構體模板）pair是將2個數據組合成一個數據，當需要這樣的需求時就可以使用pair，如stl中的map就是將key和value放在一起來儲存。另一個應用是，當一個函式需要返回2個數據的時候，可以選擇pair。標頭檔案：#include<utilit Ajax實戰——例項詳解這本書怎麼樣關於Ajax實戰——例項詳解 評論讀後感：實戰講的還不錯，主要是講前臺，後臺只是講一點，重點分明，很棒！讀後感：一直沒用過Ajax，感覺還不錯讀後感：我是先看了和這本書是同一系列的之後才看這本書的,作為一個ajax應用的實際開發者,有著不少體會,那就是至少這本書裡面的內容不是 Oracle觸發器用法例項詳解本文例項講述了Oracle觸發器用法。分享給大家供大家參考，具體如下： 一、觸發器簡介 觸發器的定義就是說某個條件成立的時候，觸發器裡面所定義的語句就會被自動的執行。因此觸發器不需要人為的去呼叫，也不能呼叫。然後，觸發器的觸發條件其實在你定義的時候就已經設定好了。這裡面需 PHP單例模式和工廠模式用法例項詳解設計模式是一套被反覆使用、多數人知曉的、經過分類編目的、程式碼設計經驗的總結。使用設計模式是為了可重用程式碼、讓程式碼更容易被他人理解、保證程式碼可靠性。毫無疑問，設計模式於己於他人於系統都是多贏的；設計模式使程式碼編制真正工程化；設計模式是軟體工程的基石脈絡，如同大廈的結 JavaScript中window.open用法例項詳解本文較為詳細的分析了JavaScript中window.open用法。分享給大家供大家參考。具體如下： 複製程式碼 程式碼如下: <script LANGUAGE="javascript"> window.open ('page.html', 'newwind 使用者登入驗證Ajax例項詳解程式的思路主要是：頁面載入時呼叫init判斷客戶端是否存有網站所需的cookies，如果有的話取相應cookies到服務端驗證，通過驗證顯示成功提示，反之顯示登入框，同樣如果沒有所需cookies也顯示登入框直到使用者輸入正確的使用者名稱和密碼。整個過程兩次用到了ajax，一 java中List的用法和例項詳解的用法List包括List介面以及List介面的所有實現類。因為List介面實現了Collection介面，所以List介面擁有Collection介面提供的所有常用方法，又因為List是列表型別，所以List介面還提供了一些適合於自身的常用方法，如表1所示。表1 List介面定義的常用方法及功能從表1可以看 MVC之Ajax.BeginForm使用詳解之更新列表分布 use html text col 返回 uno pts scripts 1.首先，請在配置文件設置如下：(該項默認都存在且為true) <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 2 Linux top命令的用法詳細詳解command load 命令 技術分享 服務 範圍 web服務器 睡眠狀態 打開 查看多核CPU命令mpstat -P ALL 和 sar -P ALL 說明：sar -P ALL > aaa.txt 重定向輸出內容到文件 aaa.txt top命令經 springmvc ajax傳值詳解div ring ajax info clas spring image png 技術 springmvc ajax傳值詳解 sed詳細用法及詳解sed#語法：sed [options] ‘command‘ in_file[s] options 部分：-n 靜默輸出(不打印默認輸出) -e 給予sed多個命令的時候需要-e選項#sed -e ‘s/root/haha/g‘ -e ‘s/bash/wwwww/g‘ passwd > passwd.b JAVA中this的三種用法的詳解enc 所有 其它 println 用途 詳細介紹 示例 一次 調用構造 this關鍵字必須放在非靜態方法裏面 this關鍵字代表自身，在程序中主要的使用用途有以下幾個方面： 使用this關鍵字引用成員變量 使用this關鍵字在自身構造方法內部引用其它構造方 AJAX(二）詳解GET/POST請求round 參數 context 步驟 quest turn 異步請求 讀取 ie瀏覽器 上次是最簡單的原生JS實現AJAX效果。不過，那簡單的步驟不能適應各種不同的瀏覽器，尤其是萬惡的IE，尤其是低版本的IE瀏覽器。本期就來搞定各個瀏覽器，以及其他各項參數的設置。 [譯]例項詳解防抖與節流（乾貨！！！）lodash原始碼中推薦的文章，為了學習（英語），翻譯了一下~ 原文連結 作者：DAVID CORBACHO 本文來自一位倫敦前端工程師DAVID CORBACHO的技術投稿。我們在之前討論過這個話題（關於防抖與節流），但這次，DAVID CORBACHO通過生動的演示會將它們講的十分清晰，通俗易懂。 |