点赞再看,养成习惯
前面都是一些语法,那我们前端怎么实现与后台交互呢?
1.Ajax是什么?
Ajax就是让浏览器跟服务器交互的一套API.它的作用就是可以让浏览器和服务器在无刷新的情况下进行交互.
2.那什么是服务器呢?
1:首先我们联想到它为什么叫服务器?服务嘛!当然是提供某种特殊服务,在通俗一点,服务器就是一台电脑!
2:那如何让服务器(电脑)提供服务呢?
2.1:比如我想让我的电脑提供一个听歌服务?那我们需要装一个软件吧!网易云?QQ音乐?
2.2:我想让我的电脑提供一个看视频的服务,也需要装一个软件吧!爱奇艺?优酷?
3.上面我说过,服务器就是某些安装了特殊软件,可以提供某些特殊服务的电脑!常见服务器:
3.1:数据库服务
3.2:文件服务
3.3:多媒体服务
3.4:邮件服务
3.5:Web服务
4:根据上面说的,如果我想让我的电脑成为一台web服务器,那我们也应该安装对应的软件就行了
3.服务器交互流程
1.你是否有过这样的疑惑?
1.1为什么我只要输入一个网址回车就能看到网页?
1.2为什么我们修改了网页之后,需要在浏览器刷新才能看到新的内容?
1.3为什么在浏览器输入http://www.baidu.com就可以看到百度网页?
2.解答
1.浏览器与服务器之间是有交互的,这个交互都是由三个部分来组成的
1.1:请求报文(浏览器发起请求,服务器接收)
1.2:处理(服务器处理这个请求)
1.3:响应报文(服务器响应对应的数据给浏览器)
4.为什么我们需要ajax?
1:开始学前端的时候,我们写的静态网页都是固定的假数据,其实网页的数据都是从服务器获取的,一旦服务器数据变化,网页上的内容也会发生变化
2:虽然可以通过在浏览器地址栏直接输入网址的方式向服务器获取数据,但是我们的网页会刷新
3.学会了ajax:就可以做到在不刷新网页的情况下向服务器请求数据,让网站动态变化
5.ajax的get与post请求
在回调函数中不是立即执行,要等到服务器返回的数据才执行
网址:后台提供的接口文档
1.什么是接口文档?
1.接口:web服务器提供的,让ajax请求的网络地址称为接口,又称API
2.接口文档:为了方便开发人员使用,我们的后端小伙伴会提供一种专门的文档,称为接口文档
3.一个标准的接口文档至少要包含以下三种信息:(只能多,不能少)
a:请求的地址(url)
b:请求的方法(get或者post)
c:请求的参数
2.get请求
<script>
//get请求
//创建XMLHttpRequest对象
var xhr=new XMLHttpRequest();
//设置请求方法和地址
xhr.open('get','网址?key='+value);
//发送请求
xhr.send();
//注册回调函数
xhr.onload=function(){
console.log(xhr.responseText);
}
</script>
3.post请求
<script>
//post请求
//创建XMLHttpRequest
var xhr=new XMLHttpRequest();
//设置请求方法和地址
xhr.open('post','网址');
//设置请求头
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//发送请求
xhr.send('key=value');
//注册回调函数
xhr.onload=function(){
console.log(xhr.responseText);
}
</script>
4.get与post的区别
1.传参的方式不同
1.1:get请求参数直接在url后面拼接 ： `url?key=value
1.2:post请求参数不能写在url，需要在send方法中传参('key=value')
2.post请求需要设置请求头(固定语法,复制粘贴一把说就完事了)
2.1: xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
5.JSON数据格式
1:当我们从后端请求的数据,我们要拿到该数据,后端就有了一些通用的数据格式,方便我们获取
2.json格式
2.1通用的数据格式,很多语言都支持,不同语言中解析他的方式不同
2.2作用:解决跨平台的问题的问题,一般服务器返回的数据都是json格式
2.3json格式特点
a:属性名和属性值都是字符串(需要使用双引号包括)
b.如果属性值是布尔类型和数字类型,则可以省略字符串
3json格式与js对象互转
<script>
//json字符串转成js对象
JSON.parse(json数据格式);
//js对象转成json字符串
JSON.stringify(js对象);
</script>
4.还有一种数据格式XML格式
不过已经过时了,一般出现在政府网站,为了考虑广大客户的浏览器版本问题,政府还是采用的XML数据格式
特点:1必须都是双标签
2:XML数据声明格式固定
<?xml version="1.0" encode="UTF-8"?>
3:XML的标签可以自定义
<city>城市</city>
4.:除了顶部的声明之外,所有内容必须包在一个根标签内部
缺点:1:数据传输量大:有余
2:解析繁琐
jq解析XML格式数据:$('选择器',xml格式的数据).text()
那我们获取到数据,如何渲染到页面上呢?
6.模板引擎art-template
官网:https://aui.github.io/art-template/zh-cn/index.html
1.怎么用?
1.1导入模板引擎art-template.js文件
<script src="./libs/template-web.js"></script>
1.2写HTML模板
<script id='tpl' type="text/html"></script>
- 模板写到script标签中
- 必须要设置id
- 必须要设置type(一般为 type="text/html")
1.3调用art-template的官方API开始解析模板
var htmlStr = template('tpl', jsonObjc.data);
- 第一个参数:你的模板id名
- 第二个参数:你想要解析的js对象
- 返回值:解析数据之后的HTML字符串
1.4将解析好的模板渲染到页面上
document.body.innerHTML = htmlStr;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1.导包 -->
<script src="./libs/template-web.js"></script>
</head>
<body>
<!-- 2.写模板
一定要设置id
一定要设置type = "text/html"
-->
<script id="tianqi" type="text/html">
<p>{{ data.ganmao }}</p>
</script>
<script>
var jsonStr = '{"data":{"yesterday":{"date":"24日星期二","high":"高温 25℃","fx":"无持续风向","low":"低温 18℃","fl":"<![CDATA[<3级]]>","type":"多云"},"city":"深圳","forecast":[{"date":"25日星期三","high":"高温 25℃","fengli":"<![CDATA[<3级]]>","low":"低温 17℃","fengxiang":"无持续风向","type":"多云"},{"date":"26日星期四","high":"高温 26℃","fengli":"<![CDATA[3-4级]]>","low":"低温 17℃","fengxiang":"东北风","type":"多云"},{"date":"27日星期五","high":"高温 22℃","fengli":"<![CDATA[<3级]]>","low":"低温 13℃","fengxiang":"东北风","type":"多云"},{"date":"28日星期六","high":"高温 22℃","fengli":"<![CDATA[<3级]]>","low":"低温 16℃","fengxiang":"无持续风向","type":"阴"},{"date":"29日星期天","high":"高温 21℃","fengli":"<![CDATA[3-4级]]>","low":"低温 17℃","fengxiang":"东北风","type":"中雨"}],"ganmao":"各项气象条件适宜，无明显降温过程，发生感冒机率较低。","wendu":"23"},"status":1000,"desc":"OK"}';
var jsonObj = JSON.parse(jsonStr);
console.log(jsonObj);
/* 3.调用官方文档API
第一个参数 ： 模板id
第二个参数： 要渲染的js对象
返回值 ： 渲染好的html字符串
*/
var htmlStr = template('tianqi',jsonObj);
console.log(htmlStr);
//4.将渲染好的数据显示到页面
document.body.innerHTML += htmlStr;
</script>
</body>
</html>
2.模板引擎的语法介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1.导包 -->
<script src="./libs/template-web.js"></script>
</head>
<body>
<!-- 2.写模板 -->
<script id="tpl" type="text/html">
<!-- 01 输出语法 -->
<p>{{ data.city }}</p>
<p><%= data.city %></p>
<p>{{ data.wendu > 20?'今天好热':'今天好冷' }}</p>
<p>{{ data.wendu + 1 }}</p>
<!-- 02 逻辑分支语法 -->
{{ if data.wendu > 30 }}
<p>今天温度大于20度</p>
{{ /if }}
<!-- 03 循环遍历语法 -->
{{ each data.forecast }}
<li>
<span>下标：{{ $index }}</span>---
<span>元素：{{ $value.date }}</span>---
</li>
{{ /each }}
</script>
<script>
var jsonStr = '{"data":{"yesterday":{"date":"24日星期二","high":"高温 25℃","fx":"无持续风向","low":"低温 18℃","fl":"<![CDATA[<3级]]>","type":"多云"},"city":"深圳","forecast":[{"date":"25日星期三","high":"高温 25℃","fengli":"<![CDATA[<3级]]>","low":"低温 17℃","fengxiang":"无持续风向","type":"多云"},{"date":"26日星期四","high":"高温 26℃","fengli":"<![CDATA[3-4级]]>","low":"低温 17℃","fengxiang":"东北风","type":"多云"},{"date":"27日星期五","high":"高温 22℃","fengli":"<![CDATA[<3级]]>","low":"低温 13℃","fengxiang":"东北风","type":"多云"},{"date":"28日星期六","high":"高温 22℃","fengli":"<![CDATA[<3级]]>","low":"低温 16℃","fengxiang":"无持续风向","type":"阴"},{"date":"29日星期天","high":"高温 21℃","fengli":"<![CDATA[3-4级]]>","low":"低温 17℃","fengxiang":"东北风","type":"中雨"}],"ganmao":"各项气象条件适宜，无明显降温过程，发生感冒机率较低。","wendu":"23"},"status":1000,"desc":"OK"}';
var jsonObj = JSON.parse(jsonStr);
console.log(jsonObj);
/* 3.调用官方API：开始解析
本质 ： 字符串替换
*/
var htmlStr = template('tpl',jsonObj)
/* 4.将解析好的html字符串渲染页面 */
document.body.innerHTML += htmlStr;
</script>
</body>
</html>
网友评论