Ajax+Node.js前后端交互最佳入门实践(05)
生活随笔
收集整理的這篇文章主要介紹了
Ajax+Node.js前后端交互最佳入门实践(05)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
5.ajax簡介
5.1.什么是ajax
Asynchronous JavaScript and XML ,異步的javascript和XML
5.2.使用ajax有什么用
數據交互，可以從服務器獲取到數據，也可以從前臺把數據發送到后臺服務器
5.3.如何使用ajax
5.3.1 ajax程序流程
ajax技術就相當于使用js引擎去模擬瀏覽器提交的行為，試想一下，如果要去訪問一個網頁要經歷幾個步驟？
1、打開瀏覽器
2、輸入網址
3、回車提交 發送請求
4、等待服務器響應 返回內容
ajax技術使用js引擎去發送數據實際上也有以上幾個步驟。
舉個栗子：?index.html代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <button id="btn">獲取數據</button> <div id="box"></div> <script>var oBtn = document.getElementById('btn');var oBox = document.getElementById('box');oBtn.onclick = function () {var xhr = new XMLHttpRequest();xhr.open('get', '/getdata', true);xhr.send();xhr.onreadystatechange = function () {if(xhr.readyState === 4 && xhr.status === 200){oBox.innerText = xhr.responseText;}}} </script> </body> </html>
下面是服務器端index.js代碼：
var http = require('http'); var url = require('url'); var fs = require('fs'); var app = http.createServer(function (req, res) {res.setHeader('content-type', 'text/html;charset=utf-8');var url_obj = url.parse(req.url);if(url_obj.pathname === '/'){fs.readFile('./index.html','utf-8', function (err, data) {if(!err){res.write(data);res.end();}})}// 處理ajax請求if(url_obj.pathname === '/getdata'){res.write('hello world');res.end();} }); app.listen(3000);
轉載于:https://www.cnblogs.com/nodeing/p/8809042.html
總結
以上是生活随笔為你收集整理的Ajax+Node.js前后端交互最佳入门实践(05)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 1012: [JSOI2008]最大数m
- 下一篇： ZooKeeper架构设计及其应用要点