當前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

一、AJAX学习笔记——原生AJAX （ajax简介、XML简介、ajax优缺点、ajax的使用）

發布時間：2024/7/5 asp.net 34 豆豆

生活随笔收集整理的這篇文章主要介紹了一、AJAX学习笔记——原生AJAX （ajax简介、XML简介、ajax优缺点、ajax的使用）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

第 1 章：原生 AJAX

1.1 AJAX 簡介

AJAX 全稱為 Asynchronous JavaScript And XML，就是異步的 JS 和 XML。通過 AJAX 可以在瀏覽器中向服務器發送異步請求，
最大的優勢：無刷新獲取數據。
AJAX 不是新的編程語言，而是一種將現有的標準組合在一起使用的新方式。

1.2 XML 簡介

XML 可擴展標記語言。 XML 被設計用來傳輸和存儲數據。 XML 和 HTML 類似，不同的是 HTML 中都是預定義標簽，而 XML 中沒有預定義標簽，全都是自定義標簽，用來表示一些數據.

比如說我有一個學生數據： name = "孫悟空" ; age = 18 ; gender = "男" ; 用 XML 表示： <student> <name>孫悟空</name> <age>18</age> <gender>男</gender> </student>

現在已經被 JSON 取代了。

1.3 AJAX 的特點

1.3.1 AJAX 的優點

可以無需刷新頁面而與服務器端進行通信。

允許你根據用戶事件來更新部分頁面內容。

1.3.2 AJAX 的缺點

沒有瀏覽歷史，不能回退

存在跨域問題(同源)

SEO 不友好

1.4 AJAX 的使用

1.4.1 核心對象

XMLHttpRequest，AJAX 的所有操作都是通過該對象進行的。

1.4.2 使用步驟

創建 XMLHttpRequest 對象 var xhr = new XMLHttpRequest();

設置請求信息 xhr.open(method, url); //可以設置請求頭，一般不設置
xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);

發送請求 xhr.send(body) //get 請求不傳 body 參數，只有 post 請求使用

接收響應 //xhr.responseXML 接收 xml 格式的響應數據 //xhr.responseText 接收文本格式的響應數據

xhr.onreadystatechange = function (){ if(xhr.readyState == 4 && xhr.status == 200){ var text = xhr.responseText; console.log(text); } }

1.4.3 解決 IE 緩存問題

問題：在一些瀏覽器中(IE),由于緩存機制的存在，ajax 只會發送的第一次請求，剩余多次請求不會在發送給瀏覽器而是直接加載緩存中的數據。

解決方式：瀏覽器的緩存是根據 url 地址來記錄的，所以我們只需要修改 url 地址即可避免緩存問題

xhr.open("get","/testAJAX?t="+Date.now());

1.4.4 AJAX 請求狀態

xhr.readyState 可以用來查看請求當前的狀態
0: 表示 XMLHttpRequest 實例已經生成，但是 open()方法還沒有被調用。
1: 表示 send()方法還沒有被調用，仍然可以使用 setRequestHeader()，設定 HTTP請求的頭信息。
2: 表示 send()方法已經執行，并且頭信息和狀態碼已經收到。
3: 表示正在接收服務器傳來的 body 部分的數據。
4: 表示服務器數據已經完全接收，或者本次接收已經失敗了

代碼演示：

1. ajax發送GET請求

get.html:

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>AJAX GET 請求</title><style type="text/css">#result {width: 200px;height: 100px;border: 1px solid pink;}</style></head><body><button>點擊發送請求</button><div id="result"></div><script>// 獲取button元素const btn = document.getElementsByTagName('button')[0];const result = document.getElementById('result');// 綁定事件btn.onclick = function() {// 1.創建對象const xhr = new XMLHttpRequest();// 2.初始化設置請求方法和 urlxhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200');// 3.發送xhr.send();// 4.事件綁定，處理服務端返回的結果xhr.onreadystatechange = function() {// 判斷 (服務端返回了所有的結果)if (xhr.readyState === 4) {// 判斷響應狀態碼 200 404 403 500if (xhr.status >= 200 && xhr.status < 300) {// 處理服務端響應結果行頭空行體// 1.響應行console.log(xhr.status); // 狀態碼console.log(xhr.statusText); // 狀態狀態字符串console.log(xhr.getAllResponseHeaders()); // 所有的響應頭信息console.log(xhr.response); // 響應體信息 // 設置result的文本 result.innerHTML = xhr.response;} else {}}}}</script></body> </html>

server.js:

// 1. 引入express const express = require('express')// 2. 創建應用對象 const app = express()// 3. 創建路由規則 app.get('/server', (request, response) => {// 設置響應頭設置允許跨域response.setHeader('Access-Control-Allow-Origin', '*')// response.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');// 設置響應體response.send('hello ajax') })// 4. 監聽端口啟動服務 app.listen(8000, () => {console.log('服務已經啟動，8000端口監聽中...') })

2. ajax發送POST請求

server.js :

// 1. 引入express const express = require('express')// 2. 創建應用對象 const app = express()// 3. 創建路由規則 app.get('/server', (request, response) => {// 設置響應頭設置允許跨域response.setHeader('Access-Control-Allow-Origin', '*')// response.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');// 設置響應體response.send('hello ajax') })app.post('/server', (request, response) => {// 設置響應頭設置允許跨域response.setHeader('Access-Control-Allow-Origin', '*')// response.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');// 設置響應體response.send('hello ajax post') })// 4. 監聽端口啟動服務 app.listen(8000, () => {console.log('服務已經啟動，8000端口監聽中...') })

post.html:

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>AJAX POST 請求</title><style type="text/css">#result {width: 200px;height: 100px;border: 1px solid pink;}</style></head><body><p>當鼠標懸浮在div上時發送請求</p><div id="result"></div><script>const result = document.getElementById('result');// 綁定事件result.addEventListener('mouseover', function() {// console.log('test')// 1. 創建對象const xhr = new XMLHttpRequest();// 2. 初始化設置請求類型和 urlxhr.open('POST', 'http://127.0.0.1:8000/server')// 3. 發送xhr.send('aaa=100&bbb=200')// 4. 事件綁定xhr.onreadystatechange = function() {// 判斷if(xhr.readyState === 4) {if(xhr.status >= 200 && xhr.status < 300) {// 處理服務器返回的結果result.innerHTML = xhr.response} else {}}}}) </script></body> </html>

ajax服務端響應json數據

json.html:

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>JSON</title><style type="text/css">#result {width: 200px;height: 100px;border: 1px solid pink;}</style></head><body><p>當按下鍵盤時發送請求</p><div id="result"></div><script>const result = document.getElementById('result');// 綁定鍵盤按下事件window.onkeydown = function () {// console.log('test')// 發送請求const xhr = new XMLHttpRequest();// 設置響應體數據類型xhr.responseType = 'json'// 初始化xhr.open('GET', 'http://127.0.0.1:8000/json-server')// 發送xhr.send()// 事件綁定xhr.onreadystatechange = function () {if(xhr.readyState === 4) {if(xhr.status >= 200 && xhr.status<300) {// 處理服務端返回結果// console.log(xhr.response)// result.innerHTML = xhr.response// 手動對服務器返回的數據進行轉化/* let data = JSON.parse(xhr.response)console.log(data)result.innerHTML = data.name */// 自動轉換，通過設置響應體數據類型xhr.responseType = 'json'console.log(xhr.response)result.innerHTML = xhr.response.name}}}}</script></body> </html>

server.js:

// 1. 引入express const express = require('express')// 2. 創建應用對象 const app = express()// 3. 創建路由規則 app.get('/server', (request, response) => {// 設置響應頭設置允許跨域response.setHeader('Access-Control-Allow-Origin', '*')// 設置響應體response.send('hello ajax') })// all 可以接收任意類型的請求 app.all('/server', (request, response) => {// 設置響應頭設置允許跨域response.setHeader('Access-Control-Allow-Origin', '*')// 允許前端post請求自定義請求頭名稱response.header('Access-Control-Allow-Headers', '*');// 設置響應體response.send('hello ajax post') })app.all('/json-server', (request, response) => {// 設置響應頭設置允許跨域response.setHeader('Access-Control-Allow-Origin', '*')// 允許前端post請求自定義請求頭名稱response.header('Access-Control-Allow-Headers', '*');// 響應一個數據const data = {name: 'zep'};// 對對象進行字符串轉換let str = JSON.stringify(data)// 設置響應體,send方法只接收字符串類型的參數response.send(str) })// 4. 監聽端口啟動服務 app.listen(8000, () => {console.log('服務已經啟動，8000端口監聽中...') })

手動對服務端返回的字符串數據進行轉換，把字符串轉成對象：

自動轉換，通過設置響應體數據類型xhr.responseType = ‘json’

總結

以上是生活随笔為你收集整理的一、AJAX学习笔记——原生AJAX （ajax简介、XML简介、ajax优缺点、ajax的使用）的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：十六、PHP框架Laravel学习笔记—
下一篇： .net get set 初始化_.NE