1.服务器和客户端
服务器:在Internet中,负责存放和对外提供资源的电脑
客户端:在Internet中,负责获取和使用消费资源的电脑
服务器的本质就是电脑
1.1URL地址
URL统一资源定位符,用于标识互联网上面每个资源的唯一存放位置,浏览器通过URL地址才能正确定位到资源存放的位置。
- 2URL的组成
客户端与服务器之间的通信协议
存放该资源的服务器名称
资源在服务器上的具体存放位置
![](https://i-blog.csdnimg.cn/blog_migrate/d1ce1b9027504e377ce86e676a2e554d.png)
1.3 服务器的通信过程
![](https://i-blog.csdnimg.cn/blog_migrate/afbe974e62cf074b49be1c54e60236bd.png)
1.4 资源类型
文字资源
图片资源
音频资源
视频资源
图标资源
数据资源
HTML是页面的骨架
CSS是页面的颜值
JavaScript是页面的行为
数据是页面的灵魂,上面三个都是为数据而服务
1.5请求方式
在网页上面请求服务器的数据资源,需要使用XMLHttpRequest对象,XMLHttpRequest对象是浏览器提供的js对象,可以通过它请求到服务器的数据资源
简单用法:var obj=new XMLHttpRequest();
get方式:通常用于向服务器获取资源
post方式:通常用于向服务器提交资源
2.AJAX
全称Asynchronous JavaScript And XML(异步JavaScript和XML)
在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式就是Ajax
2.1 应用场景
用户名检测
搜索提示
数据的分页显示
数据的增删改查等
2.2jQuery中的Ajax
常见三种方法
$.get()
用来发起get请求,向服务器发起请求获取数据
参数名 | 参数类型 | 必选项 | 说明 |
url | String | 是 | 要请求的资源地址 |
data | object | 否 | 请求资源时携带的参数 |
callback | function | 否 | 请求成功的回调函数 |
$.post()
参数名 | 参数类型 | 必选项 | 说明 |
url | String | 是 | 要请求的资源地址 |
data | object | 否 | 请求资源时携带的参数 |
callback | function | 否 | 请求成功的回调函数 |
$.ajax(
type:‘’,//请求方式
url:‘’,//请求的url地址
data:‘’,//携带的数据
success:function(res){
}//请求成功之后回调的函数
)
2.2.1 form表单
- 组成
表单标签
表单域:文本框、密码框、隐藏域、多选文本、复选框、单选框、下拉选择框、文件上传框等
表单按钮
- 属性
属性 | 说明 | 值 | 描述 |
action | 规定提交表单时向何处发送 | ||
target | 在何处打开actio_URL | _blank | 新窗口 |
_self | 在相同的框架打开 | ||
_parent | 在父框架打开 | ||
_top | 在整个窗口打开 | ||
framename | 在指定框架打开 | ||
method | 提交方式 | post | 安全性高 |
get | 安全性不高 | ||
enctype | 发送表单数据之前对数据进行编码 | application/x-www-form-urlencoded | 发送之前编码所有字符(默认) |
multipart/form-data | 不对字符编码 使用文件上传表单控件时必须使用该值 | ||
text/plain | 空格转换成+ ,但不对特殊字符编码 |
- 表单的同步提交
通过点击submit按钮,触发表单提交操作,使得页面跳转到action URL 的行为,称为表单的同步提交
缺点:
提交表单后,页面整个跳转,跳转到action URL 所指向的页面,用户体验差
提交之后,当前页面的状态和数据会丢失
解决:
表单只负责采集数据,Ajax负责将数据提交到服务器
$().on('submit',function(){})
阻止表单的默认提交实践
$().on('submit',function(e){
e.preventDefalut();
})
2.2.2模板引擎 art-template
标准语法:{{}}
原文输出:{{@ value}} 用于value中含有HTML标签
条件输出: {{ if else}} 按需输出
循环输出: {{each arr }}{{ $index }} {{$value}} {{}/each}
过滤器: {{value|filterName }}
template.defalut.imports.filterName=function(value){}
2.2.3正则
exce()函数用于检索字符串中的正则表达式的匹配
如果满足条件返回匹配值,反之返回null
RegExpObject.exce(string)
replace()函数用于字符串中的一些字符替换另一些字符
2.3XMLHttpRequest的基本使用
2.3.1使用xhr发起GET请求
步骤:
创建xhr对象
调用xhr.open()函数
调用xhr.send()函数
监听xhr.onreadystatechange事件
![](https://i-blog.csdnimg.cn/blog_migrate/a0a509f6915e89120936de9bbc699677.png)
2.3.2url编码和解码
url只允许出现英文字符,数字
若有中文则需要编码encodeURI()
解码;decodeURI()
2.3.3使用xhr发起POST请求
步骤:
创建xhr对象
调用xhr.open()函数
设置Content-Type属性
调用xhr.send()函数
监听xhr.onreadystatechange事件
2.3.4数据交换格式
客户端和服务器之间的数据交换格式,XML和json
xml:可拓展标记语言
XML和HTML的区别
XML和HTML虽然都是标记语言,但是,它们两者之间没有任何的关系。
●HTML被设计用来描述网页上的内容,是网页内容的载体
●XML被设计用来传输和存储数据,是数据的载体
缺点:格式臃肿,与数据无关代码多,体积大,传输效率低
在js解析xml比较麻烦
Json (JavaScript Object Notation JavaScript对象表示法) 本质字符串
更小更快更容易解析
json的对象结构:
对象{ key:value,key:value}
数组
JSON语法注意事项
①属性名必须使用双引号包裹
②字符串类型的值必须使用双引号包裹
③JSON中不允许使用单引号表示字符串
④JSON中不能写注释
⑤JSON的最外层必须是对象或数组格式
⑥不能使用undefined或函数作为JSON的值
JSON的作用:在计算机与网络之间存储和传输数据。
js对象和json转换
JSON.parase(json格式)
JSON.stringify(js对象)