跟着博主一起学Ajax

Posted 小hu同学

tags:

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

目录

一、Ajax基础

1.1 传统网站中存在的问题

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

1.2 Ajax概述

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

1.3 Ajax的应用场景

  • 页面上拉加载更多数据
  • 列表数据无刷新分页
  • 表单项离开焦点数据验证
  • 搜索框提示文字下拉列表

二、Ajax的运行环境

Ajax 技术需要运行在网站环境中才能生效，当前我会使用Node.js创建的服务器作为网站服务器来应用Ajax.直接打开html文件时不生效的哟！！！不知道Node.js的可以看我写的Nodejs文章

2.1 Ajax 运行原理

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

在这里插入图片描述

2.2 Ajax的实现步骤

  1. 创建Ajax对象
var xhr = new HMLHttpRequest();
  1. 告诉Ajax请求地址以及请求方式
xhr.open('get','http://www.baidu.com');
  1. 发送请求
 xhr.send();
  1. 获取服务器端给与客户端的响应数据
xhr.onload = function(){
	//通过xhr 下面的responseText来获取服务器端给客户端的响应数据
	console.log(xhr.responseText);
}

2.2.1 Ajax入门（代码示例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
    //1、创建Ajax对象
  var xhr = new XMLHttpRequest()
    //2、告诉Ajax对象要向哪里发送请求，以什么方式发送请求
    
    //xhr下面的open方法
    //第一个是请求方式   第二个是请求地址
    xhr.open('get','http://localhost:4000/frist');
    //3、发送请求
    //xhr下面的send方法发送请求
    xhr.send();
    //4、获取服务器端响应到客户端的数据
    xhr.onload = function(){
    //xhr.responseText 存储的就是服务器端响应给客户端的数据
        console.log(xhr.responseText)
    }
    </script>
</body>
</html>

这个时候你去启动服务器并访问，控制台是会报错的，因为我们现在并没有在服务器端设置这个/frist的路由地址
我们需要在app.js文件中去创建一个/frist路由地址

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));

// 对应01html文件
app.get('/frist',(req,res) =>{
	res.send('HellO ajax');
})

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

现在我们在启动服务器，去浏览器刷新，如果浏览器响应的是‘hello ajax’,就说明此次的响应式成功的
在这里插入图片描述
我们可以看到，在控制台，打印出来了这个hello ajax说明我此次是成功的
在这里插入图片描述

2.3 服务器端响应的数据格式（JSON对象）

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

在http请求与响应过程中,无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行输出

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

2.3.1 处理响应数据格式（代码示例）

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
    //1、创建Ajax对象
  var xhr = new XMLHttpRequest()
    //2、告诉Ajax对象要向哪里发送请求，以什么方式发送请求
    //01、请求方式 02请求地址
    xhr.open('get','http://localhost:4000/responseDate');
    //3、发送请求
    xhr.send();
    //4、获取服务器端响应到客户端的数据
    xhr.onload = function(){
    //将json字符串转换为JSON对象 用一个变量接收
       var responseText = JSON.parse(xhr.responseText)
        console.log(responseText)
		//使用字符串拼接的方法，将服务器端响应过来的数据，显示在页面上
        var str = '<h2>'+responseText.name+'</h2>'
    document.body.innerHTML = str;
    }
    </script>
</body>
</html>

app.js文件创建一个/responseDate路由

这里我没有吧之前的/frist路由代码删掉，后面的路由代码我都会依次写在里面

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));

// 对应/frist路由
app.get('/frist',(req,res) =>{
	res.send('HellO ajax');
})

//对应  /responseDate路由
app.get('/responseDate',(req,res) =>{
	//给客户端响应一个JSON数据的格式，看看客户端
	res.send({"name":"xiaohu同学"});
})

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

浏览器客户端的效果
在这里插入图片描述

2.4 在Ajax中如何请求参数传递（GET/ POST）

传统网站表单提交，会帮我们拼接好请求的参数

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

Ajax的请求参数中，需要自己拼接请求参数，根据请求参数的不同，将不同的参数放到对应的位置上

  • GET请求方式
xhr.open('get', 'http://www.baidu.com?name=xiaohu&age=20');
  • POST 请求方式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 
xhr.send('name=xiaohu&age=20');

2.4.1 GET请求方式(代码示例)

创建一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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;
        
        //拼接的样式为username=***&age=***
        //拼接请求参数
        var params = 'username='+nameValue +'&age='+ageValue;
        //配置ajax对象,将拼接好的参数放在请求地址中
        xhr.open('get','http://localhost:4000/get?'+params);
        //发送请求
        xhr.send();
        //获取服务器端响应的数据
        xhr.onload = function () {
            console.log(xhr.responseText)
        }
    }
    </script>
</body>
</html>

app.js文件创建一个/get路由

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));

// 对应/frist路由
app.get('/frist',(req,res) =>{
	res.send('HellO ajax');
})

//对应  /responseDate路由
app.get('/responseDate',(req,res) =>{
	//给客户端响应一个JSON数据的格式，看看客户端
	res.send({"name":"xiaohu同学"});
})

//对应/get 路由
app.get('/get',(req,res) =>{
	//使用req.query来接收客户端传递到服务器端的get请求参数
	//并使用req.send来响应给客户端
	res.send(req.query);
})

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

可以看到我们这里的数据拼接是成功了的
在这里插入图片描述
控制台也打印出来的响应的数据
在这里插入图片描述

2.4.2 POST请求方式（代码示例）

请求报文

在 HTTP 请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式。

代码示例（）
创建一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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对象
        //将请求方式修改为post
        xhr.open('post','http://localhost:4000/post');
        //设置请求参数的格式的类型（post请求必须要设置）
        //application/x-www-feom-urlencoded 是固定写法
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        //发送请求
        xhr.send(params);
        //获取服务器端响应的数据
        xhr.onload = function () {
            console.log(xhr.responseText)
        }
    }
    </script>
</body>
</html>

打开 app.js文件 创建一个/post路由

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
//引入第三方模块bodyParse  使用npm install body-parser
const bodyParser = require('body-parser');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use以上是关于跟着博主一起学Ajax的主要内容，如果未能解决你的问题，请参考以下文章
 

 跟着博主一起学Ajax


 #盲盒+码##跟着小白一起学鸿蒙#如何编译OpenHarmony自带APP


 #跟着小白一起学鸿蒙# [番外]一起学做FlappyBird


 #盲盒+码# #跟着小白一起学鸿蒙# [番外]一起学做Tetris(下)


 #盲盒+码##跟着小白一起学鸿蒙# [番外三]一起学做Tetris(上)


 #冲刺创作新星# #跟着小白一起学鸿蒙# [十三]简析蓝牙协议栈