AJAX优点
- 实现可以无需刷新页面的域服务器通信
- 允许根据用户时间来更新部分的页面内容
AJAX缺点
- 没有浏览历史，不能回退
- 存在跨域问题
- SEO不友好
请求报文
-
格式
请求行 请求类型(GET/PUSH 等) URL路径 HTTP协议版本 请求头 Host: xxx.com Cookie: name=xxx Content-type: application/x-www-from-urlencoded .... 请求空行 不一定有空行 请求体 GET请求的请求体为空，POST不为空
响应报文
-
格式
响应行 HTTP协议版本 响应状态码 响应状态字符串 响应头 Content-type: text/html;charser=utf-8 Content-length: 2048 Content-encoding: gzip 响应空行 一定有空行 响应体 <html> <head> </head> <body> <h1>xxx</h1> </body> </html>
Express框架（基于nodejs）
-
引入express
const express = require("express") -
创建应用对象
const app = express() -
创建路由规则
app.get('/', (request, response)=>{ //设置响应 response.send('Hello Express') })-
request是对请求报文的封装 -
response是对响应报文的封装
-
-
监听端口
app.listen(8080, ()=>{ console.log("服务启动，端口8080") })
AJAX基本步骤
需求：在网页上有一个元素，还有一个按钮，点击按钮就会发送AJAX请求，更新元素
-
GET.HTML<button>点击发送请求</button> <div id="app"></div> <script> //获取button元素 const btn = document.getElementById("app") //绑定事件 btn.onclick = function(){ //1. 创建xhr对象 const xhr = new XMLHttpRequest() //2. 初始化，设置请求方法和url xhr.open('GET', 'http://localhost:8080/server') //设置请求头(固定写法) xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded') //3. 发送 xhr.send() //4. 事件绑定，处理服务端返回的结果 xhr.onreadystatechange = function(){ //判断服务端是否返回了所有结果，以及判断响应状态码 if(xhr.readystate === 4 && xhr.status >= 200 && xhr.status < 300){ //处理结果 //1. 响应行 console.log(xhr.status) //响应码 console.log(xhr.statusText) //响应字符串 console.log(xhr.getAllResponseHeaders()) //所有响应头 console.log(xhr.response) //响应体 //设置app的文本 btn.innerHTML = xhr.response }else{ } } } </script>
