前端学习（1431）：ajax封装六
生活随笔
收集整理的這篇文章主要介紹了
前端学习（1431）：ajax封装六
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
ajax.js
// 引入express框架 const express = require('express'); // 路徑處理模塊 const path = require('path'); const bodyParser = require('body-parser'); const fs = require('fs'); // 創建web服務器 const app = express();app.use(bodyParser.json());// 靜態資源訪問服務功能 app.use(express.static(path.join(__dirname)));// 對應01html文件 app.get('/first', (req, res) => {res.send('Hello, Ajax'); });// 對應02html文件 app.get('/responseData', (req, res) => {res.send({ "name": "zs" }); });// 對應03html文件 app.get('/get', (req, res) => {res.send(req.query); });// 對應04html文件 app.post('/post', (req, res) => {res.send(req.body); });// 對應05html文件 app.post('/json', (req, res) => {res.send(req.body); });// 對應06html文件 app.get('/readystate', (req, res) => {res.send('hello'); });// 對應07html文件 app.get('/error', (req, res) => {//console.log(abc);res.status(400).send('not ok'); });// 對應08html文件 app.get('/cache', (req, res) => {fs.readFile('./test.txt', (err, result) => {res.send(result);}); });// 監聽端口 app.listen(3000); // 控制臺提示輸出 console.log('服務器啟動成功');ajax10.html
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title> </head><body><script type="text/javascript">function ajax(options) {// 存儲的是默認值var defaults = {type: 'get',url: '',data: {},header: {'Content-Type': 'application/x-www-form-urlencoded'},success: function() {},error: function() {}};// 使用options對象中的屬性覆蓋defaults對象中的屬性Object.assign(defaults, options);// 創建ajax對象var xhr = new XMLHttpRequest();// 拼接請求參數的變量var params = '';// 循環用戶傳遞進來的對象格式參數for (var attr in defaults.data) {// 將參數轉換為字符串格式params += attr + '=' + defaults.data[attr] + '&';}// 將參數最后面的&截取掉 // 將截取的結果重新賦值給params變量params = params.substr(0, params.length - 1);// 判斷請求方式if (defaults.type == 'get') {defaults.url = defaults.url + '?' + params;}/*{name: 'zhangsan',age: 20}name=zhangsan&age=20*/// 配置ajax對象xhr.open(defaults.type, defaults.url);// 如果請求方式為postif (defaults.type == 'post') {// 用戶希望的向服務器端傳遞的請求參數的類型var contentType = defaults.header['Content-Type']// 設置請求參數格式的類型xhr.setRequestHeader('Content-Type', contentType);// 判斷用戶希望的請求參數格式的類型// 如果類型為jsonif (contentType == 'application/json') {// 向服務器端傳遞json數據格式的參數xhr.send(JSON.stringify(defaults.data))} else {// 向服務器端傳遞普通類型的請求參數xhr.send(params);}} else {// 發送請求xhr.send();}// 監聽xhr對象下面的onload事件// 當xhr對象接收完響應數據后觸發xhr.onload = function() {// xhr.getResponseHeader()// 獲取響應頭中的數據var contentType = xhr.getResponseHeader('Content-Type');// 服務器端返回的數據var responseText = xhr.responseText;// 如果響應類型中包含applicaition/jsonif (contentType.includes('application/json')) {// 將json字符串轉換為json對象responseText = JSON.parse(responseText)}// 當http狀態碼等于200的時候if (xhr.status == 200) {// 請求成功 調用處理成功情況的函數defaults.success(responseText, xhr);} else {// 請求失敗 調用處理失敗情況的函數defaults.error(responseText, xhr);}}}ajax({url: 'http://localhost:3000/responseData',success: function(data) {console.log('這里是success函數');console.log(data)}})/*請求參數要考慮的問題1.請求參數位置的問題將請求參數傳遞到ajax函數內部, 在函數內部根據請求方式的不同將請求參數放置在不同的位置get 放在請求地址的后面post 放在send方法中2.請求參數格式的問題application/x-www-form-urlencoded參數名稱=參數值&參數名稱=參數值name=zhangsan&age=20application/json{name: 'zhangsan', age: 20}1.傳遞對象數據類型對于函數的調用者更加友好2.在函數內部對象數據類型轉換為字符串數據類型更加方便*/</script> </body></html>ajax1.html
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title> </head><body><script type="text/javascript">// 1.創建ajax對象var xhr = new XMLHttpRequest();// 2.告訴Ajax對象要向哪發送請求，以什么方式發送請求// 1)請求方式 2)請求地址xhr.open('get', 'http://localhost:3000/responseData');// 3.發送請求xhr.send();// 4.獲取服務器端響應到客戶端的數據xhr.onload = function() {// console.log(typeof xhr.responseText)// 將JSON字符串轉換為JSON對象var responseText = JSON.parse(xhr.responseText);// 測試：在控制臺輸出處理結果console.log(responseText)// 將數據和html字符串進行拼接var str = '<h2>' + responseText.name + '</h2>';// 將拼接的結果追加到頁面中document.body.innerHTML = str;}</script> </body></html>運行結果
總結
以上是生活随笔為你收集整理的前端学习（1431）：ajax封装六的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTTP缓存-http强制缓存与协商缓存
- 下一篇： 前端学习（740）：函数返回值注意事项