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

编程问答

ajax入门篇

發布時間：2025/3/11 编程问答 17 豆豆

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

什么是ajax

AJAX即“Asynchronous JavaScript and XML”（異步的JavaScript與XML技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。Ajax的概念由杰西·詹姆士·賈瑞特所提出[1]。

傳統的Web應用允許用戶端填寫表單（form），當提交表單時就向網頁服務器發送一個請求。服務器接收并處理傳來的表單，然后送回一個新的網頁，但這個做法浪費了許多帶寬，因為在前后兩個頁面中的大部分HTML碼往往是相同的。由于每次應用的溝通都需要向服務器發送請求，應用的回應時間依賴于服務器的回應時間。這導致了用戶界面的回應比本機應用慢得多。

與此不同，AJAX應用可以僅向服務器發送并取回必須的數據，并在客戶端采用JavaScript處理來自服務器的回應。因為在服務器和瀏覽器之間交換的數據大量減少，服務器回應更快了。同時，很多的處理工作可以在發出請求的客戶端機器上完成，因此Web服務器的負荷也減少了。

類似于DHTML或LAMP，AJAX不是指一種單一的技術，而是有機地利用了一系列相關的技術。雖然其名稱包含XML，但實際上數據格式可以由JSON代替，進一步減少數據量，形成所謂的AJAJ。而客戶端與服務器也并不需要異步。一些基于AJAX的“派生／合成”式（derivative/composite）的技術也正在出現，如AFLAX

--------來自維基百科

XMLHttpRequest對象

創建XMLHttpRequest對象

var httpRequest=new XMLHttpRequest();

XMLHttpResquest對象的一些方法

方法或屬性作用

open(method,url,async)	規定請求的類型、URL 以及是否異步處理請求
	請求的類型：GET或者POST
	url：請求的文件在文件在服務器上的位置
	async：true或者false，代表著異步或者同步
send(String )	將請求發送到服務器
	String：僅用于 POST 請求
setRequestHeader(header,value)	使用POST來提交信息要添加 HTTP 頭
	header：規定頭的名稱
	value：規定頭的值
responseText	獲得字符串形式的響應數據
responseXML	獲得 XML 形式的響應數據
onreadystatechange 事件	請求狀態改變的事件觸發器大概指的是回調函數
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
status	200: “OK” ，404：未找到頁面

readyState

請求未初始化

服務器連接已建立

請求已接收

請求處理中

請求已完成，且響應已就緒

隨手案例

目錄

index.jsp代碼

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html><head><title>ajax</title></head><body>用戶名：<input type="text" id="username"><input type="submit" value="驗證用戶名" onclick="checkUsername()"><div id="B"></div></body> <script type="text/javascript">var httpRequest;function checkUsername() {if (window.XMLHttpRequest) {httpRequest = new XMLHttpRequest();}var name = document.getElementById("username").value;httpRequest.onreadystatechange = function () {if (httpRequest.readyState == 4 && httpRequest.status == 200) {var text = httpRequest.responseText;var div = document.getElementById("B");if(name==text){div.innerText = text;}else {div.innerText="用戶名有誤";}}//指定回調函數}httpRequest.open("post", "http://localhost:8080/ajaxtest_war_exploded//test.txt", true);httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//請求頭httpRequest.send("username=" + name);}</script> </html>

text.txt文件

演示結果

局部交互數據，不刷新界面。

總結

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

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

上一篇： Ubuntu16.04安装Hadoop+
下一篇： Kafka集群部署搭建完美标准版