Ajax编程基础

Posted 2021-05-14 前端加油

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax编程基础相关的知识，希望对你有一定的参考价值。

Ajax编程基础

文章目录

**Ajax编程基础**

1. Ajax 基础

1.1 传统网站中存在的问题

网速慢的情况下，页面加载时间长，用户只能等待
表单提交后，如果一项内容不合格，需要重新填写所有表单内容
页面跳转，重新加载页面，造成资源浪费，增加用户等待时间

1.2 Ajax 概述

Ajax：标准读音 [ˈeɪˌdʒæks] ，中文音译：阿贾克斯

它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。

1.3 Ajax的应用场景

1.页面下拉无需刷新加载更多数据

2.列表数据无刷新分页

3.表单项离开焦点数据验证

4.搜索框提示文字下拉列表

在这里插入图片描述

1.4 Ajax的运行环境

Ajax 技术需要运行在网站环境中才能生效，以后会使用Node创建的服务器作为网站服务器。

html文件需要放在node创建的服务器下工作

//引入express框架
const express = require("express");
//引入路径模块
const path = require("path");
//创建网站服务器
const app = express();
//静态资源访问服务功能
app.use(express.static(path.join(__dirname, "public")));
//监听端口
app.listen(3000);
//控制台提示输出
console.log("服务器启动成功");

//index.html
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h2>欢迎，这是public文件夹中的index.html文件</h2>
</body>
</html>

在这里插入图片描述

运行结果

在这里插入图片描述

2. Ajax 运行原理及实现

2.1 Ajax 运行原理

Ajax 相当于客户端发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。

在这里插入图片描述

2.2 Ajax的实现步骤

//01.Ajax入门
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <script type="text/javascript">
    // 1.创建ajax对象
    let xhr = new XMLHttpRequest();
    // 2.告诉 Ajax 请求方式以及请求地址
    xhr.open('get', 'http://localhost:3000/first');
    // 3.发送请求
    xhr.send();
    // 4.获取服务器端响应到客户端的数据
    // onload在页面或图像加载完成后立即发生
    xhr.onload = function () {
      //xhr.responseText 响应数据
      console.log(xhr.responseText)
    }
  </script>
</body>

</html>

//app.js
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
const bodyParser = require('body-parser');
const fs = require('fs');
// 创建web服务器
const app = express();

// 配置body-parser模块,对应两种请求参数的格式
//app.use(bodyParser.urlencoded());
app.use(bodyParser.json());

// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));

// 创建路由对应01html文件
app.get('/first', (req, res) => {
  res.send('Hello, Ajax');
});

// 对应02html文件
app.get('/responseData', (req, res) => {
  res.send({
    "name": "zs"
  });
});

// 对应03html文件
app.get('/get', (req, res) => {
 //Express框架中使用req.query获取GET参数，框架内部会将GET参数转换为对象并返回。
  res.send(req.query);
});

// 对应04html文件
app.post('/post', (req, res) => {
  //借助body-parser模块中的req.body来获取post参数
  res.send(req.body);
});

// 对应05html文件
app.post('/json', (req, res) => {
  res.send(req.body);
});

// 对应06html文件
app.get('/readystate', (req, res) => {
  res.send('hello');
});

// 对应07html文件
app.get('/error', (req, res) => {
  //console.log(abc);
  res.status(400).send('not ok');
});

// 对应08html文件
app.get('/cache', (req, res) => {
  fs.readFile('./test.txt', (err, result) => {
    res.send(result);
  });
});

// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');

2.3 服务器端响应的数据格式

在真实的项目中，服务器端大多数情况下会以 JSON 对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中。

在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。 JSON**.parse()** 将 json 字符串转换为json对象

JSON：JavaScript 对象表示法。JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

JSON 是存储和交换文本信息的语法，类似 XML。JSON 比 XML 更小、更快，更易解析。

//02.处理服务器端返回的JSON数据
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <script type="text/javascript">
    // 1.创建ajax对象
    var xhr = new XMLHttpRequest();
    // 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
    // 1)请求方式 2)请求地址
    xhr.open('get', 'http://localhost:3000/responseData');
    // 3.发送请求
    xhr.send();
    // 4.获取服务器端响应到客户端的数据
    xhr.onload = function () {
      // 将JSON字符串转换为JSON对象
      var responseText = JSON.parse(xhr.responseText);
      console.log(responseText)
      // 将数据和html字符串进行拼接
      var str = '<h2>' + responseText.name + '</h2>';
      // 将拼接的结果追加到页面中
      document.body.innerHTML = str;
    }
  </script>
</body>

</html>

在这里插入图片描述

2.4 请求参数传递

传统网站表单提交

<form method="get" action="http://www.example.com">
     <input type="text" name="username"/>
     <input type="password" name="password">
 </form>
 <!– http://www.example.com?username=zhangsan&password=123456 -->

GET 请求方式

xhr.open(‘get’,‘http://www.example.com?name=zhangsan&age=20’);

//03.传递get请求参数
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <p>
    <input type="text" id="username">
  </p>
  <p>
    <input type="text" id="age">
  </p>
  <p>
    <input type="button" value="提交" id="btn">
  </p>
  <script type="text/javascript">
    // 获取按钮元素
    var btn = document.getElementById('btn');
    // 获取姓名文本框 年龄文本框
    var username = document.getElementById('username');
    var age = document.getElementById('age');

    // 为按钮添加点击事件
    btn.onclick = function () {
      // 创建ajax对象
      var xhr = new XMLHttpRequest();
      // 获取用户在文本框中输入的值
      var nameValue = username.value;
      var ageValue = age.value;
      // 拼接请求参数
      var params = 'username=' + nameValue + '&age=' + ageValue;
      // 配置ajax对象
      xhr.open('get', 'http://localhost:3000/get?' + params);
      // 发送请求
      xhr.send();
      // 获取服务器端响应的数据
      xhr.onload = function () {
        console.log(xhr.responseText)
      }
    }
  </script>
</body>

</html>

在这里插入图片描述

POST 请求方式

xhr**.setRequestHeader(‘Content-Type’,** ‘application/x-www-form-urlencoded’)

xhr**.send(**‘name=zhangsan&age=20’);

//04.传递post请求参数
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <p>
    <input type="text" id="username">
  </p>
  <p>
    <input type="text" id="age">
  </p>
  <p>
    <input type="button" value="提交" id="btn">
  </p>
  <script type="text/javascript">
    // 获取按钮元素
    var btn = document.getElementById('btn');
    // 获取姓名文本框
    var username = document.getElementById('username');
    // 获取年龄文本框
    var age = document.getElementById('age');
    // 为按钮添加点击事件
    btn.onclick = function () {
      // 创建ajax对象
      var xhr = new XMLHttpRequest();
      // 获取用户在文本框中输入的值
      var nameValue = username.value;
      var ageValue = age.value;
      // 拼接请求参数
      var params = 'username=' + nameValue + '&age=' + ageValue;
      // 配置ajax对象
      xhr.open('post', 'http://localhost:3000/post');
      // 设置请求参数格式的类型（post请求必须要设置）
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      // 发送请求
      xhr.send(params);
      // 获取服务器端响应的数据
      xhr.onload = function () {
        console.log(xhr.responseText)
      }
    }
  </script>
</body>

</html>

在这里插入图片描述

2.5 请求参数的格式

application/x-www-form-urlencoded

name**=zhangsan&age=20&sex=**男

application/json

{name: ‘zhangsan’, age**😗* ‘20’, sex**😗* ‘男’}

在请求头中指定 Content-Type 属性的值是 application/json，告诉服务器端当前请求参数的格式是 json。

参数必须以字符串的形式进行传递

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

注意：get 请求是不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的

//05.向服务器端传递JSON格式的请求参数
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 1.创建ajax对象
		var xhr = new XMLHttpRequest();
		// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
		// 1)请求方式 2)请求地址
		xhr.open('post', 'http://localhost:3000/json');
		// 通过请求头告诉服务器端客户端向服务器端传递的请求参数的格式是什么
		xhr.setRequestHeader('Content-Type', 'application/json');
		// JSON.stringify() 将json对象转换为json字符串
		// 3.发送请求
		xhr.send(JSON.stringify({name: 'lisi', age:50}));
		// 4.获取服务器端响应到客户端的数据
		xhr.onload = function (){
			console.log(xhr.responseText)
		}
	</script>
</body>
</html>

在这里插入图片描述

2.6 获取服务器端的响应

Ajax状态码

在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码。

0：请求未初始化(还没有调用open())

1：请求已经建立，但是还没有发送(还没有调用send())

2：请求已经发送

3：请求正在处理中，通常响应中已经有部分数据可以用了

4：响应已经完成，可以获取并使用服务器的响应了

 xhr.readyState // 获取Ajax状态码

onreadystatechange事件

当 Ajax 状态码发生变化时将自动触发onreadystatechange事件。

在事件处理函数中可以获取 Ajax 状态码并对其进行判断，当状态码为 4 时就可以通过 xhr.responseText 获取服务器端的响应数据了。

 // 当Ajax状态码发生变化时
 xhr.onreadystatechange = function () {
     // 判断当Ajax状态码为4时
     if (xhr.readyState == 4) {
         // 获取服务器端的响应数据
         console.log(xhr.responseText);
     }
 }

两种获取服务器端响应方式的区别

推荐使用onload事件
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		var xhr = new XMLHttpRequest();
		// 0 已经创建了ajax对象 但是还没有对ajax对象进行配置
		console.log(xhr.readyState);
		xhr.open('get', 'http://localhost:3000/readystate');
		// 1 已经对ajax对象进行配置 但是还没有发送请求
		console.log(xhr.readyState);

		// 当ajax状态码发生变化的时候出发
		xhr.onreadystatechange = function() {
			// 2 请求已经发送了
			// 3 已经接收到服务器端的部分数据了
			// 4 服务器端的响应数据已经接收完成
			console.log(xhr.readyState);
			// 对ajax状态码进行判断 如果状态码的值为4就代表数据已经接收完成了
			if (xhr.readyState == 4) {
				console.log(xhr.responseText);
			}
		}
		xhr.send();
	</script>
</body>
</html>

在这里插入图片描述

2.7 Ajax 错误处理

错误1: 网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。

解决方法: 可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码

错误2: 网络畅通，服务器端没有接收到请求，返回404状态码。

解决方法: 检查请求地址是否错误。

错误3: 网络畅通，服务器端能接收到请求，服务器端返回500状态码。

解决方法: 服务器端错误，找后端程序员进行沟通。

错误4: 网络中断，请求无法发送到服务器端。

解决方法: 会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</titleAjax编程基础
 AJAX相关JS代码片段和部分浏览器模型
 Node.js -- Ajax编程基础
 VSCode自定义代码片段——JS中的面向对象编程
 Javascript代码片段在drupal中不起作用
 VSCode自定义代码片段9——JS中的面向对象编程