消息/报文 Message
request Message 请求消息(请求起始行,请求头,请求主体)
response Message响应消息(响应起始行,响应头,响应主体)
request Message请求消息,客户端发送给服务器的数据块
由三部分组成: 请求起始行,请求头,请求主体
①请求起始行
1.请求方法
2.协议版本号 HTTP/1.1
3.请求的url
②请求头
- Host: www.tmooc.cn
告诉服务器，我这个浏览器请求的是哪个地址 - Connection: keep-alive
告诉服务器，开启持久连接 - User-Agent:
告诉服务器,我现在这个浏览器的类型和版本号 - Accept-Encoding: gzip
告诉服务器,我这个浏览器能够接受的压缩文件的类型 - Accept-Language: zh-CN
告诉服务器,我这个浏览器能够接收的自然语言的类型 - Referer: http://www.tmooc.cn/
告诉服务器,这个请求来自于哪个网页
③请求主体
form data
Response Message 响应消息,服务器发送给客户端的数据块
由三部分组成,响应起始行 响应头 响应主体
①响应起始行
1.协议版本号 http/1.1
2.响应状态码
1XX:正在请求,提示信息
2XX:200 响应成功
3XX: 301 永久重定向
302 临时重定向
304 命中缓存
4XX: 404 请求资源不存在(路径错误)
5XX:500 服务器代码错误
3.原因短句(对响应状态码的简短解释)
②响应头
- Date: Mon, 04 Nov 2019 07:34:59 GMT
服务器告诉浏览器,响应的时间 - Connection: keep-alive
服务器告诉浏览器,已经开启了持久连接 - Content-Type: text/html
告诉浏览器,响应主体的类型是什么
text/html html文本
text/css css文本
application/JavaScript js文本
image/jpeg png gif 图片
application/xml 响应主体是xml字符串
application/json 响应主体是json字符串
③响应主体
与缓存相关的消息头
Cache-Control: max-age=0
max-age=0 从服务器将文档传到客户端之时起
此文档处于新鲜的秒数
0 就是不缓存 3600就是1个小时的新鲜度
在网页中添加缓存
使用dom获取/修改页面上的数据
①得到标签对象
通过事件调用方法
<button onclick="show()">显示</button>
使用DOM用js操作页面的元素
1.获取元素对象
①原生var obj=document.getElementById(“目标id”);
②ES6规定,使用id可以直接当做对象
d1.innerHTML=uname.value (d1 div的id uname是input的id)
2.操作对象的值/内容
①值,input对象才有值,obj.value
②内容,双标签才有内容 obj.innerHTML
3.innerHTML详解
双标签的innerHTML中,可以赋值其它标签的字符串
动态的生成新的html结构,可以在双标记中,添加新的元素
从而动态的改变页面结构,添加的元素必须封装在字符串中
4.事件
通过用户的行为,激发的操作,就是事件
单击事件οnclick=“fn()”
获取焦点 οnfοcus=“fn()”
失去焦点 οnblur=“fn()”
οnlοad=“fn()” body的事件,页面加载完毕马上激活
点击事件 数组拼接表格
DOM操作获取表格
<body onload="show()">
<div id="d1"></div>
<script>
function show(){
//创建对象数组
var users=[
{uname:"张三",email:"123@123.com",phone:"1234567",user_name:"张了个三",gender:"1"},
{uname:"张三",email:"123@123.com",phone:"1234567",user_name:"张了个三",gender:"0"},
{uname:"张三",email:"123@123.com",phone:"1234567",user_name:"张了个三",gender:"1"},
{uname:"张三",email:"123@123.com",phone:"1234567",user_name:"张了个三",gender:"0"},
{uname:"张三",email:"123@123.com",phone:"1234567",user_name:"张了个三",gender:"1"}
];
//1.表头
var strHTML=`
<table border="1px">
<tr>
<th>用户姓名</th>
<th>用户邮箱</th>
<th>联系方式</th>
<th>真实姓名</th>
<th>用户性别</th>
<th>操作</th>
</tr>
`;
for(var i=0;i<users.length;i++){
var sex="";
if(users[i].gender=="1"){
sex="男";
}else{
sex="女";
}
//2.循环部分
strHTML+=`
<tr>
<td>${users[i].uname}</td>
<td>${users[i].email}</td>
<td>${users[i].phone}</td>
<td>${users[i].user_name}</td>
<td>${sex}</td>
<td>
<a href="">删除</a>
<a href="">修改</a>
</td>
</tr>
`;
}
//3.表格封口
strHTML+="</table>";
d1.innerHTML=strHTML;
//使用id直接当做对象调用属性
}
</script>
</body>
事件验证用户名密码和bug处理
<body>
<input onblur="check_uname()" onfocus="show_msg()" type="text" id="uname">
<span id="uname_msg"></span><br>
<input onblur="check_upwd()" onfocus="show_upwd()" type="text" id="upwd">
<span id="upwd_msg"></span><br>
<input onblur="check_cpwd()" type="text" id="cpwd">
<span id="cpwd_msg"></span><br>
<button onclick="fn()">提交</button>
<script>
var b1=false;
var b2=false;
var b3=false;
function fn(){
if(b1 && b2 && b3){
alert("提交成功");
}else{
alert("条件不足,不可提交");
}
}
function check_cpwd(){
var $cpwd=cpwd.value;
if($cpwd==""){
cpwd_msg.innerHTML="密码验证不能为空";
b3=false;
}else if($cpwd==upwd.value){
cpwd_msg.innerHTML="匹配";
b3=true;
}else{
cpwd_msg.innerHTML="两次密码不一致";
b3=false;
}
}
function check_upwd(){
var $upwd=upwd.value;
if($upwd==""){
upwd_msg.innerHTML="密码不能为空";
b2=false;
}else if($upwd.length>=8 && $upwd.length<=12){
upwd_msg.innerHTML="正确";
b2=true;
}else{
upwd_msg.innerHTML="格式错误";
b2=false;
}
}
function show_upwd(){
upwd_msg.innerHTML="密码8~12位";
}
function show_msg(){
uname_msg.innerHTML="用户名6~9位";
}
function check_uname(){
var $uname=uname.value;
console.log($uname);
console.log($uname.length);
if($uname==""){
uname_msg.innerHTML="用户名不能为空";
b1=false;
}else if($uname.length>=6 && $uname.length<=9){
uname_msg.innerHTML="正确";
b1=true;
}else{
uname_msg.innerHTML="格式错误";
b1=false;
}
}
</script>
</body>
AJAX: 异步的js 和 xml
本质:使用js提供的异步对象
异步的向服务器发送请求
并接收响应回来的数据
异步对象 XMLHttpRequest xhr
使用ajax(顺序1423)
1.创建异步对象
var xhr=new XMLHttpRequest()
4.创建监听,接收响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var result=xhr.responseText;
}
}
2.打开连接,创建请求
xhr.open("method","url",isAsy);
带参数的http原生get方法
xhr.open("get","/ajax/http_login?uname="+ id.value+"&upwd="+id.value,true);
method:字符串,请求的方法
url:字符串,请求的接口
isAsy:bool,是否使用异步的方式请求 true 是
3.发送请求
xhr.send(formdata) 如果是get/delete,没有请求主体,可以不填/null
监听的是xhr.readyState 表示xhr对象的请求状态
0:请求尚未初始化
1:已经连接服务器,请求正在发送
2:开始接收响应头信息
3:开始接收响应主体
4:接收响应数据成功,完毕
5.带参数的get
http原生get 跟服务器要数据的时候使用
xhr.open(“get”,“url”+id.value,true)
restful的get 查询的时候使用
错误
1.跨域
html文件使用本地模式打开的(双击文件或者编译器打开),
解决方案,把html文件放入服务器的静态资源文件夹
使用服务器访问页面的方式,打开这个html(就是在地址栏输入url)
2.dazhuang----不报错,没效果的情况
在适当的位置,打印有意义的变量,函数里可以答应值
3.404
1.查open中url
2.查接口中 router.get(url,function(){});
3.查app.js中app.use( ‘/ajax’,ajaxRouter );
4.结构问题
5.系统硬件问题
4.500
查服务器接口代码
5.restful的get方法(同delete)
后台
router.get("/login/:uname&:upwd",function(req,res){
//获取参数
var $uname=req.params.uname;
var $upwd=req.params.upwd;
});
前台
xhr.open("get","/ajax/login/"+$uname+"&"+$upwd,true);
使用restful的get或者delete
不能在后台做非空验证
必须在前台做非空验证
提示:不管是http原生的请求方法,还是restful的请求
请求方法,是语义性,而不是语法
尽量符合语义
6.post/put
http原生和restful的post一模一样
//3.发送请求
//设置请求头信息,让请求可以传递所有字符
xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
//创建请求主体
var formdata=“uname=”+KaTeX parse error: Expected 'EOF', got '&' at position 8: uname+"&̲upwd="+upwd;
//发送请求,带着请求主体发送
xhr.send(formdata);
注意:setRequestHeader这个方法,必须在open和send之间
四.数据格式
1.json
本质就是一个string,所有又称json串
JavaScript object notation js对象表示法
以js对象的数据格式表现出来的字符串
后台数据在传递给前台的过程中,自动转换为json串
json的格式
1.json中使用{}表示一个对象
2.json的属性,必须使用"“括起来(写单引号不报错,但是推荐使用”")
3.属性值如果是字符串,也要加""
4.json本身是个字符串,所以最外层加一对单引号
json解析
把json串变成js数组,以便可以使用for操作
var arr=JSON.parse(result);
2.xml
eXtensible Markup language
可拓展 标记 语言
xml文件顶端定义声明
xml标签,只有双标签,区分大小写
xml标签可以嵌套
xml标签的属性值必须加""
每个xml文档,有且只有一个根元素
180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
