當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端之AJAX

發布時間：2024/4/17 HTML 46 豆豆

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

JSON

是一種輕量級的數據交換格式。JSON是用字符串來表示Javascript對象；

json字符串就是js對象的一種表現形式(字符串的形式)

var?person = {"name":"alex",
? ? ? ? ? ? ?"sex":"men",
? ? ? ? ? ? ?"teacher":{
? ? ? ? ? ? ? ??"name":"tiechui",
? ? ? ? ? ? ? ? ?"sex":"half_men",
? ? ? ? ? ? ?},
? ? ? ? ? ? ?"bobby":['basketball','running'],

? ? ? ? ? ? ??"getName":function()?{return?80;}
? ? ? ? ? ? ?};
alert(person.name);
alert(person.getName());
alert(person.teacher.name);
alert(person.bobby[0]);

parse()和.stringify()

parse() 用于從一個json字符串中解析出json對象,如
var?str =?'{"name":"yuan","age":"23"}'
結果：JSON.parse(str) ? ? ------> ?Object??{age:?"23",name:?"yuan"}

stringify()用于從一個json對象解析成json字符串，如
var?c= {a:1,b:2}?
結果： ?JSON.stringify(c) ? ? ------> ? ? ?'{"a":1,"b":2}'

注意1：單引號寫在{}外，每個屬性名都必須用雙引號，否則會拋出異常。
注意2:
a={name:"yuan"}; ??//ok
b={'name':'yuan'};?//ok
c={"name":"yuan"};?//ok
alert(a.name); ?//ok
alert(a[name]);?//undefined
alert(a['name'])?//ok

什么是AJAX

AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML，現在用的較多的是json）。

同步交互：客戶端發出一個請求后，需要等待服務器響應結束后，才能發出第二個請求；

異步交互：客戶端發出一個請求后，無需等待服務器響應結束，就可以發出第二個請求。

AJAX除了異步的特點外，還有一個就是：瀏覽器頁面局部刷新；（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）

AJAX常見應用情景

當我們在百度中輸入一個“老”字后，會馬上出現一個下拉列表！列表中顯示的是包含“傳”字的4個關鍵字。

其實這里就使用了AJAX技術！當文件框發生了輸入變化時，瀏覽器會使用AJAX技術向服務器發送一個請求，查詢包含“傳”字的前10個關鍵字，然后服務器會把查詢到的結果響應給瀏覽器，最后瀏覽器把這4個關鍵字顯示在下拉列表中。

整個過程中頁面沒有刷新，只是刷新頁面中的局部位置而已！

當請求發出后，瀏覽器還可以進行其他操作，無需等待服務器的響應！

當輸入用戶名后，把光標移動到其他表單項上時，瀏覽器會使用AJAX技術向服務器發出請求，服務器會查詢名為zhangSan的用戶是否存在，最終服務器返回true表示名為lemontree7777777的用戶已經存在了，瀏覽器在得到結果后顯示“用戶名已被注冊！”。

整個過程中頁面沒有刷新，只是局部刷新了；

在請求發出后，瀏覽器不用等待服務器響應結果就可以進行其他操作；

AJAX的優缺點

優點：

AJAX使用Javascript技術向服務器發送異步請求；
AJAX無須刷新整個頁面；
因為服務器響應內容不再是整個頁面，而是頁面中的局部，所以AJAX性能高；

缺點：

AJAX并不適合所有場景，很多時候還是要使用同步交互；
AJAX雖然提高了用戶體驗，但無形中向服務器發送的請求次數增多了，導致服務器壓力增大；
因為AJAX是在瀏覽器中使用Javascript技術完成的，所以還需要處理瀏覽器兼容性問題；

AJAX技術

四步操作：

創建核心對象；
使用核心對象打開與服務器的連接；
發送請求
注冊監聽，監聽服務器響應。

?

XMLHTTPRequest

open(請求方式, URL,?是否異步)
send(請求體)
onreadystatechange，指定監聽函數，它會在xmlHttp對象的狀態發生變化時被調用
readyState，當前xmlHttp對象的狀態，其中4狀態表示服務器響應結束
status：服務器響應的狀態碼，只有服務器響應結束時才有這個東東，200表示響應成功；
responseText：獲取服務器的響應體

AJAX核心（XMLHttpRequest）

其實AJAX就是在Javascript中多添加了一個對象：XMLHttpRequest對象。所有的異步交互都是使用XMLHttpServlet對象完成的。也就是說，我們只需要學習一個Javascript的新對象即可。

var?xmlHttp =?new?XMLHttpRequest()；（大多數瀏覽器都支持DOM2規范）

注意，各個瀏覽器對XMLHttpRequest的支持也是不同的！為了處理瀏覽器兼容問題，給出下面方法來創建XMLHttpRequest對象：

function?createXMLHttpRequest()?{
? ? ? ?var?xmlHttp;
? ? ? ?// 適用于大多數瀏覽器，以及IE7和IE更高版本
? ? ? ?try{
? ? ? ? ? ?xmlHttp =?new?XMLHttpRequest();
? ? ? ?}?catch?(e) {
? ? ? ? ? ?// 適用于IE6
? ? ? ? ? ?try?{
? ? ? ? ? ? ? ?xmlHttp =?new?ActiveXObject("Msxml2.XMLHTTP");
? ? ? ? ? ?}?catch?(e) {
? ? ? ? ? ? ? ?// 適用于IE5.5，以及IE更早版本
? ? ? ? ? ? ? ?try{
? ? ? ? ? ? ? ? ? ?xmlHttp =?new?ActiveXObject("Microsoft.XMLHTTP");
? ? ? ? ? ? ? ?}?catch?(e){}
? ? ? ? ? ?}
? ? ? ?} ? ? ? ? ? ?
? ? ? ?return?xmlHttp;
? ?}

打開與服務器的連接（open方法）

當得到XMLHttpRequest對象后，就可以調用該對象的open()方法打開與服務器的連接了。open()方法的參數如下：

open(method, url, async)：

method：請求方式，通常為GET或POST；
url：請求的服務器地址，例如：/ajaxdemo1/AServlet，若為GET請求，還可以在URL后追加參數；
async：這個參數可以不給，默認值為true，表示異步請求；

var?xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET",?"/ajax_get/",?true);

發送請求

當使用open打開連接后，就可以調用XMLHttpRequest對象的send()方法發送請求了。send()方法的參數為POST請求參數，即對應HTTP協議的請求體內容，若是GET請求，需要在URL后連接參數。

注意：若沒有參數，需要給出null為參數！若不給出null為參數，可能會導致FireFox瀏覽器不能正常發送請求！

xmlHttp.send(null);

接收服務器響應

當請求發送出去后，服務器端Servlet就開始執行了，但服務器端的響應還沒有接收到。接下來我們來接收服務器的響應。

XMLHttpRequest對象有一個onreadystatechange事件，它會在XMLHttpRequest對象的狀態發生變化時被調用。下面介紹一下XMLHttpRequest對象的5種狀態：

0：初始化未完成狀態，只是創建了XMLHttpRequest對象，還未調用open()方法；
1：請求已開始，open()方法已調用，但還沒調用send()方法；
2：請求發送完成狀態，send()方法已調用；
3：開始讀取服務器響應；
4：讀取服務器響應結束。?

onreadystatechange事件會在狀態為1、2、3、4時引發。

下面代碼會被執行四次！對應XMLHttpRequest的四種狀態！

xmlHttp.onreadystatechange =?function()?{
? ? ? ? ? ?alert('hello');
? ? ? ?};

但通常我們只關心最后一種狀態，即讀取服務器響應結束時，客戶端才會做出改變。我們可以通過XMLHttpRequest對象的readyState屬性來得到XMLHttpRequest對象的狀態。

xmlHttp.onreadystatechange =?function()?{
? ? ? ? ? ?if(xmlHttp.readyState ==?4) {
? ? ? ? ? ? ? ?alert('hello'); ? ?
? ? ? ? ? ?}
? ? ? ?};

其實我們還要關心服務器響應的狀態碼是否為200，其服務器響應為404，或500，那么就表示請求失敗了。我們可以通過XMLHttpRequest對象的status屬性得到服務器的狀態碼。

最后，我們還需要獲取到服務器響應的內容，可以通過XMLHttpRequest對象的responseText得到服務器響應內容。

xmlHttp.onreadystatechange =?function()?{
? ? ? ? ? ?if(xmlHttp.readyState ==?4?&& xmlHttp.status ==?200) {
? ? ? ? ? ? ? ?alert(xmlHttp.responseText); ? ?
? ? ? ? ? ?}
? ? ? ?};

if 發送POST請求：

需要設置請求頭：xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)；

請求完整代碼：

<h1>AJAX</h1>
<button?onclick="send()">測試</button>
<div?id="div1"></div>
<script>
? ? ??function?createXMLHttpRequest()?{
? ? ? ? ? ?try?{
? ? ? ? ? ? ? ?return?new?XMLHttpRequest();//大多數瀏覽器
? ? ? ? ? ?}?catch?(e) {
? ? ? ? ? ? ? ?try?{
? ? ? ? ? ? ? ? ? ?return?new?ActiveXObject("Msxml2.XMLHTTP");
? ? ? ? ? ? ? ?}?catch?(e) {
? ? ? ? ? ? ? ? ? ?return?new?ActiveXObject("Microsoft.XMLHTTP");
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?}

? ? ? ?function?send()?{
? ? ? ? ? ?var?xmlHttp = createXMLHttpRequest();
? ? ? ? ? ?xmlHttp.onreadystatechange =?function()?{
? ? ? ? ? ? ? ?if(xmlHttp.readyState ==?4?&& xmlHttp.status ==?200) {
? ? ? ? ? ? ? ? ? ?var?div =?document.getElementById("div1");
? ? ? ? ? ? ? ? ? ?div.innerText = xmlHttp.responseText;
? ? ? ? ? ? ? ? ? ?div.textContent = xmlHttp.responseText;
? ? ? ? ? ? ? ?}
? ? ? ? ? ?};
? ? ? ? ? ?xmlHttp.open("POST",?"/ajax_post/",?true);
? ? ? ? ? ?post: xmlHttp.setRequestHeader("Content-Type",?"application/x-www-form-urlencoded");
? ? ? ? ? ?xmlHttp.send("b=B"); ?
? ? ? ?}
</script>

AJAX實例（用戶名是否已被注冊）

轉載于:https://www.cnblogs.com/IT-Scavenger/p/9256883.html

總結

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

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

Ajax

上一篇： IO流与NIO流
下一篇： springMVC接收前端参数的方式