Ajax-实现步骤

应用场景

1. 页面上拉加载
2. 列表数据无刷新分页(侧导航不刷新,右边内容刷新)
3. 表单项离开焦点数据验证

使用node搭建服务器：

1.Ajax的实现步骤

app.js

const express = require('express')

const path = require('path')

const app = express()

//静态资源文件托管
app.use(express.static(path.join(__dirname,'public')))

app.get('/first',(req,res) => {
  res.send('hello ajax')
})

app.listen(3000)
console.log('http://localhost:3000');

html

    //1.创建ajax对象
    var xhr = new XMLHttpRequest()
    //2.告诉ajax对象要向哪里发送请求，以什么方式发送请求
    xhr.open('get','http://localhost:3000/first')//get或者post
    //3.发送请求
    xhr.send();
    //4.获取服务器端响应到客户端的数据 由于请求受网络速度影响 时间是不确定的 添加事件处理函数 获取到数据自动调用
    xhr.onload = () => {
      console.log(xhr.responseText);
    }

服务器端响应的数据格式

在真实的项目中，服务器端大多数情况下会以 JSON 对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中。
在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。

 JSON.parse() // 将 json 字符串转换为json对象

处理服务器端返回的JSON数据

app.js

 app.get('/responseData',(req,res) => {
  //send可以接收字符串或者json格式的对象数据
  res.send({"name":"zs"})
})

html

//1.创建ajax对象
    var xhr = new XMLHttpRequest()
    //2.告诉ajax对象要向哪里发送请求，以什么方式发送请求
    //请求方式，请求地址
    xhr.open('get','http://localhost:3000/responseData')
    //3.发送请求
    xhr.send();
    //4.responseText是获取服务器端响应到客户端的数据
    xhr.onload = () => {
      // console.log(xhr.responseText);
      // console.log(JSON.parse(xhr.responseText));//转之前是字符串的形式 转之后是json对象
      // 当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中
      var resText = JSON.parse(xhr.responseText)
      var str = '<h2>' + resText.name + '<h2/>'
      document.body.innerHTML = str     
    }

---

请求参数传递

传统网站表单提交

请求参数的格式

1. application/x-www-form-urlencoded
   
2. application/json
   在请求头中指定 Content-Type 属性的值是 application/json，告诉服务器端当前请求参数的格式是 json。
   
   JSON.stringify() // 将json对象转换为json字符串
   注意：get 请求是不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的。