html页面
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./css/index.css"> </head> <body> 首页 <button id="loadData">加载数据</button> <div id="updata"></div> </body> <script type="text/javascript"> //原生ajax网络请求 document.querySelector('#loadData').addEventListener('click', (ev)=>{ // 1.创建XMLHttpRequest对象 兼容低版本浏览器 let xhr = new XMLHttpRequest() || new ActiveXObject('microsoft.XMLHTTP') // 2.建立请求连接通道 xhr.open('get', 'interface.json')//相对路径
//get与post区别 // get请求发送参数接收不到,参数拼接到url地址中 // http://localhost:8888/interface.json?count=1&name=jack&age=18 // post请求发送可穿参 xhr.send('count=1&name=jack&age=18') // post请求需要设置类型 //Content-type数据请求的格式 // xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 3.发送请求
xhr.send() // 4.监听相应内容 xhr.onreadystatechange = () => { // readyState:返回当前文档的载入状态 // 0-(未初始化)还没有调用send()方法 // 1-(载入)已调用send()方法,正在发送请求 // 2-(载入完成)send()方法执行完成,已经接收到全部响应内容 // 3-(交互)正在解析响应内容 // 4-(完成)响应内容解析完成,可以在客户端调用了 if (xhr.readyState == 4) { // status常用状态 200成功 304重定向状态 404客户端错误状态 500 服务器错误 let status = xhr.status if (status>=200 && status<300 || status==304) //请求返回的数据保存在xhr.responseText属性中 // 决定数据是由xhr.readyState传送过来, status只是定义的状态码 updata(xhr.responseText) } } }) function updata (data) { document.querySelector('#updata').innerHTML = data } </script> </html>
node.js
let http = require('http') let fs = require('fs') let url = require('url') let querystring = require('querystring') let server = http.createServer((req, res)=>{ let urlObj = url.parse(req.url) let querystringObj = querystring.parse(urlObj.query) //数据接口监听 if (urlObj.pathname == '/interface.json') {res.end("{name: 'jack', age: 18, job: 'web'}")} else { //静态资源管理 fs.readFile(__dirname + '/src' + urlObj.pathname, (err, data)=> { if (err) return err else res.end(data) }) } }).listen(8888)