當(dāng)前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

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

發(fā)布時(shí)間：2024/7/5 asp.net 42 豆豆

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

第 1 章：原生 AJAX

1.1 AJAX 簡(jiǎn)介

AJAX 全稱為 Asynchronous JavaScript And XML，就是異步的 JS 和 XML。通過 AJAX 可以在瀏覽器中向服務(wù)器發(fā)送異步請(qǐng)求，
最大的優(yōu)勢(shì)：無刷新獲取數(shù)據(jù)。
AJAX 不是新的編程語言，而是一種將現(xiàn)有的標(biāo)準(zhǔn)組合在一起使用的新方式。

1.2 XML 簡(jiǎn)介

XML 可擴(kuò)展標(biāo)記語言。 XML 被設(shè)計(jì)用來傳輸和存儲(chǔ)數(shù)據(jù)。 XML 和 HTML 類似，不同的是 HTML 中都是預(yù)定義標(biāo)簽，而 XML 中沒有預(yù)定義標(biāo)簽，全都是自定義標(biāo)簽，用來表示一些數(shù)據(jù).

比如說我有一個(gè)學(xué)生數(shù)據(jù)： name = "孫悟空" ; age = 18 ; gender = "男" ; 用 XML 表示： <student> <name>孫悟空</name> <age>18</age> <gender>男</gender> </student>

現(xiàn)在已經(jīng)被 JSON 取代了。

1.3 AJAX 的特點(diǎn)

1.3.1 AJAX 的優(yōu)點(diǎn)

可以無需刷新頁面而與服務(wù)器端進(jìn)行通信。

允許你根據(jù)用戶事件來更新部分頁面內(nèi)容。

1.3.2 AJAX 的缺點(diǎn)

沒有瀏覽歷史，不能回退

存在跨域問題(同源)

SEO 不友好

1.4 AJAX 的使用

1.4.1 核心對(duì)象

XMLHttpRequest，AJAX 的所有操作都是通過該對(duì)象進(jìn)行的。

1.4.2 使用步驟

創(chuàng)建 XMLHttpRequest 對(duì)象 var xhr = new XMLHttpRequest();

設(shè)置請(qǐng)求信息 xhr.open(method, url); //可以設(shè)置請(qǐng)求頭，一般不設(shè)置
xhr.setRequestHeader(‘Content-Type’, ‘a(chǎn)pplication/x-www-form-urlencoded’);

發(fā)送請(qǐng)求 xhr.send(body) //get 請(qǐng)求不傳 body 參數(shù)，只有 post 請(qǐng)求使用

接收響應(yīng) //xhr.responseXML 接收 xml 格式的響應(yīng)數(shù)據(jù) //xhr.responseText 接收文本格式的響應(yīng)數(shù)據(jù)

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

1.4.3 解決 IE 緩存問題

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

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

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

1.4.4 AJAX 請(qǐng)求狀態(tài)

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

代碼演示：

1. ajax發(fā)送GET請(qǐng)求

get.html:

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

server.js:

2. ajax發(fā)送POST請(qǐng)求

server.js :

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

post.html:

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

ajax服務(wù)端響應(yīng)json數(shù)據(jù)

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>當(dāng)按下鍵盤時(shí)發(fā)送請(qǐng)求</p><div id="result"></div><script>const result = document.getElementById('result');// 綁定鍵盤按下事件window.onkeydown = function () {// console.log('test')// 發(fā)送請(qǐng)求const xhr = new XMLHttpRequest();// 設(shè)置響應(yīng)體數(shù)據(jù)類型xhr.responseType = 'json'// 初始化xhr.open('GET', 'http://127.0.0.1:8000/json-server')// 發(fā)送xhr.send()// 事件綁定xhr.onreadystatechange = function () {if(xhr.readyState === 4) {if(xhr.status >= 200 && xhr.status<300) {// 處理服務(wù)端返回結(jié)果// console.log(xhr.response)// result.innerHTML = xhr.response// 手動(dòng)對(duì)服務(wù)器返回的數(shù)據(jù)進(jìn)行轉(zhuǎn)化/* let data = JSON.parse(xhr.response)console.log(data)result.innerHTML = data.name */// 自動(dòng)轉(zhuǎn)換，通過設(shè)置響應(yīng)體數(shù)據(jù)類型xhr.responseType = 'json'console.log(xhr.response)result.innerHTML = xhr.response.name}}}}</script></body> </html>

server.js:

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

手動(dòng)對(duì)服務(wù)端返回的字符串?dāng)?shù)據(jù)進(jìn)行轉(zhuǎn)換，把字符串轉(zhuǎn)成對(duì)象：

自動(dòng)轉(zhuǎn)換，通過設(shè)置響應(yīng)體數(shù)據(jù)類型xhr.responseType = ‘json’

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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