@TOC
笔记1
【Ajax的由来】
ajax是javascript里面的一个技术
2005年以前web1.0时代
网页都是以展示为主，内容多为静态
那个时候没有前端这个职位 美工或者叫模板工程师
后台以嵌套模板的形式开发
asp jsp php
2005年以后 web2.0时代
用户不仅仅阅读静态网页，为网站做出贡献
用户体验提高了。
ajax是web2.0时代的一个标志
现在web3.0时代为主
大数据时代
网络可以根据用户，给用户进行推送
搜集你平常的习惯
【ajax是干什么】
就是做交互的
什么是交互
用户对浏览器发出指令（做出操作），浏览器或者程序对操作有相应的反馈
主要做的是前后台的交互，传递接收数据
【form表单】
form必须要填写的东西是什么
1、action 地址
2、name 数据的名字
3、method 默认值 get
form表单数据的格式
get 地址栏？数据名=数据值&数据名=数据值
post 不在地址栏显示
get和post的区别
1、get地址栏提交，post不是
2、get不安全，post相对安全
3、缓存 cache
浏览器对于同一个地址只访问一次
这个缓存对开发者不好
get有缓存的，post没有缓存
4、容量大小
get 比较小 几k
post 很大 理想没有限制
平常项目中get的使用量比post多 互联网最重要的就是分享
form表单在传递数据的时候缺点
1、刷新页面、跳转页面、覆盖页面 用户体验非常差
2、只能给后台发送数据、不能接收后台的数据
【ajax特点】
1、无刷新
2、不仅可以发送数据、还可以接收数据
【ajax】
Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
异步 不需要等待、可以继续操作其他事情
同步 需要等待，得到结果后，才能继续做下一件事
javascript是一个同步（阻塞加载）的语言
ajax可以模拟异步的操作
ajax为什么要有异步的特性
XML 是一种数据格式 但是现在用的很少了，因为这种格式非常麻烦
json格式
【json】
let a=1;
let name='张三'
let age=18
let sex=女
let person1={
name:'张三',
age:18,
sex:'女'
}
person1.job='学生'
person1.job='老师'
let person1={
'name':'张三',
'age':18,
'sex':'女'
}
let person1={
"name":"张三",
"age":18,
"sex":"女"
}
json对象：无序的键值对集合
js的json对象和数据交互的json格式有什么区别
js的json对象里面的key我们一般不加引号
但是当json变成一种格式的时候必须是双引号
{
"name":"张三",
"age":18,
"sex":"女"
}
【数组】
[1,2,3,4,5]
['三国演义','水浒传','西游记','红楼梦']
['apple','banana','pear']
有序的数据集合
【网页需要展示的数据如何用json格式储存】
【如何根据json数据，渲染页面】
1、先布局
2、循环数据
3、创建元素
4、在元素里面添加内容
5、把元素插入到指定的位置
【如何去利用ajax去请求数据】
ajax
原生的ajax是一系列的步骤，不是一个简单的操作。
如果我们没有都把这些步骤全部写一遍，不行。所以需要把ajax封装使用
1、先布局
2、利用ajax请求数据
3、把字符串的json变成真正的json对象
4、循环数据
5、创建元素
6、在元素里面添加内容
7、把元素插入到指定的位置
【我封装的ajax的用法】
ajax({
url:'',//后台的地址
type:'get|post'//传输方式 默认是get
data:{}, //给后台传送的数据 {a:1,b:2}
success:function(res){} //成功的函数 res是接收的数据
error:function(err){} //失败的函数 err是失败的错误信息
})代码片段
json test
Document
ajax.js
function json2url(json){
json.t=Math.random();
var arr=[];
for(var name in json){
arr.push(name+'='+json[name]);
}
return arr.join('&');
}
function ajax(json){
json=json || {};
if(!json.url){
alert('地址是必填的！');
return;
}
json.type=json.type || 'get';
json.data=json.data || {};
var timer=null;
if(window.XMLHttpRequest){
var oAjax=new XMLHttpRequest();
}else{
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
switch(json.type.toLowerCase()){
case 'get':
oAjax.open('GET',json.url+'?'+json2url(json.data),true);
oAjax.send();
break;
case 'post':
oAjax.open('POST',json.url,true);
oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
oAjax.send(json2url(json.data));
break;
}
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
json.success && json.success(oAjax.responseText);
}else{
json.error && json.error(oAjax.status);
}
}
};
}news.html
Document
news.json 数据
{
"news": [{
"tit": "习近平这样锻造坚如磐石的军民关系",
"link": "https://news.cctv.com/2020/10/20/ARTIKxDVY9y0BGSdrju69hVH201020.shtml"
}, {
"tit": "经济特区全面深化改革故事铁血松骨峰",
"link": "https://xhpfmapi.zhongguowangshi.com/vh512/share/9481893"
}, {
"tit": "新冠疫苗将以成本作为定价基础 受试者无不良反应",
"link": "http://www.ce.cn/xwzx/gnsz/gdxw/202010/21/t20201021_35914000.shtml"
}, {
"tit": "“京彩”网络正能量精品评选活动作品征集入口",
"link": "https://news.cctv.com/2020/10/20/ARTIKxDVY9y0BGSdrju69hVH201020.shtml"
}, {
"tit": "我国明年新冠疫苗产能继续扩大 大美安徽",
"link": "https://news.cctv.com/2020/10/20/ARTIKxDVY9y0BGSdrju69hVH201020.shtml"
}, {
"tit": "「网警说」六招教你远离恶意App",
"link": "https://news.cctv.com/2020/10/20/ARTIKxDVY9y0BGSdrju69hVH201020.shtml"
}],
"taobao": [{
"tit": "大豆家 方头奶奶鞋",
"msg": "一脚蹬设计，方便日常的穿",
"number": 3758,
"src": "https://img.alicdn.com/tfscom/i1/1581756766/TB2TF0ch0zJ8KJjSspkXXbF7VXa_!!1581756766.jpg_180x180xzq90.jpg_.webp",
"link": "https://market.m.taobao.com/app/tb-source-app/aiguangjiepc/content/index.html?spm=a21bo.2017.201870.1.5af911d9ynJKgQ&contentId=2500000200570373177&scm=1007.12846.156652.0&pvid=caca004c-320a-4ae5-8c7b-01f30cdf0111"
}, {
"tit": "佳宝路转角水槽",
"msg": "304不锈钢，表面光洁坚固",
"number": 375,
"src": "https://img.alicdn.com/tfscom/i1/1581756766/TB2TF0ch0zJ8KJjSspkXXbF7VXa_!!1581756766.jpg_180x180xzq90.jpg_.webp",
"link": "https://market.m.taobao.com/app/tb-source-app/aiguangjiepc/content/index.html?spm=a21bo.2017.201870.1.5af911d9ynJKgQ&contentId=2500000200570373177&scm=1007.12846.156652.0&pvid=caca004c-320a-4ae5-8c7b-01f30cdf0111"
}, {
"tit": "肖优秀真皮细高跟过膝",
"msg": "细跟尖头设计更显优雅女人",
"number": 58,
"src": "https://img.alicdn.com/tfscom/i1/1581756766/TB2TF0ch0zJ8KJjSspkXXbF7VXa_!!1581756766.jpg_180x180xzq90.jpg_.webp",
"link": "https://market.m.taobao.com/app/tb-source-app/aiguangjiepc/content/index.html?spm=a21bo.2017.201870.1.5af911d9ynJKgQ&contentId=2500000200570373177&scm=1007.12846.156652.0&pvid=caca004c-320a-4ae5-8c7b-01f30cdf0111"
}, {
"tit": "LANCOME秋冬限量迷雾",
"msg": "雾面质感暗红色管身，优雅",
"number": 18,
"src": "https://img.alicdn.com/tfscom/i1/1581756766/TB2TF0ch0zJ8KJjSspkXXbF7VXa_!!1581756766.jpg_180x180xzq90.jpg_.webp",
"link": "https://market.m.taobao.com/app/tb-source-app/aiguangjiepc/content/index.html?spm=a21bo.2017.201870.1.5af911d9ynJKgQ&contentId=2500000200570373177&scm=1007.12846.156652.0&pvid=caca004c-320a-4ae5-8c7b-01f30cdf0111"
}, {
"tit": "汽车盲点变道辅助系",
"msg": "行车安全盲区监测系统，采",
"number": 8,
"src": "https://img.alicdn.com/tfscom/i1/1581756766/TB2TF0ch0zJ8KJjSspkXXbF7VXa_!!1581756766.jpg_180x180xzq90.jpg_.webp",
"link": "https://market.m.taobao.com/app/tb-source-app/aiguangjiepc/content/index.html?spm=a21bo.2017.201870.1.5af911d9ynJKgQ&contentId=2500000200570373177&scm=1007.12846.156652.0&pvid=caca004c-320a-4ae5-8c7b-01f30cdf0111"
}
]
}