摸鱼的前端练习学习笔记（五）

摸鱼的前端练习学习笔记（五）

今天加了两个div，其中一个用来实现echarts，另外一个用来练习ajax，在实际操作中，ajax一般用于前端和后端的整体使用，而单独在前端使用ajax就是一些页面的更新。

echarts

使用echarts首先到官网进行下载，然后引入这个js文件，写一个div块，通过js中的DOM获取这个div块，在这个div中写echarts：

		var myChart = echarts.init(document.getElementById('textthree'));
		var data = [];
		for (var i = 0; i <= 100; i++) {
			var theta = i / 100 * 360;
			var r = 5 * (1 + Math.sin(theta / 180 * Math.PI));
			data.push([r, theta]);
			}
		option = {
				title: {
					text: '极坐标双数值轴'
				},
				legend: {
					data: ['line']
				},
				polar: {},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross'
					}
				},
				angleAxis: {
					type: 'value',
					startAngle: 0
				},
				radiusAxis: {
				},
				series: [{
					coordinateSystem: 'polar',
					name: 'line',
					type: 'line',
					data: data
				}]
		};
		myChart.setOption(option);

这个表格是极坐标心形图。

ajax

开头也说了实现只在前端进行ajax的练习就是一些页面的更改，这里我使用的是按钮操作更新文字，而ajax更改的文字的内容来源于txt文件，将txt文件中的内容改入到原来的文字。ajax的学习笔记可以查看帖子:https://blog.csdn.net/qq_38499450/article/details/100507072
这篇帖子也是我写的，里面描述了ajax的实现方式和流程。

	function loadXMLDoc()
		{
			var xmlhttp;
			if (window.XMLHttpRequest)
			{
				xmlhttp=new XMLHttpRequest();
			}
			else
			{
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function()
			{
				if (xmlhttp.readyState==4 && xmlhttp.status==200)
				{
					document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
				}
			}
			xmlhttp.open("GET","../txt/ajaxtestt.txt",true);
			xmlhttp.send();
		}

图片在下面，留个记录看看每天的进度