Ajax学习笔记（1）
生活随笔
收集整理的這篇文章主要介紹了
Ajax学习笔记（1）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
ajax學習（1）
1-安裝node.js
官網鏈接：nodejs
2-express Ajaxa 配置
如何配置express環境參考詳見博客
安裝express環境
Cannot find module ‘express’的解決方案
注：創建 一個空目錄 在該文件夾下打開cmd執行命令行
創建一個新的文件夾。
如果完成 GET.html 和 server.js 之后運行發現 Cannot find module ‘express 參考上面的鏈接，執行解決方案之后的目錄如下
2.1 express 測試代碼
express 測試代碼
參考 安裝 express 運行express-demo
2.2 ajax
GET.html（前端準備）
<!DOCTYPE html> <html lang="en"> <!-- <script src="../../jq/jquery-3.6.0.min.js"></script> --><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax get 請求</title><style>#result {width: 200px;height: 100px;border: solid 1px #bbb;}</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() {//創建對象const xhr = new XMLHttpRequest();// 初始化 設置請求方法和urlxhr.open('GET', 'http://localhost:8000/server?a=100&b=200&c=300');// 發送xhr.send();// 綁定事件 處理服務端的返回問題// 1- on when 當……時候// 2-readyState 是當 xhr 對象中的屬性，表示狀態 0(未初始化) 1（open調用完畢） 2（send調用完畢） 3（服務端返回部分結果） 4 （服務端返回所有結果）// 3- change 改變xhr.onreadystatechange = function() {// 判斷-服務器的所有返回結果if (xhr.readyState === 4) {// 判斷響應狀態碼// 200 403 404 401 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.innerHTML = xhr.response;} else {}}}}</script> </body></html>server.js（服務端準備）
//1-引入express const { response } = require('express'); const express = require('express'); const { request } = require('http'); //2-創建應用對象 const app = express(); //3-創建路由規則 //request 是對請求報文的封裝 //response 是對響應報文的封裝 app.get('/server', (request, response) => {//設置響應頭 允許跨域//header的 Access-Control-Allow-Orign 名字 設置 *response.setHeader('Access-Control-Allow-Orign', '*');//設置響應體response.send('hello Ajax'); }); //監聽端口啟動服務 app.listen(8000, () => {console.log("服務器已經啟動，8000 端口監聽中……"); })右鍵文件夾–>打開終端–>node server.js
注：如果上一個使用同一端口的程序沒有關閉，則 運行該程序時會報錯 。
測試
打開 http://localhost:8000/server
運行 GET.html
遇到的問題小結：
（1）consle.log 空 白
總結
以上是生活随笔為你收集整理的Ajax学习笔记（1）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Django学习之十一：真正理解Djan
- 下一篇： 关于2017届学长制作分享软件share