Ajax语法（Ajax基础、运行原理及实现、异步编程、封装、Ajax状态码、onreadystatechange事件、Ajax错误处理、服务器端响应的数据格式、请求参数）

程序员文章站 2022-03-02 08:29:17

文章目录1. Ajax 基础1.1 传统网站中存在的问题1.2 Ajax 概述1.3 Ajax 的应用场景1.4 Ajax 的运行环境2. Ajax 运行原理及实现2.1 Ajax 运行原理2.2 Ajax 的实现步骤2.3 服务器端响应的数据格式2.4 请求参数传递2.5 请求报文2.6 请求参数的格式2.7 获取服务器端的响应2.7.1 Ajax 状态码2.7.2 onreadystatechange 事件2.7.3 两种获取服务器端响应方式的区别2.8 Ajax 错误处理2.9 低版本 IE 浏览器的...

文章目录

1. Ajax 基础

1.1 传统网站中存在的问题
1.2 Ajax 概述
1.3 Ajax 的应用场景
1.4 Ajax 的运行环境

2. Ajax 运行原理及实现

2.1 Ajax 运行原理
2.2 Ajax 的实现步骤
2.3 服务器端响应的数据格式
2.4 请求参数传递
2.5 请求报文
2.6 请求参数的格式
2.7 获取服务器端的响应

2.7.1 Ajax 状态码
2.7.2 onreadystatechange 事件
2.7.3 两种获取服务器端响应方式的区别

2.8 Ajax 错误处理
2.9 低版本 IE 浏览器的缓存问题

3. Ajax 异步编程

3.1 同步异步概述

3.1.1 同步
3.1.2 异步

3.2 Ajax 封装

1. Ajax 基础

1.1 传统网站中存在的问题

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

1.2 Ajax 概述

Ajax：标准读音 [ˈeɪˌdʒæks] ，中文音译：阿贾克斯
它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。
Ajax语法（Ajax基础、运行原理及实现、异步编程、封装、Ajax状态码、onreadystatechange事件、Ajax错误处理、服务器端响应的数据格式、请求参数）

1.3 Ajax 的应用场景

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

Ajax语法（Ajax基础、运行原理及实现、异步编程、封装、Ajax状态码、onreadystatechange事件、Ajax错误处理、服务器端响应的数据格式、请求参数）

1.4 Ajax 的运行环境

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

2. Ajax 运行原理及实现

2.1 Ajax 运行原理

Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。
Ajax语法（Ajax基础、运行原理及实现、异步编程、封装、Ajax状态码、onreadystatechange事件、Ajax错误处理、服务器端响应的数据格式、请求参数）

2.2 Ajax 的实现步骤

创建 Ajax 对象

 var xhr = new XMLHttpRequest();

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

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

发送请求

 xhr.send();

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

 xhr.onload = function () { console.log(xhr.responseText); }

// 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) }

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

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

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

// 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; }

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');

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

POST 请求方式

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('name=zhangsan&age=20');

app.use(bodyParser.urlencoded());

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

2.5 请求报文

在 HTTP 请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式。
Ajax语法（Ajax基础、运行原理及实现、异步编程、封装、Ajax状态码、onreadystatechange事件、Ajax错误处理、服务器端响应的数据格式、请求参数）

2.6 请求参数的格式

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 对象数据格式的。

app.use(bodyParser.json());

// 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) }

2.7 获取服务器端的响应

2.7.1 Ajax 状态码

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

0：请求未初始化(还没有调用open())
1：请求已经建立，但是还没有发送(还没有调用send())
2：请求已经发送
3：请求正在处理中，通常响应中已经有部分数据可以用了
4：响应已经完成，可以获取并使用服务器的响应了

 xhr.readyState // 获取Ajax状态码

2.7.2 onreadystatechange 事件

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

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

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

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();

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

Ajax语法（Ajax基础、运行原理及实现、异步编程、封装、Ajax状态码、onreadystatechange事件、Ajax错误处理、服务器端响应的数据格式、请求参数）

2.8 Ajax 错误处理

网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。
可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码
网络畅通，服务器端没有接收到请求，返回404状态码。
检查请求地址是否错误。
网络畅通，服务器端能接收到请求，服务器端返回500状态码。
服务器端错误，找后端程序员进行沟通。
网络中断，请求无法发送到服务器端。
会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。

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

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

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

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

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

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

3. Ajax 异步编程

3.1 同步异步概述

3.1.1 同步

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

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

3.1.2 异步

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

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

3.2 Ajax 封装

问题：发送一次请求代码过多，发送多次请求代码冗余且重复。
解决方案：将请求代码封装到函数中，发请求时调用函数即可。

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

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.在函数内部对象数据类型转换为字符串数据类型更加方便
	
	*/

本文地址：https://blog.csdn.net/Satan_Devil/article/details/107891742