ajax01
目录
前言
Ajax01学习开始
一、HTTP协议
- HTTP协议:超文本传输协议
1.1HTTP请求过程
(1)在浏览器中输入网址(URL):服务器(IP地址/域名)、端口
(2)浏览器端和服务器端建立连接:三次握手
(3)建立连接后,浏览器端向服务器端发送请求消息
(4)服务器端接收到请求以后,处理请求,将消息响应给浏览器
(5)浏览器和服务器断开连接:四次挥手
(6)浏览器解析响应的消息,将数据渲染成网页呈现给用户
面试题:当在浏览器中输入一个网址到显示一个网页中间经历哪些过程
1.2请求的消息(头信息、报文)
请求行:请求的方式、请求的地址、协议版本号
请求头部
请求头部名:请求头部值
请求体:只有post/put传参有请求体,get/delete没有请求体
- 请求的内容类型
Content-Type: application/x-www-form-urlencoded
- 设置传递的参数编码格式
a=1&b=2&c=3
1.3响应消息
状态行
协议版本号 状态码 原因短句
响应的头部
响应体
1.4练习
- 练习1:编写文件01_api.js,使用express创建WEB服务器,设置端口,添加路由(get /index),响应以下格式,写完后查看HTTP协议
// 引入express模块 const express = require('express') // 创建WEB服务器 const app = express() // 设置端口 app.listen(3000) // 托管静态资源到public目录 app.use(express.static('public')) // 添加路由(get /index) app.get('/index',(req,res)=>{ // 假设已经从后后端查询到了一组数据 var arr = [ {cid:10,cname:'业界资讯'}, {cid:20,cname:'产品资讯'}, {cid:30,cname:'公司动态'} ] // 响应给客户端 res.send({code: 200, msg: '新闻分类---', data: arr}) }) // 添加中间件,将post传递的参数转为对象 // 将编码格式为 application/x-www-form-urlencoded app.use( express.urlencoded({ extended: true }) ) // 添加路由(post /mylogin),监听按钮提交的请求 app.post('/mylogin',(req,res)=>{ // 获取post传递的参数 var obj = req.body console.log(obj) // 判断 if(obj.user==='admin' && obj.pwd==='123456'){ res.send({code: 200,msg:'登录成功'}) }else{ res.send({code: 400,msg:'登录失败'}) } })
- 练习2:托管静态资源到public目录,目录下包含登录的网页login.html,点击提交向服务器发请求(post /mylogin),获取传递的参数,如果用户名是admin并且密码是123456,响应{code: 200,msg:'登录成功'} 否则响应{code:400,msg:'登录失败'} 查看HTTP协议,请求体,请求消息..
<!-- login.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户登录</title> </head> <body> <form action="/mylogin" method="post" enctype="application/x-www-form-urlencoded"> 用户<input type="text" name="user"><br> 密码<input type="text" name="pwd"><br> <button>登录</button> </form> </body> </html>
// 引入express模块 const express = require('express') // 创建WEB服务器 const app = express() // 设置端口 app.listen(3000) // 托管静态资源到public目录 app.use(express.static('public')) // 添加路由(get /index) app.get('/index',(req,res)=>{ // 假设已经从后后端查询到了一组数据 var arr = [ {cid:10,cname:'业界资讯'}, {cid:20,cname:'产品资讯'}, {cid:30,cname:'公司动态'} ] // 响应给客户端 res.send({code: 200, msg: '新闻分类---', data: arr}) }) // 添加中间件,将post传递的参数转为对象 // 将编码格式为 application/x-www-form-urlencoded app.use( express.urlencoded({ extended: true }) ) // 添加路由(post /mylogin),监听按钮提交的请求 app.post('/mylogin',(req,res)=>{ // 获取post传递的参数 var obj = req.body console.log(obj) // 判断 if(obj.user==='admin' && obj.pwd==='123456'){ res.send({code: 200,msg:'登录成功'}) }else{ res.send({code: 400,msg:'登录失败'}) } })
二、post传参,内容的编码方式
- application/x-www-form-urlencoded
- 默认的编码形式
- a=1&b=2
- multipart/form-data
用于文件上传
- text/plain
- 纯文本形式
三、AJAX
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)
- XML技术已经被JSON完全替代,JSON是当前前后端数据交换的一种格式
使用AJAX可以实现局部刷新,增加用户体验。
练习:编写文件04_api.js,使用express创建WEB服务器,设置端口;编写检测用户名是否存在的接口(get /checkuser),get方式传递用户名,如果用户名为xin123,响应'用户名已经被占用',否则响应用户名可用
// 引入express模块 const express = require('express') // 引入cors中间件模块 const cors = require('cors') // 创建WEB服务器 const app = express() // 设置端口 app.listen(3000) // 允许任何服务器的请求 app.use( cors() ) // 添加路由 // 检测用户是否存在(get /checkuser) // 接口地址:http://127.0.0.1:3000/checkuser // 请求方式:get app.get('/checkuser',(req,res)=>{ // 获取get传递的参数 var obj = req.query console.log(obj) // 判断 if(obj.user==='xin123'){ res.send('用户名已经被占用') }else{ res.send('用户名可用') } })
四、Ajax使用步骤
1.创建HTTP请求对象
var xhr = new XMLHttpRequest()
2.打开服务器的连接,请求接口
xhr.open( 参数1, 参数2, 参数3 )
参数1:请求方式,对应接口的请求方式,通常为大写,例如:GET/POST...
参数2:接口地址,如果GET传参,直接拼接
参数3:是否为异步,默认是异步 true->异步 false->同步
3.发送请求
xhr.send() 参数为请求体
4.添加事件,监听服务器端响应
xhr.onload = function(){
xhr.responseText 接口响应体的内容
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ajax</title> </head> <body> 用户<input type="text" id="user"> <span id="txt"></span> <script> // 给文本框绑定失去焦点事件 user.onblur = function(){ // txt.innerHTML='XXXX' // 获取用户输入的值,请求接口检测用户名是否可用 var str = user.value console.log(str) // 发送Ajax请求 // 1.创建HTTP请求对象 var xhr = new XMLHttpRequest() // 2.打开服务器的连接(请求接口) // 参数1:接口的请求方式 // 参数2:接口地址,GET请求还需要拼接参数 // 参数3:是否为异步,默认是异步 xhr.open('GET','http://127.0.0.1:3000/checkuser?user='+str,true) // 3.发送请求 xhr.send() // 4.添加事件,监听响应 xhr.onload = function(){ // 获取响应体 console.log( xhr.responseText ) // 渲染响应的结果 txt.innerHTML = xhr.responseText } } </script> </body> </html>
五、解决express跨域问题
两个服务器之间端口不同、域名不同、协议不同有一项不同都会产生跨域问题
1.引入cors中间件模块(需要安装 npm i cors)
const cors=require('cors')
2.使用中间件 (位置上,必须写在路由的前边)
app.use( cors() )
总结
Ajax01学习结束