什么是前后端分离
解析
客户端发起请求，后端响应内容，
后端响应的内容，可以多种类型
字符串1. json格式对象(数组,Object)
2. html字符串
ajax技术
ajax是异步网络通讯技术，在不刷新网页的情况获取后端数据
XMLHttpRequest 是ajax技术的核心对象
怎么使用ajax技术
1. 创建对象
let xhr = new XMLHttpRequest()
2. 建立连接
xhr.open(method,url,true)
- 请求方法 method:
get 获取数据
- url: http://10.7.162.67:3000/
- true|false 异步与同步
3. 发送请求
xhr.send()
4. 接收响应内容
xhr.onreadystatechange = function(){
// 响应数据是否完成
// readyState 就绪码: 0 1 2 3 4
//4为就绪
// 0：请求没有发出（在调用 open() 之前）。
// 1：请求已经建立但还没有发出（调用 send() 之前）。
// 2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
// 3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。
// 4：响应已完成，可以访问服务器响应并使用它
if(xhr.readyState === 4){
// 响应是成功还是失败
// status 状态 200 成功
if(xhr.status === 200){
// 获取成功响应的数据
let data = xhr.responseText
}
}
}
实例
后端
let http = require('http') // 引入内置http模块
// 创建一个web服务
let server = http.createServer(function (request, response) {
// request 请求对象
// response 响应对象
// 跨域问题
response.setHeader('Access-Control-Allow-Origin','*')
// 解决乱码
response.writeHead(200, { 'content-type': 'text/html;charset=utf-8' })
// 商品列表
let productList = [
{
number: 1001,
name: 'javascript高级编程',
url: './image/shoppingBg_03.jpg',
price: 88.98,
num: 0,
state: false,
},
{ number: 1002, name: 'css高级编程', url: './image/shoppingBg_06.jpg', price: 58.58, num: 0, state: false },
{ number: 1003, name: 'html高级编程', url: './image/shoppingBg_03.jpg', price: 48.58, num: 0, state: false },
]
//对象转字符串方法
productList = JSON.stringify(productList)
// let loginPage = `
// <form>
// <p>登录界面</p>
// <input type="text" /><br>
// <input type="password" /><br>
// <input type="submit"/>
// </form>
// `
response.write(productList) // 向响应对象写入数据helloworld
response.end() // 结束写入，发送数据给请求客户端
})
// 启动web服务, 端口号 http://10.7.162.67:3000 3000端口号, 作用: 区分同一台电脑中不同应用
server.listen(3000, () => console.log('web服务启动成功,监听3000端口...'))
前端
<body>
<button class="product-list">获取商品列表数据</button>
<p></p>
<script>
const btn = document.querySelector('.product-list')
const pEle = document.querySelector('p')
btn.addEventListener('click',function(){
// 异步获取后端商品列表数据
// 1. 创建XMLHttpRequest
let xhr = new XMLHttpRequest()
// 2. 建立连接
xhr.open('get','http://本机IP地址:3000')
// 3. 发送请求
xhr.send()
// 4. 接收响应数据
xhr.onreadystatechange = function(){
// 4.1 是否响应完成
if(xhr.readyState === 4){
// 4.2 是否成功响应
if(xhr.status === 200){
let data = xhr.responseText // 响应内容
let dataObj =JSON.parse(data)
pEle.innerHTML = data
console.log(typeof data, typeof dataObj);
dataObj.forEach(item=>{
console.log(item)
})
}else{
alert('网络出错 '+xhr.status)
}
}
}
})
</script>
</body>
此时点击商品列表可以从后端获取到字符串格式的数据
