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>

【AJAX】基础知识

【AJAX】基础知识

AJAX优点

AJAX缺点

请求报文

响应报文

Express框架（基于nodejs）

AJAX基本步骤

推荐阅读更多精彩内容