备案控制台
开发者社区 开发与运维 文章 正文

AJAX 课程学习笔记二

2024-02-02 28
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： AJAX 课程学习笔记二

四、Ajax发送请求

本地使用EXPRESS建立服务器，然后启动服务node server.js
server.js文件，请求的内容在控制面板Network——XHR
```bash
// 1、引入express
const express = require('express')
const {request, response} = require("express");
// 2、创建引用对象
const app = express();

// 3、创建路由规则
// request 是对请求报文的封装，response是对响应报文的封装
app.get('/server',(request,response)=>{
// 设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
// 设置响应体
response.send('Hello AJAX！');
});

// 4、监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中......")
})

> 请求结果如下：
![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/21e07808d36346b0bd10aa4952967eed.png)

## 1、Ajax发送GET请求
```js
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ajax Get请求</title>
  <style>
      #result{
          width: 200px;
          height: 100px;
          border: solid 1px #90b;
      }
  </style>
</head>
<body>
  <button>点击发送请求</button>
  <div id="result"></div>
</body>
<script>
  // 获取button元素
  const btn = document.getElementsByTagName('button')[0];
  const result= document.getElementById('result');
  // 绑定事件
  btn.onclick = function(){
    // 1.创建对象
    const xhr = new XMLHttpRequest();
    // 2.初始化  设置请求方法和 url
    xhr.open('Get','http://127.0.0.1:8000/server');
    // 3. 发送
    xhr.send();
    // 4. 事件绑定，处理服务端返回的结果
    // on：when，当...的时候
    // readystate 是xhr对象中的属性，表示状态0 1 2 3 4，change 改变
    xhr.onreadystatechange = function(){
      // 判断（服务端返回了所有的结果）
      if(xhr.readyState === 4){
        // 判断响应状态码 ，2xx表示成功
        if(xhr.status >=200 && xhr.status <300){
          // 处理结果 行 头 空行 体
          //响应
          console.log(xhr.status);//状态码
          console.log(xhr.statusText);// 状态字符串
          console.log(xhr.getAllResponseHeaders());// 所有响应头
          console.log(xhr.response);// 响应体
          // 呈现在页面上
          result.innerHTML = xhr.response;
        }
      }
    }
  }
</script>
</html>

在这里插入图片描述

2、带参数传递

xhr.open('Get','http://127.0.0.1:8000/server?a=100&b=200&c=300');

在这里插入图片描述

3、Ajax发送POST请求

server.js 启动服务：node server,js
```js
// 1、引入express
const express = require('express')
const {request, response} = require("express");
// 2、创建引用对象
const app = express();

// 3、创建路由规则
// request 是对请求报文的封装，response是对响应报文的封装
app.get('/server',(request,response)=>{
// 设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','');
// 设置响应体
response.send('Hello AJAX！');
});
app.post('/server',(request,response)=>{
// 设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','');
// 设置响应体
response.send('Hello AJAX POST');
});
// 4、监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中......")
})

> POST.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ajax Get请求</title>
  <style>
      #result{
          width: 200px;
          height: 100px;
          border: solid 1px #90b;
      }
  </style>
</head>
<body>
  <div id="result"></div>
</body>
<script>
  const result= document.getElementById('result');
  // 绑定事件
  result.addEventListener('mouseover',function (){
  //  1、创建对象
    const xhr = new XMLHttpRequest();
  //  2、初始化，设置请求方式和URL
    xhr.open('POST','http://127.0.0.1:8000/server?a=10&b=20&c=30');
  //  3、发送
    xhr.send();
  //  4、事件绑定
    xhr.onreadystatechange = function (){
      // 判断（服务端返回了所有的结果）
      if(xhr.readyState === 4) {
        // 判断响应状态码 ，2xx表示成功
        if (xhr.status >= 200 && xhr.status < 300) {
          result.innerHTML = xhr.response
        }
      }
    }
  })
</script>
</html>

在这里插入图片描述

4、Ajax服务端响应JSON数据

服务器只能返回字符串格式的数据，因此当我们在服务器中写入对象，还需将其解析成字符串，如下：才可正常传输

> // 1、引入express
const express = require('express')
const {
   
   request, response} = require("express");
// 2、创建引用对象
const app = express();

// 3、创建路由规则
// request 是对请求报文的封装，response是对响应报文的封装
app.get('/server',(request,response)=>{
   
   
  // 设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*');
  //  设置响应体
  response.send('Hello AJAX！');
});
app.post('/server',(request,response)=>{
   
   
  // 设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*');
  //  设置响应体
  response.send('Hello AJAX POST');
});
// 可以接收任何类型的请求
app.all('/json-server',(request,response)=>{
   
   
  // 设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*');
  // 响应一个数据
  const data ={
   
   
    name:'Hukang',
    age:'18'
  };
  // 对对象进行字符串转换
  const str = JSON.stringify(data);
  //  设置响应体
  response.send(str);
});
// 4、监听端口启动服务
app.listen(8000,()=>{
   
   
  console.log("服务已经启动，8000端口监听中......")
})

传输过来的是对象格式的数据，如下，需做一些修改将其转换成JSON格式
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ajax JSON</title>
  <style>
      #result{
   
   
          width: 220px;
          height: 100px;
          border: solid 1px #90b;
      }
  </style>
</head>
<body>
  <div id="result"></div>
</body>
<script>
  const result = document.getElementById("result");
  // 绑定键盘按下事件
  window.onkeydown = function(){
   
   
    // 1.发送请求
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'json';
    // 2.初始化  设置请求方法和 url
    xhr.open('Get','http://127.0.0.1:8000/json-server');
    // 3. 发送
    xhr.send();
    // 4. 事件绑定，处理服务端返回的结果
    xhr.onreadystatechange = function (){
   
   
      if(xhr.readyState === 4){
   
   
        if (xhr.status>=200 && xhr.status<300){
   
   
        //  手动对数据转化
          /*let data = JSON.parse(xhr.response);
          console.log(data);
          result.innerHTML = `name is ${
    
    data.name}&age is ${
    
    data.age}`;
*/
        //  自动进行转换后进行转换
          console.log(xhr.response);
          result.innerHTML = xhr.response.name;
        }
      }
    }
  }
</script>
</html>

服务端对象转字符串：const str = JSON.stringify(data);
客户端字符串转换成JSON：

  • 自动转换：xhr.responseType = 'json';然后直接从xhr.response.name拿到数据
  • 手动转换：let data = JSON.parse(xhr.response);

    5、nodemon自动重启工具安装

  • 官网：https://www.npmjs.com/package/nodemon
  • 作用：服务器修改代码后，需要重启服务器，nodemon可以帮助我们自动重启服务器
  • 安装：npm install -g nodemon
  • 启动服务：nodemon server.js

五、Ajax-IE缓存问题解决

IE浏览器会对AJAX请求回来的结果做一个缓存，当下次发送请求时，页面渲染的是本地缓存，而不是服务器返回的最新数据。
解决办法： xhr.open('Get','http://127.0.0.1:8000/ie?t='+Date.now());加一个时间戳

六、Ajax请求超时与网络异常请求

server.js文件中设置延时

// 延时响应
app.get('/delay',(request,response)=>{
   
   
  // 设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*');
  setTimeout(()=>{
   
   
    // 设置响应体
    response.send('延时响应');
  },3000);
});

客户端设置请求超时和网络异常请求

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ajax Get请求</title>
  <style>
      #result{
   
   
          width: 200px;
          height: 100px;
          border: solid 1px #90b;
      }
  </style>
</head>
<body>
  <button>点击发送请求</button>
  <div id="result"></div>
</body>
<script>
  // 获取button元素
  const btn = document.getElementsByTagName('button')[0];
  const result= document.getElementById('result');
  // 绑定事件
  btn.onclick = function(){
   
   
    // 1.创建对象
    const xhr = new XMLHttpRequest();
    // 延时处理，2s
    xhr.timeout=2000;
    // 超时回调
    xhr.ontimeout = function (){
   
   
      alert('网络异常，请稍后重试！')
    };
    // 网络异常回调
    xhr.onerror = function (){
   
   
      alert('您的网络似乎出了一些问题')
    };
    // 2.初始化  设置请求方法和 url
    xhr.open('Get','http://127.0.0.1:8000/delay');
    // 3. 发送
    xhr.send();
    // 4. 事件绑定，处理服务端返回的结果
    // on：when，当...的时候
    // readystate 是xhr对象中的属性，表示状态0 1 2 3 4，change 改变
    xhr.onreadystatechange = function(){
   
   
      // 判断（服务端返回了所有的结果）
      if(xhr.readyState === 4){
   
   
        // 判断响应状态码 ，2xx表示成功
        if(xhr.status >=200 && xhr.status <300){
   
   
          // 处理结果 行 头 空行 体
          //响应
          console.log(xhr.status);//状态码
          console.log(xhr.statusText);// 状态字符串
          console.log(xhr.getAllResponseHeaders());// 所有响应头
          console.log(xhr.response);// 响应体
          // 呈现在页面上
          result.innerHTML = xhr.response;
        }
      }
    }
  }
</script>
</html>

在这里插入图片描述
在这里插入图片描述
Ajax 请求重复的问题

请求取消：xhr.abort()

<script>
  // 获取button元素
  const btn = document.getElementsByTagName('button')[0];
  const result= document.getElementById('result');
  // 绑定事件
  btn.onclick = function(){
   
   
  if(isSending) xhr.abort;// 如果正在发送，则取消该请求，创建一个新的请求
    // 1.创建对象
    const xhr = new XMLHttpRequest();
    // 2.初始化  设置请求方法和 url
    xhr.open('Get','http://127.0.0.1:8000/delay');
    // 3. 发送
    xhr.send();
    // 4. 事件绑定，处理服务端返回的结果
    // on：when，当...的时候
    // readystate 是xhr对象中的属性，表示状态0 1 2 3 4，change 改变
    xhr.onreadystatechange = function(){
   
   
      // 判断（服务端返回了所有的结果）
      if(xhr.readyState === 4){
   
   
      // 修改标识变量
          isSending = false;
        // 判断响应状态码 ，2xx表示成功
        if(xhr.status >=200 && xhr.status <300){
   
   
          // 处理结果 行 头 空行 体
          //响应
          console.log(xhr.status);//状态码
          console.log(xhr.statusText);// 状态字符串
          console.log(xhr.getAllResponseHeaders());// 所有响应头
          console.log(xhr.response);// 响应体
          // 呈现在页面上
          result.innerHTML = xhr.response;
        }
      }
    }
  }
</script>
文章标签：
前端开发
数据格式
JSON
缓存
JavaScript
关键词：
ajax笔记
ajax课程
ajax课程学习笔记
ajax学习笔记
博客zhu虎康
目录
相关文章
博客zhu虎康
|
2月前
|
JSON 前端开发 JavaScript
AJAX 课程学习笔记三
AJAX 课程学习笔记三
博客zhu虎康
47 0
艾尼麻麻
|
27天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
艾尼麻麻
29 2
博客zhu虎康
|
2月前
|
XML 前端开发 JavaScript
AJAX 课程学习笔记一
AJAX 课程学习笔记一
博客zhu虎康
46 1
瑞崽崽崽
|
2月前
|
JSON 前端开发 JavaScript
前端知识笔记（三十七）———Django与Ajax
前端知识笔记（三十七）———Django与Ajax
瑞崽崽崽
32 0
Zh.晨光
|
2月前
|
XML JSON 前端开发
Ajax后端极简笔记
Ajax后端极简笔记
Zh.晨光
56 0
贰零壹玖.
|
2月前
|
JSON 前端开发 JavaScript
前端知识笔记（二）———Django与Ajax
前端知识笔记（二）———Django与Ajax
贰零壹玖.
39 0
前端歌谣
|
11月前
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤3
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤3
前端歌谣
57 0
前端歌谣
|
11月前
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤1
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤1
前端歌谣
46 0
N..
|
2月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
40 1
天玄TX
|
2月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
天玄TX
33 0