Ajax 新手入门宝典

于 2019-09-25 23:01:33 发布
阅读量111 收藏 1
点赞数 1
文章标签： Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44202037/article/details/101271039
版权

Ajax 基础

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

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

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

Ajax 的应用场景
  1. 页面上拉加载更多数据
  2. 列表数据无刷新分页
  3. 表单项离开焦点数据验证
  4. 搜索框提示文字下拉列表
    在这里插入图片描述
Ajax 的运行环境

Ajax技术需要运行在网站环境中才能生效,当前会使用Node创建的服务器做为网站服务器.

Ajax 运行原理及实现

Ajax 运行原理

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

在这里插入图片描述

Ajax 的实现步骤
  1. 创建 Ajax 对象
     var xhr = new XMLHttpRequest();
 ```
  2. 告诉 Ajax 请求地址以及请求方式
     xhr.open('get','http://www.example.com');
  3. 发送请求
     xhr.send();
  4. 获取服务器端给与客户端的响应数据
     xhr.onload = function (){
     console.log(xhr.responseText);
 }
    代码示例
     <script>
    	// 创建Ajax对象
     var xhr = new XMLHttpRrquest();
 	// 告诉Ajax对象要向哪里发送请求,以什么方式发送请求
 	// 1)请求方式 2)请求地址
 	xhr.open('get','http://localhost:3000');
 	// 发送请求
 	xhr.send();
 	// 获取服务器端给客服端的响应数据
 	xhr.onload = function (){
     	console.log(xhr.responseText);
 	}
 </script>
服务器端响应的数据格式

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

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

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

示例代码

    <script>
       	// 创建Ajax对象
        var xhr = new XMLHttpRrquest();
    	// 告诉Ajax对象要向哪里发送请求,以什么方式发送请求
    	// 1)请求方式 2)请求地址
    	xhr.open('get','http://localhost:3000');
    	// 发送请求
    	xhr.send();
    	// 获取服务器端给客服端的响应数据
    	xhr.onload = function (){
            var responseText = JSON.parse(xhr.responseText);
            // 将JSON 字符串转换为JSON对象
        	console.log(xhr.responseText);
    	}
    </script>
请求参数传递
  • 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>
  • POST 请求方式
// 设置请求参数格式的类型（post请求必须要设置）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name=zhangsan&age=20');

请求报文

在 HTTP 请求和响应的过程中传递的数据块叫报文,包括要传送的数据和一些附加信息,这些数据和信息要遵守规定好的格式.
在这里插入图片描述
实例代码

    <!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>
请求参数的格式
  1. application/x-www-form-urlencoded
     name = zhangsan&age=20&sex=男
  2. application/json
     {name: 'zhangsan', age: '20', sex:'男'}
    在请求头中指定 Content-Tytpe 属性的值是 application/json,告诉服务器端当前请求参数格式是json.
     JSON.stringify() // 将json对象转换为json字符串
    注意: get请求是不能提交json 对象数据格式的,传统网站的表单提交也是不支持json对象数据格式的.
    示例代码
     <script>
     // 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>
获取服务器端的响应

Ajax 状态码

在创建ajax对象,配置ajax对象,发送请求,以及接收完服务器端数据,这个过程中的每一个步骤都会对应一个值,这个数值就是ajax状态码.
0: 请求未初始化(还没有调用open())
1: 请求已经建立, 但是还没有发送(还没有调用send())
2: 请求已发送
3: 请求正在处理中,通常响应中已经有部分数据可以用了
4: 响应已经完成,可以获取并使用服务器的响应了

    xhr.readyState // 获取Ajax状态码
获取服务端的响应

onreadystatechange 事件

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

代码示例

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

两种获取服务器端响应方式的区别
在这里插入图片描述

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</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>
低版本 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>

Ajax 异步编程

同步异步概述

同步

  • 一个人同一时间只能做一件事情, 只有一件事情做完, 才能做另外一件事情.
  • 落实到代码中, 就是上一行代码执行完成后, 才能执行下一行代码, 即代码逐行执行.
    console.log('before');
    console.log('after');

异步

  • 一个人一件事情做了一半,转而去做其他事情, 当其他事情做完以后, 在回过头来继续做之前未完成的事情.
  • 落实到代码上, 就是异步代码虽然需要花费时间去执行, 但程序不会等待异步代码执行完成后在继续执行后续代码, 而是直接执行后续代码, 当后续代码执行完成后再回头看异步代码是否返回结果, 如果已有返回结果, 再调用事先准备好的回调函数处理异步代码执行的结果.
    console.log('before');
    setTimeout(
    	() => { console.log('last');
    }, 2000);
    console.log('after');
Ajax 封装

问题: 发送一次请求代码过多, 发送多次请求代码沉余且重复.

解决方案: 将请求代码封装到函数中, 发请求时调用函数即可.

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

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

Node.js 服务器示例代码

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
const bodyParser = require('body-parser');
const fs = require('fs');
// 创建web服务器
const app = express();
// 解析post请求的JSON格式
app.use(bodyParser.json());

// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
// 对应ajax入门
app.get('/first', (req, res) => {
	res.send('Hello, Ajax');
});
// 对应处理服务器端返回的JSON数据
app.get('/responseData', (req, res) => {
	res.send({"name": "zs"});
});
// 对应传递get请求参数
app.get('/get', (req, res) => {
	res.send(req.query);
});
// 对应传递get请求参数
app.post('/post', (req, res) => {
	res.send(req.body);
});
// 对应向服务器端传递JSON格式的请求参数
app.post('/json', (req, res) => {
	res.send(req.body);
});
// 获取服务器端响应数据的另一种方式
app.get('/readystate', (req, res) => {
	res.send('hello');
});
// Ajax错误处理
app.get('/error', (req, res) => {
	//console.log(abc);
	res.status(400).send('not ok');
});
// Ajax缓存
app.get('/cache', (req, res) => {
	fs.readFile('./test.txt', (err, result) => {
		res.send(result);
	});
});

// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');
Omc 꿈 범
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax实例入门代码
10-30
想学习ajax的朋友，如果刚开始接触可以查看脚本之家的ajax栏目，之前的一些文章。
AJAX—新手快车道入门教程
07-22
资源名称：AJAX—新手快车道入门教程内容简介：首先、AJAX是一种很酷的技术，一旦采用了AJAX，就能让你的Web页面， 你的网站，甚至连同你们公司，都变得很酷。在Web2.0的时代里，不使用一点AJAX技术的网站，就会显得...
初学AJAX必看——基础篇
哎哟喂露露
06-27 3261
首先，AJAX是什么？它的全称是Asynchronous JavaScript and XML   (翻译过来是异步的JavaScript 和 XML )它是一门通信技术，不是语言，这一技术无需刷新页面就可以从服务器取得数据，意思就是不用重新加载整个网页，也能够更新部分网页，用户体验非常好...
从零开始：微信小程序新手入门宝典
iOS_开发
01-12 880
为了方便大家了解并入门微信小程序，我将一些可能会需要的知识，列在这里，让大家方便的从零开始学习；
从零开始：微信小程序新手入门宝典（正在更新）
Dreawer微信小程序联盟
06-21 2913
为了方便大家了解并入门微信小程序，我将一些可能会需要的知识，列在这里，让大家方便的从零开始学习； 首先感谢几位给予建议的同学，包括@dzp @M-信念 @Somnus13 ，以下内容只是一部分，但是够用了，可以先放出来给大家看看： 一：微信小程序的特点 张小龙：张小龙全面阐述小程序，推荐通读此文； 小程序是一种不需要下载、安装即可使用的应用，它出现了触手可及的梦想，用户扫一
原创：从零开始，微信小程序新手入门宝典《一》
热门推荐
AAASai_的博客
01-06 1万+
为了方便大家了解并入门微信小程序，我将一些可能会需要的知识，列在这里，让大家方便的从零开始学习； 一：微信小程序的特点 张小龙：张小龙全面阐述小程序，推荐通读此文； 小程序是一种不需要下载、安装即可使用的应用，它出现了触手可及的梦想，用户扫一扫或者搜一下即开打开应用，也出现了用完即走的理念，用户不用关心安装太多应用的问题，应用随处可用，但又无须安装卸载。我当时是这样来定义
Ajax从入门到精通.pdf
05-09
Ajax从入门到精通.pdf 本书籍旨在深入浅出地介绍 Ajax 技术，从基础知识到高级应用，全面覆盖 Ajax 的核心概念、技术原理、实现方法和实践应用。书籍的主要内容包括： 1. Ajax 概述：本书首先介绍了 Ajax 的概念、...
Ajax新手入门手册
05-22
**Ajax新手入门手册** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新，提高了用户体验。本...
AJAX 简介及入门实例
10-29
AJAX，全称为异步JavaScript和XML，是一种用于创建交互式网页应用的技术。它使得Web应用程序能够不需刷新整个页面就能更新部分内容，提高了用户体验，减少了用户等待时间。AJAX的核心在于XMLHttpRequest对象，它是...
xiaoshuo-1721215737506.apk
最新发布
07-17
xiaoshuo-1721215737506.apk
最新机械设计课程设计说明书14643.doc
07-17
说明书
2024年欧洲铝焊丝市场主要企业市场占有率及排名.docx
07-17
2024年欧洲铝焊丝市场主要企业市场占有率及排名.docx
出货单（商品出货登记明细单）-Excel 模版
07-17
【作品名称】：出货单（商品出货登记明细单）-Excel 模版 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
ktyx 工作工具网址存档
07-17
ktyx 工作工具网址存档
出纳日报表-Excel模板
07-17
【作品名称】：出纳日报表-Excel模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
最新机械设计课程设计一级圆柱齿轮减速器设计说明书.doc
07-17
说明书
最新机械设计课程设计_一级圆柱齿轮减速器说明书15354.doc
07-17
说明书
广东工业大学，考研复试专业课(所有专业都有)，历年真题及答案、备考资料题库、高分笔记教程.pdf
07-17
广东工业大学，考研复试专业课(所有专业都有)，历年真题及答案、备考资料题库、高分笔记教程.pdf

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值