當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

5.jQueryAjax

發布時間：2023/12/2 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 5.jQueryAjax 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.jQuery

什么是 jQuery ？

jQuery是一個JavaScript函數庫。jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。包含以下功能：

HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函數
JavaScript 特效和動畫
HTML DOM 遍歷和修改
AJAX
Utilities

引用：

jQuery 語法

jQuery 語法是通過選取 HTML 元素，并對選取的元素執行某些操作。

基礎語法：?$(selector).action()

美元符號定義 jQuery
選擇符（selector）"查詢"和"查找" HTML 元素
jQuery 的 action() 執行對元素的操作

實例:

$(this).hide() - 隱藏當前元素

$("p").hide() - 隱藏所有段落

$("p .test").hide() - 隱藏所有 class="test" 的段落

$("#test").hide() - 隱藏所有 id="test" 的元素

文檔就緒事件

您也許已經注意到在我們的實例中的所有 jQuery 函數位于一個 document ready 函數中：

$(document).ready(function(){// 開始寫 jQuery 代碼... }); 或是$(function(){// 開始寫 jQuery 代碼... });

jQuery 基本選擇器

//元素選擇器 $(document).ready(function(){ $("button").click(function(){ $("p").hide(); //選擇P標簽 }); });//#ID選擇器 $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });//.class 選擇器 $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });//

jQeury基本操作

//addClass()方法給元素加class $(".text-primary").addClass("animated shake");//刪除HTML元素的class $("#target2").removeClass("btn-default");//改變HTML元素的CSS樣式 $("#target1").css("color", "blue"); //注意此處屬性和值都是“”//設置元素不可用 $("button").prop("disabled", true);//改變元素中的文本 $("h3").html("<em>jQuery Playground</em>");//刪除一個HTML元素 $("#target4").remove();//使用appendTo()移動HTML元素 $("#target4").appendTo("#left-well");//使用clone()方法復制元素 $("#target2").clone().appendTo("#right-well");//使用parent()操作父級元素 $("#left-well").parent().css("background-color", "blue")//使用parent()操作子級元素 $("#left-well").children().css("color", "blue")//使用target:nth-child(n) CSS選擇器獲取子元素 $(".target:nth-child(3)").addClass("animated bounce");//使用選擇器操作偶數索引元素，因為索引0對應的是第一個元素，所以奇數索引，偶數元素， $(".target:odd").addClass("animated shake");偶數 $(".target:even").addClass("animated shake");奇數

2.Ajax

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

AJAX的工作原理相當于在用戶和服務器之間加了—個中間層(AJAX引擎)，使用戶操作與服務器響應異步化。
先來敲個Ajax實例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest){// code for IE7 , Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();} else{// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}} xmlhttp.open("GET","/statics/demosource/ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body><div id="myDiv"><h2>使用 AJAX 修改該文本內容</h2></div> <button type="button" onclick="loadXMLDoc()">修改內容</button></body> </html>

AJAX - 創建?XMLHttpRequest?對象

XMLHttpRequest 是 AJAX 的基礎。XmlHttpRequest 術語縮寫為XHR，中文可以解釋為可擴展超文本傳輸請求。?

XMLHttpRequest 對象可以在不向服務器提交整個頁面的情況下，實現局部更新網頁。

構建代碼：

var xmlhttp; if (window.XMLHttpRequest) {// code for IE7 , Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

XHR 請求

如需將請求發送到服務器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();

open(method,url,async)：

method：請求的類型；GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步）

send(string)：將請求發送到服務器。

string：僅用于 POST 請求

GET請求：

xmlhttp.open("GET","demo_get2.html?fname=Henry&name=Ford",true); xmlhttp.send();

POST請求：

xmlhttp.open("POST","ajax_test.html",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");

XHR 響應

獲得來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

responseText：獲得字符串形式的響應數據。
responseXML：獲得 XML 形式的響應數據。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText; xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i ) { txt=txt x[i].childNodes[0].nodeValue "<br>"; } document.getElementById("myDiv").innerHTML=txt;

當發送一個請求后，客戶端需要確定這個請求什么時候會完成，因此，XMLHttpRequest對象提供了 onreadystatechange 事件機制來捕獲請求的狀態，繼而實現響應。

在 onreadystatechange 事件中，我們規定當服務器響應已做好被處理的準備時所執行的任務。

當 readyState 等于 4 且狀態為 200 時，表示響應已就緒：

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }

XHR.readyState狀態的變化如下：

0：請求未初始化，還沒有調用?open()。?
1：請求已經建立，但是還沒有發送，還沒有調用?send()。??
2：請求已發送，正在處理中（通常現在可以從響應中獲取內容頭）。??
3：請求在處理中；通常響應中已有部分數據可用了，沒有全部完成。??
4：響應已完成；您可以獲取并使用服務器的響應了。

更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的5.jQueryAjax的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

jQueryAjax