Ajax 编程

最新推荐文章于 2023-01-09 11:17:06 发布

henucm

最新推荐文章于 2023-01-09 11:17:06 发布

阅读量304

点赞数

本文链接：https://blog.csdn.net/henucm/article/details/105107893

版权

Ajax 编程

模板引擎

模板引擎概述

作用：使用模板引擎提供的模板语法，可以将数据和 HTML 拼接起来。

官方地址： https://aui.github.io/art-template/zh-cn/index.html

下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件

使用步骤

 <script src="./js/template-web.js"></script>

准备 art-template 模板

 <script id="tpl" type="text/html">
     <div class="box"></div>
 </script>

告诉模板引擎将哪一个模板和哪个数据进行拼接

 var html = template('tpl', {username: 'zhangsan', age: '20'});

将拼接好的html字符串添加到页面中

 document.getElementById('container').innerHTML = html;

通过模板语法告诉模板引擎，数据和html字符串要如何拼接

 <script id="tpl" type="text/html">
     <div class="box"> {{ username }} </div>
 </script>

案例

邮箱验证

// 获取页面元素
var emailInp=document.querySelector('#email');
var infoInp=document.querySelector('#info');
// 当文本框离开焦点之后
emailInp.addEventListener('blur',function(){
	var email=this.value;
	console.log(email);
	var reg= /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
	if(!reg.test(email)){
		infoInp.innerHTML='请输入符合规则的邮箱地址';
		infoInp.classList.add('bg-danger');
		return;
	}
	ajax({
		type:'get',
		url: 'http://localhost:3000/verifyEmailAdress',
		data:{
			email:email
		},
		success:function(result){
			console.log(result);
			infoInp.innerHTML=result.message;
			infoInp.className='bg-success';
		},
		error:function(result){
			console.log(result);
			infoInp.innerHTML=result.message;
			infoInp.className='bg-danger';
		}
	});
});

省市区联动

通过接口获取省份信息
使用JavaScript获取到省市区下拉框元素
将服务器端返回的省份信息显示在下拉框中
为下拉框元素添加表单值改变事件（onchange）
当用户选择省份时，根据省份id获取城市信息
当用户选择城市时，根据城市id获取县城信息

<!-- 省份模板 -->
<script type="text/html" id="provinceTpl">
	<option>请选择省份</option>
	{{each province}}
	<option value="{{$value.id}}">{{$value.name}}</option>
	{{/each}}
</script>
<!-- 城市模板 -->
<script type="text/html" id="cityTpl">
	<option>请选择省份</option>
	{{each city}}
	<option value="{{$value.id}}">{{$value.name}}</option>
	{{/each}}
</script>
<!-- 县城模板 -->
<script type="text/html" id="areaTpl">
	<option>请选择省份</option>
	{{each area}}
	<option value="{{$value.id}}">{{$value.name}}</option>
	{{/each}}
</script>
<script>
	// 获取省市区下拉框元素
	var province = document.querySelector('#province');
	var city = document.querySelector('#city');
	var area = document.querySelector('#area');
	// 获取省份信息
	ajax({
		type: 'get',
		url: 'http://localhost:3000/province',
		success: function (data) {
			// 将服务器端返回的数据和html进行拼接
			var html = template('provinceTpl', {province: data});
			// 将拼接好的html字符串显示在页面中
			province.innerHTML = html;
		}
	});
	// 为省份的下拉框添加值改变事件
	province.onchange=function(){
		var pid=this.value;
		//清空县城下拉框中的数据
		var html=template('cityTpl',{area:[]})
		area.innerHTML=html;
		ajax({
			type:'get',
			url:'/cities',
			data:{
				id: pid
			},
			success:function(data){
				var html=template('cityTpl',{city: data})
				city.innerHTML=html;
			}
		})
	}
	city.onchange=function(){
		var cid=this.value;
		ajax({
			url:'/areas',
			data:{
				id:cid
			},
			success:function(data){
				var html=template('areaTpl',{area: data})
				area.innerHTML=html;
			}
		})
	}
</script>

FormData

FormData 对象的作用

模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。
异步上传二进制文件

FormData 对象的使用

准备 HTML 表单

 <form id="form">
     <input type="text" name="username" />
     <input type="password" name="password" />
     <input type="button"/>
</form>

将 HTML 表单转化为 formData 对象

var form = document.getElementById('form'); 
var formData = new FormData(form);

提交表单对象

xhr.send(formData);

注意：

Formdata 对象不能用于 get 请求，因为对象需要被传递到 send 方法中，而 get 请求方式的请求参数只能放在请求地址的后面。
服务器端 bodyParser 模块不能解析 formData 对象表单数据，我们需要使用 formidable 模块进行解析。

const formidable = require('formidable');
app.post('/formData', (req, res) => {
	// 创建formidable表单解析对象
	const form = new formidable.IncomingForm();
	// 解析客户端传递过来的FormData对象
	form.parse(req, (err, fields, files) => {
		res.send(fields);
	});
});

FormData 对象的实例方法

获取表单对象中属性的值

 formData.get('key');

设置表单对象中属性的值

 formData.set('key', 'value');

删除表单对象中属性的值

 formData.delete('key');

向表单对象中追加属性值

 formData.append('key', 'value');

注意：set 方法与 append 方法的区别是，在属性名已存在的情况下，set 会覆盖已有键名的值，append会保留两个值。

FormData对象实现二进制文件上传

<script type="text/javascript">
	// 获取文件选择控件
	var file = document.querySelector('#file');
	// 获取进度条元素
	var bar = document.querySelector('#bar');
	// 获取图片容器
	var box = document.querySelector('#box');
	// 为文件选择控件添加onchanges事件
	// 在用户选择文件时触发
	file.onchange=function(){
		var formData=new FormData();
		formData.append('attrName',this.files[0]);
		var xhr=new XMLHttpRequest();
		xhr.open('post','http://localhost:3000/upload');
		// 在文件上传过程中触发
		xhr.upload.onprogress=function(ev){
			// ev.loaded 文件已经上传了多少
			// ev.total 上传文件的zongdaxiao
			var result=(ev.loaded / ev.total) * 100+'%';
			bar.style.width=result;
			// 将百分比显示在进度条中
			bar.innerHTML=result;
		}
		xhr.send(formData);
		xhr.onload=function(){
			if(xhr.status==200){
				// 将服务器端返回的数据显示在控制台中
				var result=JSON.parse(xhr.responseText);
				// 动态创建imgbiaodan
				var img=document.createElement('img');
				// 给图片标签设置src属性
				img.src=result.path;
				// 当图片加载完成以后
				img.onload=function(){
					// 将图片显示在页面中
					box.appendChild(img);
				}
			}
		}

	}
</script>

// 实现文件上传的路由
app.post('/upload', (req, res) => {
	// 创建formidable表单解析对象
	const form=new formidable.IncomingForm();
	// 设置客户端上传文件的存储路径
	form.uploadDir=path.join(__dirname,'public','uploads');
	//  保留上传文件的后缀名字
	form.keepExtensions=true;
	form.parse(req,(err,fields,files)=>{
		// 将客户端传递过来的文件地址响应到客户端
		res.send({
			path:files.attrName.path.split('public')[1]
		});
	})
});

同源政策

Ajax请求限制

Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。

什么是同源

如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。
http://www.example.com/dir/page.html

http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）
https://www.example.com/dir/page.html：不同源（协议不同）

同源政策的目的

同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指 A 网站在客户端设置的 Cookie，B网站是不能访问的。

随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax 请求，如果请求，浏览器就会报错。

使用 JSONP 解决同源限制问题

jsonp 是 json with padding 的缩写，它不属于 Ajax 请求，但它可以模拟 Ajax 请求。

将不同源的服务器端请求地址写在 script 标签的 src 属性中

 <script src="www.example.com"></script>
 <script src=“https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数。

 const data = 'fn({name: "张三", age: "20"})';
 res.send(data);

在客户端全局作用域下定义函数 fn

 function fn (data) { }

在 fn 函数内部对服务器端返回的数据进行处理

function fn (data) { console.log(data); }

JSONP 代码优化

客户端需要将函数名称传递到服务器端。
将 script 请求的发送变成动态请求。
封装 jsonp 函数，方便请求发送。
服务器端代码优化之 res.jsonp 方法。

function jsonp (options) {
	// 动态创建script标签
	var script = document.createElement('script');
	// 拼接字符串的变量
	var params = '';

	for (var attr in options.data) {
		params += '&' + attr + '=' + options.data[attr];
	}
    
	// myJsonp0124741
	var fnName = 'myJsonp' + Math.random().toString().replace('.', '');
	// 它已经不是一个全局函数了
	// 我们要想办法将它变成全局函数
	window[fnName] = options.success;
	// 为script标签添加src属性
	script.src = options.url + '?callback=' + fnName + params;
	// 将script标签追加到页面中
	document.body.appendChild(script);
	// 为script标签添加onload事件
	script.onload = function () {
		document.body.removeChild(script);
	}
}

CORS 跨域资源共享

CORS：全称为 Cross-origin resource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax 只能同源使用的限制。

 origin: http://localhost:3000
 
 Access-Control-Allow-Origin: 'http://localhost:3000'
 Access-Control-Allow-Origin: '*'

Node 服务器端设置响应头示例代码：

 app.use((req, res, next) => {
     res.header('Access-Control-Allow-Origin', '*');
     res.header('Access-Control-Allow-Methods', 'GET, POST');
     next();
 })

访问非同源数据服务器端解决方案

同源政策是浏览器给予Ajax技术的限制，服务器端是不存在同源政策限制。

<script>
	// 获取按钮
	var btn = document.getElementById('btn');
	// 为按钮添加点击事件
	btn.onclick = function () {
		ajax({
			type: 'get',
			url: 'http://localhost:3000/server',
			success: function (data) {
				console.log(data);
			}
		})
	};
</script>

// 对于路由
app.get('/server', (req, res) => {
	request('http://localhost:3001/cross', (err, response, body) => {
		res.send(body);
	})
});

withCredentials属性

在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。

withCredentials：指定在涉及到跨域请求时，是否携带cookie信息，默认值为false
Access-Control-Allow-Credentials：true 允许客户端发送请求时携带cookie

实现跨域登录功能

<div class="container">
	<form id="loginForm">
		<div class="form-group">
			<label>用户名</label>
			<input type="text" name="username" class="form-control" placeholder="请输入用户名">
		</div>
		<div class="form-group">
			<label>密码</label>
			<input type="password" name="password" class="form-control" placeholder="请输入用密码">
		</div>
		<input type="button" class="btn btn-default" value="登录" id="loginBtn">
		<input type="button" class="btn btn-default" value="检测用户登录状态" id="checkLogin">
	</form>
</div>
<script type="text/javascript">
	// 获取登录按钮
	var loginBtn = document.querySelector('#loginBtn');
	// 获取检测登录状态按钮
	var checkLogin = document.querySelector('#checkLogin');
	// 获取登录表单
	var loginForm = document.querySelector('#loginForm');
	// 为登录按钮添加点击事件
	loginBtn.onclick = function () {
		// 将html表单转换为formData表单对象
		var formData=new FormData(loginForm);
		var xhr=new XMLHttpRequest();
		xhr.open('post','http://localhost:3001/login');
        // 跨域请求时携带cookie信息
		xhr.withCredentials=true;
		xhr.send(formData);
		xhr.onload=function(){
			console.log(xhr.responseText);
		}

	}

	// 当检测用户状态按钮被点击时
	checkLogin.onclick = function () {
		var xhr=new XMLHttpRequest();
		xhr.open('get','http://localhost:3001/checkLogin');
         // 跨域请求时携带cookie信息
		xhr.withCredentials=true;
		xhr.send();
		xhr.onload=function(){
			console.log(xhr.responseText);
		}
	}
</script>

对应路由

// 拦截所有请求
app.use((req, res, next) => {
	// 1.允许哪些客户端访问我
	// * 代表允许所有的客户端访问我
	res.header('Access-Control-Allow-Origin', '*')
	// 2.允许客户端使用哪些请求方法访问我
	res.header('Access-Control-Allow-Methods', 'get,post')
	// 允许客户端发送跨域请求时携带cookie信息
	res.header('Access-Control-Allow-Credentials',true);
	next();
});

app.post('/login', (req, res) => {
	// 创建表单解析对象
	var form = formidable.IncomingForm();
	// 解析表单
	form.parse(req, (err, fields, file) => {
		// 接收客户端传递过来的用户名和密码
		const { username, password } = fields;
		// 用户名密码比对
		if (username == 'henucm' && password == '123456') {
			// 设置session
			req.session.isLogin = true;
			res.send({message: '登录成功'});
		} else {
			res.send({message: '登录失败, 用户名或密码错误'});
		}
	})
});
,post')
	// 允许客户端发送跨域请求时携带cookie信息
	res.header('Access-Control-Allow-Credentials',true);
	next();
});

app.post('/login', (req, res) => {
	// 创建表单解析对象
	var form = formidable.IncomingForm();
	// 解析表单
	form.parse(req, (err, fields, file) => {
		// 接收客户端传递过来的用户名和密码
		const { username, password } = fields;
		// 用户名密码比对
		if (username == 'henucm' && password == '123456') {
			// 设置session
			req.session.isLogin = true;
			res.send({message: '登录成功'});
		} else {
			res.send({message: '登录失败, 用户名或密码错误'});
		}
	})
});