Web前端之HTML（6）——Ajax、json、xml

最新推荐文章于 2021-06-22 00:19:47 发布

百里一兔

最新推荐文章于 2021-06-22 00:19:47 发布

阅读量206

点赞数

分类专栏： Web_Html Web_Ajax Web_JSON 文章标签： 20190908

本文链接：https://blog.csdn.net/lb569484787/article/details/100621783

版权

Web_Html 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

Web_Ajax

4 篇文章 0 订阅

订阅专栏

Web_JSON

2 篇文章 0 订阅

订阅专栏

一.AJAX发起post请求

第一步获取ajax异步对象，与get一样

var xhr=new XMLHttpRequest();

第二步绑定监听，获取响应数据，与get一样

xhr.onreadystatechange=function(){
  if(xhr.readyState==4&&xhr.status==200){
   var result=xhr.responseText;
   alert(result);
  }
}

第三步，创建请求，打开连接。
post不需要在url后面拼接参数，所以，直接写接口

var url="/demo/postlogin";
xhr.open("post",url,true);

第四步，发送请求，注意:post的参数放在请求主体中，需要先定义请求主体

var formdata="uname="+uname.value+"&upwd="+upwd.value;

请求主体的格式，与get方法，地址栏中?后面的格式一致

uname=dangdang&upwd=123456

注意*******：由于默认的请求参数类型是text/plain，要求参数是没有特殊符号的字符。但是主体中有特殊符号"&"，text/plain传递不了，需要把content-type修改成application/x-www-form-urlencoded，支持所有字符

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.send(formdata);

注意:setRequesetHeader必须在xhr的open方法与send方法之间

二.json数据格式

1.JS对象数据格式
var 对象名称={
属性1:值，
属性2:值,
属性3:值
}

var stu={
  name:'tom',
  age:18,
  height:175
}

练习
在f12中创建一个笔记本的对象
computer 属性有3个
1.name MacBook air
2.price 7800
3.left 200
控制台打印出
笔记本的名称为：MacBook Air
笔记本的价格为：7800元
在这里插入图片描述

2.json数据的格式
（1）什么是json
javascript object Notation

（2） js 对象表现形式
以js对象的数据格式表示出来的字符串
服务器查询数据库得到result是js对象数组
响应传输给前台ajax后，被自动转换成json字符串（数组）

（3）Json的语法
1° JSON中用一对{ }表示一个对象
2° json中的属性名称，必须使用"“引起来(不要用单引号)
如果属性的值也是字符串，也必须使用”"引起来
3° 表现出来的是一个字符串，所以最外面加引号(使用单引号)

普通的字符串

var tom="汤姆";
var jsontom='{"name":"tom","age":18}';

普通数组

var arr=["tom","lilei","hanmeimei"];
var jsonarr='[
{"name":"tom","age":18},
{"name":"lilei","age":20},
{"name":"hanmeimei","age":21}
]';

将JSON字符串转换成js对象/数组
使用JSON.parse()将json字符串解析成js对象或者数组

在这里插入图片描述

三.XML

1.XML: eXtensible markup language
可扩展的标记语言
XML的标签，是没有被预定义过的，需要自行定义
XML的宗旨，是做数据传递用的。而不是数据展示

2.XML标记的语法
（1）xml文件最顶端做声明

<?xml version="1.0" encoding="utf-8"?>

（2）所有的标记必须成对出现(没有单标记)

<name></name>正确
<name/>错误

（3）严格区分大小写

<Name></Name>正确
<Name></name>错误

（4）xml允许嵌套，注意嵌套顺序

<student>
 <name>TOM</name>
 <age>18</age>
</student>

（5）每个标签允许自定属性，格式与html一致，属性值，必须使用“”括起来

 <name type="EN">TOM</name>

（6）每一个xml文档，有且只有一个根元素

练习
创建一个student.xml 服务器静态资源中创建
第一行声明xml类型，添加一对跟标记<studentlist></studentlist>
在标签中添加3对<student>
每一个student添加name age gender标签

<?xml version="1.0" encoding="utf-8"?>
<studentlist>
	<student>
		<name>Tom</name>
		<age>18</age>
		<gender>男</gender>
	</student>
	<student>
		<name>lilei</name>
		<age>18</age>
		<gender>男</gender>
	</student>
	<student>
		<name>hanmeimei</name>
		<age>19</age>
		<gender>女</gender>
	</student>
</studentlist>

3.ajax请求xml数据

var result=xhr.responseXML;   //获取xml文件

result等同于根目录(studentlist)

var students=result.getElementsByTagName("下一级标签");

getElementsByTagName的返回值是类数组，可以使用for循环操作
返回值只能用for循环操作，但是数组所有的api都不能用

<!doctype html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<input type="button" value="异步获取xml数据" onclick="getXML()">
		<div id="d1"></div>
		<script>
			function getXML(){
				var xhr=new XMLHttpRequest();
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){
						var result=xhr.responseXML;
						//result就是studentlist标签
						//使用getElementsByTagName("标签名称")得到result内部所有这个标签名称组成的数组
						//把内容放到3*3的表格里
						var htmlcode="<table border='1px'>";
						var students=result.getElementsByTagName("student");
						for(var i=0;i<students.length;i++){
							var name=students[i].getElementsByTagName("name")[0];
							var age=students[i].getElementsByTagName("age")[0];
							var gender=students[i].getElementsByTagName("gender")[0];
							htmlcode+="<tr><td>"+name.innerHTML+"</td><td>"+age.innerHTML+"</td><td>"+gender.innerHTML+"</td></tr>"
						}
						htmlcode+="</table>"
						console.log(htmlcode);
						d1.innerHTML=htmlcode;   
//					var
//					students=result.getElementsByTagName("student");
//					var name=students[1].getElementsByTagName("name")[0];
//						console.log(name.innerHTML);	
					}
				}
				xhr.open("get","student.xml",true);
				xhr.send();
			}
		</script>
	</body>
</html>

AJAX项目
1.routes中新建路由myPro.js-------所有接口
与ajax文件夹平级创建静态文件夹myPro-------所有的html

项目阶段1
1.完成登陆
1.完成接口login /myPro/login
2.01_login.html

作业：
1.查询显示用户表所有数据

接口/list 响应回去一个json串
02_userlist.html
调用ajax代码的事件

2.删除用户接口/deleteUser 03_delete.html 输入用户id，点击按钮，删除该用户，提示删除成功 3.用户检索根据用户的uid去数据中查询该用户所有信息响应返回前端页面并显示提高题，做用户修改页面，接收uid---->查询当前该用户所有信息，并显示到对应input中然后手动修改input中的内容，点击修改按钮，再次发送请求，数据库修改该用户信息

百里一兔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端之HTML（6）——Ajax、json、xml

一.AJAX发起post请求第一步获取ajax异步对象，与get一样var xhr=new XMLHttpRequest();第二步绑定监听，获取响应数据，与get一样xhr.onreadystatechange=function(){if(xhr.readyState4&&xhr.status200){var result=xhr.responseText;aler...
复制链接

扫一扫