Ajax异步交互
概念:异步的JavaScript 和XML(实质:Ajax是一个可以和后台沟通的技术)
工作原理:在用户与服务器之间加了一个中间层(Ajax引擎)使用户操作与服务器响应异步化。
包含技术:
CSS 、HTML来表示
DOM模型用来交互和动态显示
XMLHttpRequest来和服务器进行异步交互
JavaScript进行绑定和调用
Ajax的使用
封装一个ajax函数
1.创建特定异步对象 xhr
var xhr = new XMLHttpRequest()
2.设置请求信息
xhr.open(method,url,async)
方法(method):get post put delete
路径 (url):
异步(async):true false
3.发送请求
get方式 xhr.send() 或者 xhr.send(null)
post方式 post提交数据必须包含Content-Type和消息主体编码方式
即就是请求头信息 xhr.setRequestHeader("Content-Type","编码格式")。
常用的格式为application/x-www-form-urlencoded
4.监听和等待接收数据(往往把监听放到设置请求信息之前)
xhr.onreadystatechange = function(){xhr
if(xhr.readyState == 4){
if(xhr.status>=200&&xhr.status<300){
var result = xhr.responseText()
console.log(result)
}
}
}
前后台交互
1.搭建后台
1)创建项目目录project
2)创建项目目录中的静态资源文件夹public
3) 安装项目所需要的包
例如:安装npm install express 时项目目录会创建 node modules目录,并且会下载所有依赖的包。
4) 创建app.js为项目入口文件,用于创建应用程序对象
①引入express框架
const express = require("express");
②创建WEB服务器
const app = express();
③设置监听端口
app.listen(8080);
④静态资源托管
app.use(express.static("./public"))
⑤在终端启动服务器
⑥给前台一个接口地址,用get请求方式
app.get('接口地址',(req,res)=>{
res.send('响应')
})
简单的DOM操作
DOM:文档对象模型
用js去动态操作网页中的内容。
1)获取元素信息
単标签用.value获取内容,双标签用innerHTML获取内容
利用id获取信息
var text = document.getElementById('text')
var btn = document.getElementById('btn')
2) 触发事件
trim() 清空输入内容的前后空格
获取用户数据
btn.onclick = function(){
var mytext = text.value.trim()
}
3)调用ajax函数,并把数据传入ajax()
4) 数据回来把数据展示在页面中(可以单独用一个函数来展示)