Ajax学习笔记-Ajax编程基础

最新推荐文章于 2023-11-16 08:59:00 发布

AONLY_

最新推荐文章于 2023-11-16 08:59:00 发布

阅读量253

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_43560646/article/details/117919133

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

01-Ajax编程基础

1. Ajax基础

1.1传统网站中存在的问题

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

1.2 Ajax概述

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

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

1.3 Ajax 的应用场景

1.页面上拉加载更多数据

2.列表数据无刷新分页

当数据从第一页切换到第二页时，只有列表数据发生变化，页面中的其它部分如网页头部、底部及侧导航不发生变化

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

如，当用户在控件中输入邮箱地址，离开焦点后，我们可以使用Ajax技术向服务器端发送请求，问一下服务器端，当前用户填写的邮箱地址是否被别人注册过，如果注册过马上告诉当前用户邮箱地址被别人注册了，如果没有注册过，提示用户当前邮箱地址是可用的。

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

Ajax技术主要应用在不刷新页面的情况下，向服务器端发送请求，和服务器端进行交互，从而更改客户端页面中的数据或者状态这样的场景下，其主要目的是为了提高用户浏览网站应用的体验。

1.4 Ajax 的运行环境

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

Ajax代码的html页面需要放在网站服务器中运行，要以localhost+域名的形势打开页面，不能直接双击html文件直接运行，否则代码将不会生效。在学习Ajax技术时，我们需要借助node开启网站服务器，并且实现静态资源访问服务功能，我们要将代码写在html文件中，然后将html文件放在静态资源文件夹中

开启网站服务器实现静态资源访问功能，

操作步骤：

Express框架 – JavaScript 标准参考教程（alpha） (ruanyifeng.com)

1）新建项目文件夹，新建一个package.json文件

{
    "name": "hello-world",
    "description": "hello world test app",
    "version": "0.0.1",
    "private": true,
    "dependencies": {
        "express": "4.x"
    }
}

2）在此目录下安装相关模块，VS终端运行npm install

3）根目录下创建public文件夹

4）建立app.js,代码如下：

// 引入express框架,使用express框架可以让我们快速的创建网站服务器
const express = require('express');
// 路径处理模块,用它来处理静态资源文件夹目录
const path = require('path');
// 调用express方法，创建web服务器
const app = express();
// app.use方法拦截请求，将请求交给express.static方法来处理，
// 这个方法实现了静态资源访问服务功能，将静态资源文件夹定义为public文件夹,故后续写的html文件都需要放到public文件夹下
app.use(express.static(path.join(__dirname, 'public')));
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');

5）运行node app.js，开启服务器

6）此时可以在public文件夹中写静态页面代码，在浏览器中输入localhost:3000即可访问public文件夹下的index.html

2. Ajax运行原理及实现

2.1 Ajax 运行原理

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

传统网站应用中，由浏览器本身向服务器端发送请求，由浏览器端本身接收服务器端响应到客户端的数据，由于浏览器在发送请求和接收请求期间，不能再继续响应用户的其他操作，比如继续浏览并拉动当前页面，所以用户体验不好。

现在，我们要实现在用户浏览当前网站期间向服务器端发送请求，并将请求在不刷新页面的情况下更新到页面中。所有请求的发送和响应的接收就不能由浏览器自己来做，它需要找个代理人来帮助自己做这件事，如果有人帮了浏览器做了这个事情，那么浏览器就能空闲下来，响应用户的操作，Ajax就是浏览器的代理人，由Ajax帮助浏览器向服务器端发送请求，由Ajax帮助浏览器接收服务器端响应到客户端的数据。当Ajax接收到服务器端响应过来的数据后，再使用dom方法将服务器端发送过来的数据内容添加到页面中。这样便可以实现用户边浏览网站边向服务器端请求数据，并且实现页面无刷新更新数据。

并且，使用Ajax技术向服务器端发送请求与响应的接收开发人员是可控的，我们可以在请求发送与响应接收期间为用户做加载提示，以进一步提高用户浏览网站应用的体验。

2.2 Ajax的实现步骤

1 创建 Ajax 对象

即为浏览器创建帮助它发送请求的代理人

 var xhr = new XMLHttpRequest();

内置构造函数XMLHttpRequest()中的XML指的是服务器端与客户端传输内容的数据格式，现在在Ajax请求中，服务器端返回给客户端的数据一般都是json数据格式，XML数据格式在Ajax中已经很少见了，故XML作为了解的知识点，在后面的课程讲解。HttpRequest指的是HTTP请求的意思。

2 告诉 Ajax 请求地址以及请求方式

 xhr.open('get', 'http://www.example.com');

第一个参数：请求方式，值为get或post

第二个参数：请求地址，实际就是服务器端对应的路由请求地址

3 发送请求

xhr.send();

4 获取服务器端给与客户端的响应数据

//当Ajax接收到服务器的响应后就会触发onload事件
xhr.onload = function () {
     console.log(xhr.responseText);
 }

示例代码：

<!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/first');
		// 3.发送请求
		xhr.send();
		// 4.获取服务器端响应到客户端的数据
		xhr.onload = function (){
			console.log(xhr.responseText)
		}
	</script>
</body>
</html>

随后需要在app.js中添加路由

app.get('/first', (req, res) => {
    res.send('Hello Ajax');
});

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

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

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

 JSON.parse() // 将 json 字符串转换为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() {
            // console.log(typeof xhr.responseText)
            // 将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>

app.js中添加路由：

app.get('/responseData', (req, res) => {
    res.send({ "name": "zs" });
});

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 -->

1.GET 请求方式

get请求参数会被拼接到请求地址后面

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

示例代码：

<!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>

app.js中添加路由：

app.get('/get', (req, res) => {
	//在服务器端接收客户端传递的get请求参数，通过req.query获取get请求参数
    //req.query返回的是一个对象类型的值，在这个对象中存储的就是客户端传递过来的get请求参数
    //将拿到的请求参数通过send()响应到客户端
    res.send(req.query);
});

2.POST 请求方式

post请求参数会被放到请求体中

//Post请求必须在请求报文中明确设置请求参数内容的类型 
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
//将请求参数放到send方法中
xhr.send('name=zhangsan&age=20');

示例代码：

<!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>

然后在app.js中添加路由，引入第三方模块接收post请求参数

const bodyParser = require('body-parser');
//接收application/x-www-form-urlencoded格式参数
app.use(bodyParser.urlencoded());
app.post('/post', (req, res) => {
    res.send(req.body);
});

3.请求报文

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

报文主要分为报文头和报文体两部分，报文头存储的是一些键值对信息，可以理解为客户端向服务器端说的一些话，比如当前案例中的Content-Type就属于报文头中的信息；报文体主要存储一些内容，比如post请求参数就是存储在报文体中。报文头和报文体在请求的过程中整体被发送到服务器端。

4.请求参数的格式

1.application/x-www-form-urlencoded

如，name=zhangsan&age=20&sex=男

2.application/json

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

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

xhr.setRequestHeader('Content-Type', 'application/json');

请求参数必须以字符串的格式传递，使用 JSON.stringify()方法将json对象转换为json字符串

JSON.stringify() // 将json对象转换为json字符串
//与JSON.parse()方法作用相反

注意：get 请求是不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 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>

在app.js中配置

//接收application/json格式的参数
app.use(bodyParse.json());
app.post('/json', (req, res) => {
    res.send(req.body);
});

2.5 另一种方式获取服务器端的响应

这种方式已经过时，但仍有人在用，作为了解项的知识点，

Ajax 状态码

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

状态码及其含义：

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

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

2：请求已经发送(已经调用了send())

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

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

 xhr.readyState // 获取Ajax状态码

onreadystatechange 事件

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

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

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

示例代码：

<!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>

在app.js中添加路由

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

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

推荐使用onload事件方式，更简洁

区别描述	onload事件	onreadystatechange事件
是否兼容IE低版本	不兼容	兼容
是否需要判断Ajax状态码	不需要	需要
被调用次数	一次	多次

2.6 Ajax 错误处理

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

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

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

检查请求地址是否错误。

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

服务器端错误，找后端程序员进行沟通

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

网络中断后不会触发onload事件，会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。

示例代码：

在app.js中

app.get('/error', (req, res) => {
    //console.log(abc);//不存在变量abc，会返回500
    //服务器端通过status方法响应给客户端的状态码
    res.status(400).send('not ok');
});

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button id="btn">发送Ajax请求</button>
	<script type="text/javascript">
		var btn = document.getElementById('btn');

		btn.onclick = function () {
			// 1.创建ajax对象
			var xhr = new XMLHttpRequest();
			// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
			// 1)请求方式 2)请求地址
			xhr.open('get', 'http://localhost:3000/error');
			// 3.发送请求
			xhr.send();
			// 4.获取服务器端响应到客户端的数据
			xhr.onload = function (){
				// xhr.status 获取http状态码
				console.log(xhr.responseText);

				if (xhr.status == 400) {
					alert('请求出错')
				}
			}
			// 当网络中断时会触发onerrr事件
			xhr.onerror = function () {
				alert('网络中断, 无法发送Ajax请求')
			}
		}

		// Ajax状态码: 表示Ajax请求的过程状态 ajax对象返回的
		// Http状态码: 表示请求的处理结果 是服务器端返回的
	</script>
</body>
</html>

2.7低版本IE浏览器的缓存问题

问题：在低版本的 IE 浏览器中，Ajax 请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。

解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。

xhr.open('get', 'http://www.example.com?t=' + Math.random());

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button id="btn">发送Ajax请求</button>
	<script type="text/javascript">
		var btn = document.getElementById('btn');
		btn.onclick = function () {
			// 1.创建ajax对象
			var xhr = new XMLHttpRequest();
			// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
			// 1)请求方式 2)请求地址
			xhr.open('get', 'http://localhost:3000/cache?t=' + Math.random());
			// 3.发送请求
			xhr.send();
			// 4.获取服务器端响应到客户端的数据
			xhr.onreadystatechange = function (){
				if (xhr.readyState == 4 && xhr.status == 200) {
					alert(xhr.responseText);
				}
			}			
		}
	</script>
</body>
</html>

新建一个test.txt文件

在app.js中

//引入系统模块
const fs = require('fs');
app.get('/cache', (req, res) => {
	//读取文件需要引入系统模块
    fs.readFile('./test.txt', (err, result) => {
    	//将文件中的内容响应给服务器
        res.send(result);
    });
});

3. Ajax 异步编程

3.1 同步异步概述

同步

一个人同一时间只能做一件事情，只有一件事情做完，才能做另外一件事情。
落实到代码中，就是上一行代码执行完成后，才能执行下一行代码，即代码逐行执行。

console.log('before'); 
console.log('after');

异步

一个人一件事情做了一半，转而去做其他事情，当其他事情做完以后，再回过头来继续做之前未完成的事情。
落实到代码上，就是异步代码虽然需要花费时间去执行，但程序不会等待异步代码执行完成后再继续执行后续代码，而是直接执行后续代码，当后续代码执行完成后再回头看异步代码是否返回结果，如果已有返回结果，再调用事先准备好的回调函数处理异步代码执行的结果。

 console.log('before');
 setTimeout(
    () => { console.log('last');
 }, 2000);
 console.log('after');

示例代码：

<!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/first', false);
		// 3.发送请求
		xhr.send();
		// 4.获取服务器端响应到客户端的数据
		xhr.onreadystatechange = function (){
			if (xhr.readyState == 4) {
				console.log('2')
				console.log(xhr.responseText)
			}
			
		}

		console.log('1');
	</script>
</body>
</html>

3.2 Ajax封装

问题：发送一次请求代码过多，发送多次请求代码冗余且重复。

解决方案：将请求代码封装到函数中，发请求时调用函数即可。

 ajax({ 
     type: 'get',
     url: 'http://www.example.com',
     success: function (data) { 
         console.log(data);
     }
 })

实现步骤：

在封装函数的时候，我们要注意请求方式，请求地址，请求结果的处理

1.定义Ajax函数

<script>
    function ajax(options) {
        // 创建ajax对象
        var xhr = new XMLHttpRequest();
        // 配置ajax对象
        xhr.open(options.type, options.url);
        // 发送请求
        xhr.send();
        // 监听xhr对象下面的onload事件
        // 当xhr对象接收完响应数据后触发
        xhr.onload = function() {
            options.success(xhr.responseText);
        }
    }
    ajax({
        // 请求方式
        type: 'get',
        // 请求地址
        url: 'http://localhost:3000/first',
        success: function(data) {
            console.log('这里是success函数' + data);
        }
    })
</script>

app.js中

// 引入express框架,使用express框架可以让我们快速的创建网站服务器
const express = require('express');
// 路径处理模块,用它来处理静态资源文件夹目录
const path = require('path');
// 调用express方法，创建web服务器
const app = express();
// app.use方法拦截请求，将请求交给express.static方法来处理，
// 这个方法实现了静态资源访问服务功能，将静态资源文件夹定义为public文件夹,故后续写的html文件都需要放到public文件夹下
app.use(express.static(path.join(__dirname, 'public')));
// 监听端口
app.listen(3000);
//添加路由
app.get('/first', (req, res) => {
    res.send('Hello Ajax');
});
// 控制台提示输出
console.log("服务器启动成功");

2.传递请求参数

思路分析：

get请求方式的请求参数放在请求地址后；post请求方式请求地址放在请求体后，即需要被放到send方法中

将请求参数传递到ajax函数中，在函数内部再根据请求方式的不同将请求参数拼接到不同的地方，如果是get请求就拼接到请求地址后面，如果是post请求就将请求参数放到send方法中。

<script>
    function ajax(options) {
        var xhr = new XMLHttpRequest();
        // 1.拼接请求参数的变量
        var params = '';
        // 2.循环用户传递进来的对象格式参数，将拿到的对象形式的参数转为字符串
        for (var attr in options.data) {

            params += attr + '=' + options.data[attr] + '&';


        }
        //3.将参数最后面的&舍弃掉，并将截取的结果重新赋值给params变量
        params = params.substr(0, params.length - 1);

        //4.判断请求方式,并将请求参数拼接到对应的位置
        //4.1请求方式为get,请求参数为post在发送请求时处理
        if (options.type == 'get') {
            options.url = options.url + '?' + params;
        }

        xhr.open(options.type, options.url);
        // 5.根据不同的请求方式发送请求
        if (options.type == 'post') {
            //Post请求必须在请求报文中明确设置请求参数内容的类型 
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            //post请求发送请求的同时，将请求参数传递
            xhr.send(params);
        } else {
            xhr.send();
        }

        xhr.onload = function() {
            options.success(xhr.responseText);
        }
    }
    ajax({
            type: 'get',
            url: 'http://localhost:3000/first',
            //请求参数
            data: {
                username: 'zs',
                age: 23,
            },
            success: function(data) {
                console.log('这里是success函数' + data);
            }
        })
        /*
            请求参数要考虑的问题
            1.请求参数位置的问题
                将请求参数传递到ajax函数内部，在函数内部根据请求方式的不同将请求参数放置在不同的位置
                get 放在请求地址的后面
                post 放在send方法中
            2.请求参数格式的问题

        			application/x-www-form-urlencoded

        				参数名称=参数值&参数名称=参数值

        				name=zhangsan&age=20

        			application/json

        				{name: 'zhangsan', age: 20}

        			1.传递对象数据类型对于函数的调用者更加友好
        			2.在函数内部对象数据类型转换为字符串数据类型更加方便
        */
</script>

3.传递请求参数的类型

<script>
    function ajax(options) {
        var xhr = new XMLHttpRequest();
        var params = '';
        for (var attr in options.data) {

            params += attr + '=' + options.data[attr] + '&';


        }
        params = params.substr(0, params.length - 1);

        if (options.type == 'get') {
            options.url = options.url + '?' + params;
        }

        xhr.open(options.type, options.url);

        if (options.type == 'post') {
            //2.声明变量接收用户希望的向服务器端传递的请求参数的类型
            var contentType = options.header['Content-Type'];
            //1.将请求参数的类型改为用户自己传递过来的值
            xhr.setRequestHeader('Content-Type', contentType);
            //3.根据用户设置的不同的请求类型，发送请求
            if (contentType == 'application/json') {
                // 3.1 类型为json，向服务器端传递json数据格式的参数
                // 传递的过程中要以字符串的形式进行传递,将json转换为json字符串
                xhr.send(JSON.stringify(options.data))
            } else {
                // 3.2 向服务器端传递普通类型的请求参数
                xhr.send(params);
            }

        } else {
            xhr.send();
        }

        xhr.onload = function() {
            options.success(xhr.responseText);
        }
    }
    ajax({
        type: 'post',
        url: 'http://localhost:3000/first',
        data: {
            username: 'zs',
            age: 23,
        },
        header: {
            'Content-Type': 'application/json'
        },
        success: function(data) {
            console.log('这里是success函数' + data);
        }
    })
</script>

4.Ajax错误处理&将json字符串转为json对象

使用Ajax技术向服务器端发送请求的时候，一般会返回json类型的数据，但客户端一般拿到的是json类型的字符串，如果我们要使用这个数据，就要将json类型的字符串转换为json对象，将这一功能封装到函数中

<script>
    function ajax(options) {
        var xhr = new XMLHttpRequest();
        var params = '';
        for (var attr in options.data) {
            params += attr + '=' + options.data[attr] + '&';

        }
        params = params.substr(0, params.length - 1);

        if (options.type == 'get') {
            options.url = options.url + '?' + params;
        }

        xhr.open(options.type, options.url);

        if (options.type == 'post') {
            var contentType = options.header['Content-Type'];
            xhr.setRequestHeader('Content-Type', contentType);
            if (contentType == 'application/json') {
                xhr.send(JSON.stringify(options.data))
            } else {
                xhr.send(params);
            }

        } else {
            xhr.send();
        }
        // 1.Ajax错误处理
        xhr.onload = function() {
            //2.获取响应头中的数据
            var contentType = xhr.getResponseHeader('Content-Type');
            //3 用变量接收服务器端返回的数据
            var responseText = xhr.responseText;
            //4 如果返回值为json类型,将其转换为json对象返回
            if (contentType.includes('application/json')) {
                // 将JSON字符串转换为JSON对象,并赋值
                responseText = JSON.parse(responseText);
            }
            //1.1判断状态码,分别进行成功处理和失败处理
            if (xhr.status == 200) {
                // 请求成功，调用处理成功请情况的函数
                options.success(responseText, xhr);
            } else {
                //请求失败，调用error函数
                //将xhr也作为参数返回出去，xhr包含更多的信息，方便进行错误处理
                options.error(responseText, xhr);
            }

        }
    }
    ajax({
        type: 'get',
        url: 'http://localhost:3000/responseData',
        data: {
            username: 'zs',
            age: 23,
        },
        header: {
            'Content-Type': 'application/json'
        },
        success: function(data, xhr) {
            console.log('这里是success函数');
            console.log(data);
        },
        error: function(data, xhr) {
            console.log('这里是error函数' + data);
            console.log(xhr);
        }
    })
</script>

app.js中添加一个返回json类型数据的路由

app.get('/responseData', (req, res) => {
    res.send({ "name": "zs" });
});

5.添加默认参数

<script>
    function ajax(options) {
        //1.定义变量存储默认参数值
        var defaults = {
            type: 'get',
            url: '',
            data: {},
            header: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: function() {},
            error: function() {}
        };
        // 2.用户传递了参数,使用options对象中的属性覆盖defaults对象中的属性
        Object.assign(defaults, options);

        var xhr = new XMLHttpRequest();
        var params = '';
        for (var attr in defaults.data) {
            params += attr + '=' + defaults.data[attr] + '&';

        }
        params = params.substr(0, params.length - 1);

        if (defaults.type == 'get') {
            defaults.url = defaults.url + '?' + params;
        }

        xhr.open(defaults.type, defaults.url);

        if (defaults.type == 'post') {
            var contentType = defaults.header['Content-Type'];
            xhr.setRequestHeader('Content-Type', contentType);
            if (contentType == 'application/json') {
                xhr.send(JSON.stringify(defaults.data))
            } else {
                xhr.send(params);
            }

        } else {
            xhr.send();
        }
        xhr.onload = function() {
            var contentType = xhr.getResponseHeader('Content-Type');
            var responseText = xhr.responseText;
            if (contentType.includes('application/json')) {
                responseText = JSON.parse(responseText);
            }
            if (xhr.status == 200) {
                defaults.success(responseText, xhr);
            } else {
                defaults.error(responseText, xhr);
            }

        }
    }
    ajax({

        url: 'http://localhost:3000/responseData',
        success: function(data, xhr) {
            console.log('这里是success函数');
            console.log(data);
        },

    })
</script>

示例总代码：

<!DOCTYPE html>
<html lang="en">

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

<body>
    <script type="text/javascript">
        function ajax(options) {
            // 存储的是默认值
            var defaults = {
                type: 'get',
                url: '',
                data: {},
                header: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                success: function() {},
                error: function() {}
            };

            // 使用options对象中的属性覆盖defaults对象中的属性
            Object.assign(defaults, options);

            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            // 拼接请求参数的变量
            var params = '';
            // 循环用户传递进来的对象格式参数
            for (var attr in defaults.data) {
                // 将参数转换为字符串格式
                params += attr + '=' + defaults.data[attr] + '&';
            }
            // 将参数最后面的&截取掉 
            // 将截取的结果重新赋值给params变量
            params = params.substr(0, params.length - 1);

            // 判断请求方式
            if (defaults.type == 'get') {
                defaults.url = defaults.url + '?' + params;
            }

            /*
            	{
            		name: 'zhangsan',
            		age: 20
            	}

            	name=zhangsan&age=20

             */

            // 配置ajax对象
            xhr.open(defaults.type, defaults.url);
            // 如果请求方式为post
            if (defaults.type == 'post') {
                // 用户希望的向服务器端传递的请求参数的类型
                var contentType = defaults.header['Content-Type']
                    // 设置请求参数格式的类型
                xhr.setRequestHeader('Content-Type', contentType);
                // 判断用户希望的请求参数格式的类型
                // 如果类型为json
                if (contentType == 'application/json') {
                    // 向服务器端传递json数据格式的参数
                    xhr.send(JSON.stringify(defaults.data))
                } else {
                    // 向服务器端传递普通类型的请求参数
                    xhr.send(params);
                }

            } else {
                // 发送请求
                xhr.send();
            }
            // 监听xhr对象下面的onload事件
            // 当xhr对象接收完响应数据后触发
            xhr.onload = function() {

                // xhr.getResponseHeader()
                // 获取响应头中的数据
                var contentType = xhr.getResponseHeader('Content-Type');
                // 服务器端返回的数据
                var responseText = xhr.responseText;

                // 如果响应类型中包含applicaition/json
                if (contentType.includes('application/json')) {
                    // 将json字符串转换为json对象
                    responseText = JSON.parse(responseText)
                }

                // 当http状态码等于200的时候
                if (xhr.status == 200) {
                    // 请求成功 调用处理成功情况的函数
                    defaults.success(responseText, xhr);
                } else {
                    // 请求失败 调用处理失败情况的函数
                    defaults.error(responseText, xhr);
                }
            }
        }

        ajax({
            type: 'post',
            // 请求地址
            url: 'http://localhost:3000/responseData',
            success: function(data) {
                console.log('这里是success函数');
                console.log(data)
            }
        })

        /*
        	请求参数要考虑的问题

        		1.请求参数位置的问题

        			将请求参数传递到ajax函数内部, 在函数内部根据请求方式的不同将请求参数放置在不同的位置

        			get 放在请求地址的后面

        			post 放在send方法中

        		2.请求参数格式的问题

        			application/x-www-form-urlencoded

        				参数名称=参数值&参数名称=参数值

        				name=zhangsan&age=20

        			application/json

        				{name: 'zhangsan', age: 20}

        			1.传递对象数据类型对于函数的调用者更加友好
        			2.在函数内部对象数据类型转换为字符串数据类型更加方便

        */
    </script>
</body>

</html>

AONLY_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax学习笔记-Ajax编程基础

01-Ajax编程基础1. Ajax基础1.1传统网站中存在的问题网速慢的情况下，页面加载时间长，用户只能等待表单提交后，如果一项内容不合格，需要重新填写所有表单内容页面跳转，重新加载页面，造成资源浪费，增加用户等待时间1.2 Ajax概述Ajax：标准读音 [ˈeɪˌdʒæks] ，中文音译：阿贾克斯它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。1.3 Ajax 的应用场景1.页面上拉加载更多数据2.列表数据无刷新分页当数据从第一页切换到
复制链接

扫一扫