url地址组成
-
客户端和服务器之间的通信协议
-
服务器名称
-
具体的存放位置
客户端与服务器的通信过程(三个步骤):
请求、处理、响应
使用开发者工具 -> network :查看
网页中请求服务器上的数据资源 -- XMLHttpRequest
资源的请求的方式:
get 、post
-
get
-
常用于获取服务器资源
-
-
post
-
想服务器提交数据
-
Ajax 能让我们轻松实现网页与服务器之间的数据交互
JQuery中的Ajax
-
$.get(url, [data], [callback])
-
$.post(url, [data], [callback])
-
$.ajax({type:'',url:'',dara:{},success:function(){}})
接口
Ajax 请求数据时,被请求的 url 地址,就叫做数据接口
XMLHttpRequest(xhr)
使用 xhr
发起 GET 请求
1.创建 XHR 对象
var xhr = new XMLHttpRequest()
2.调用 open 函数,指定 请求方式 与 URL地址
xhr.open('GET','https://...')
URL地址后面拼接的字符串,也就是?号后面的字符串 叫做 查询字符串 --> 参数 = 值
3.调用 send 函数, 发起 Ajax 请求
xhr.send()
4.监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
// 监听 xhr 对象的请求状态 readyState; 与服务器响应的状态 status
if(xhr.readyState === 4 && xhr.status === 200){ //固定写法,即响应成功
xhr.responseText // 服务器响应回来的数据
}
}
readyState
属性:用来表示当前 Ajax
请求所处的状态
URL
编码与解码
<script>
var str = 'HEOOL';
var str2 = encodeURI(str) //URL编码
var str3 = decodeURI(str2) //URL解码
</script>
大部分的浏览器会自动为URL进行编码
使用 xhr
发起 POST 请求
1.创建 XHR 对象
var xhr = new XMLHttpRequest()
2.调用 open 函数,指定 请求方式 与 URL地址
xhr.open('POST','https://...')
URL地址后面拼接的字符串,也就是?号后面的字符串 叫做 查询字符串 --> 参数 = 值
3.设置 Content-Type 属性(固定写法)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
4.调用 send 函数, 同时将数据以查询字符串的形式,提交给服务器
xhr.send('name=张三&&password=123')
5.监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
// 监听 xhr 对象的请求状态 readyState; 与服务器响应的状态 status
if(xhr.readyState === 4 && xhr.status === 200){ //固定写法,即响应成功
xhr.responseText // 服务器响应回来的数据
}
}
数据交换格式
前端:XML \ JSON
什么是 XML?
和 HTML 类似,可扩展标记语言。但是两者没有任何关系。
HTML 被设计用来描述网页上的内容,是网页内容的载体
XML 被设计用来传输和存储数据,是数据的媒体。
XML 的缺点
-
XML 格式臃肿,和数据无关的代码多,体积大,传输效率低
-
在 javascript 中解析 XML 比较麻烦
什么是JSON?
JSON 是 javascript 对象和数组的字符串表示法。使用文本表示一个 JS 对象或数组的信息。本质上是字符串。
是一种轻量级的文本数据交换格式,比XML更小、更快、更易解析。
JSON 两种结构
-
对象结构
使用
{}
包括起来的内容,数据结构为key: value
key
必须用英文的双引号包裹value
的数据类型:number\string\boolean\null\array\object(没有undefiened\function)
6种 -
数组结构
使用
[]
包括起来的内容,数据结构为:number\string\boolean\null\array\object
6种
JSON 语法注意事项
-
属性名必须使用双引号包裹
-
字符串类型的值必须使用双引号包裹
-
JSON 种不允许使用单引号表示字符串
-
JSON 种不能写注释
-
JSON 的最外层必须是对象或数组格式
-
不能使用
underfined
或函数作为 JSON 的值
json
的作用:在计算机与网络之间存储和传输数据。
JSON 和 JS 对象的关系
JSON 是 JS 对象的字符串表示
JSON 和 JS 对象的互转
JSON -> JS : JSON.parse(str)
叫做 JSON 反序列化:字符串转换为数据对象的过程
JS-> JSON: JSON.stringify(str)
叫做 JSON 序列化:数据对象转换为字符串的过程
封装自己的 Ajax 函数
处理 data 参数
<script>
var data = {
name: '张三',
password: 123
}
function resolveData(data) {
var arr = [];
for(let k in data){
arr.push(k + '=' + data[k]);
}
return arr.join('&');
}
// name=张三&password=123
</script>
封装方法
<script>
function itheima(options){
var xhr = new XMLHttpRequest();
// 把外界传递过来的参数对象,转换为 查询字符串
var qs = resolveData(options.data);
xhr.onreadystatechange = function () {
if(xhr.readyState === 4 && xhr.status === 200){
var result = JSON.parse(xhr.responseText)
options.success(result)
}
}
}
</script>
判断请求类型
<script>
function itheima(options){
var xhr = new XMLHttpRequest();
// 把外界传递过来的参数对象,转换为 查询字符串
var qs = resolveData(options.data);
if(options.type.toUpperCase() === 'GET'){
//发起 GET 请求
xhr.open(options.type,options.url + '?' + qs)
xhr.send()
}else if(options.type.toUpperCase() === 'POST'){
//发起 POST 请求
xhr.open(options.type,options.ur)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.sen(qs)
}
xhr.onreadystatechange = function () {
if(xhr.readyState === 4 && xhr.status === 200){
var result = JSON.parse(xhr.responseText)
options.success(result)
}
}
}
</script>
XMLHttpsRequest Level2 的新特性
旧版 XMLHttpsRequest
的缺点:
-
只支持文本数据的传输,无法用来读取和上传文件
-
传送和接收数据时,没有进度信息,只能提示有没有完成
XMLHttpsRequest Level2
的新功能:
-
可以设置HTTP请求的时限
-
可以使用
FormData
对象管理表单数据 -
可以上传文件
-
可以获取数据传输的进度信息
设置 HTTP 请求时限:timeout
xhr.timeout = 3000
xhr.ontimeout = function(){
// 超出时限的回调函数
}
FormData 对象管理表单数据
<script>
// 1.创建 FormData 实例
var fd = new FormData();
// 2.调用 append 函数,向 fd 中追加数据
fd.append('name','zs');
fd.append('upwd','123');
var xhr = new XMLHttpRequest()
xhr.open('POST','URL...')
xhr.send(fd)
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200){
}
}
</script>
// 可以直接获取网页表单数据
<script>
//获取表单元素
var form = document.querySelector("#form")
form.addEventListener('submit', function(e){
// 阻止表单的默认事件
e.preventDefault()
// 创建 FormData, 快速获取到 form 表单中的数据
var fd = new FormData(form)
var xhr = new XMLHttpRequest()
xhr.open(...)
xhr.send(fd)
...
})
</script>
上传文件
-
定义 UI 结构
-
验证是否选择了文件
-
向
FormData
中追加文件 -
使用
xhr
发起上传文件的请求 -
监听
onreadystatechange
事件
定义 UI 结构
<!-- 1.文件选择框 -->
<input type="file" id="file1" />
<!-- 2.上传按钮 -->
<button id="btnUpload">上传文件</button>
<!-- 显示上传到服务器上的图片 -->
<img src="" alt="" id="img">
验证是否选择了文件
<script>
// 1. 获取上传文件的按钮
var btnUpload = document.querySelector("#btnUpload")
// 2. 为按钮添加 click 事件
btnUpload.addEventListener('click', function(){
// 3.获取到选择的文件列表
var files = document.querySelector('#file1').files
if(files.length <= 0){
aler('请选择要上传的文件!')
}
})
</script>
向 FormData
中追加文件
<script>
var btnUpload = document.querySelector("#btnUpload")
btnUpload.addEventListener('click', function(){
var files = document.querySelector('#file1').files
if(files.length <= 0){
aler('请选择要上传的文件!')
}
// 1. 创建 FormData 对象
var fd = new FormData()
// 2. 向 FormData 中追加文件
fd.append('avatar',files[0])
})
</script>
使用 xhr
发起上传文件的请求
var xhr = new XMLHttpRequest()
xhr.open(...)
xhr.send(fd)
监听 onreadystatechange
事件
<script>
var btnUpload = document.querySelector("#btnUpload")
btnUpload.addEventListener('click', function(){
var files = document.querySelector('#file1').files
if(files.length <= 0){
aler('请选择要上传的文件!')
}
var fd = new FormData()
fd.append('avatar',files[0])
var xhr = new XMLHttpRequest()
xhr.open(...)
xhr.send(fd)
xhr.onreadystatechange = fucntion () {
if(xhr.readyState === 4 && xhr.status === 200){
var data = JSON.parse(xhr.responseText)
if(data.status === 200){
// 上传成功
document.querySelector('#img').src = 'url' + data.url
}else{
// 上传失败
console.log('失败');
}
}
}
})
</script>
显示文件上传进度
<script>
var xhr = new XMLHttpRequest();
// 监听文件上传的进度
xhr.upload.onprogress = function(e) {
if(e.lengthComputable){
// 计算出上传的进度
var procentComoolete = Math.ceil((e.load / e.total) * 100)
}
}
xhr.upload,onload = function(e){
console.log('上传完成')
}
</script>
使用 jQuery 上传文件
<script>
$(function(){
$('#btnUpload').on('click',function(){
var files = $('#files')[0].files
if(files.length <= 0){
console.log('未上传文件');
}
var fd = new FormData()
fd.append('anatao',files[0])
$.ajax({
type: 'POST',
url: 'URL',
data: fd,
processData: false, //上传文件必须指定这两个属性的值
contentType: false,
success: function(param){
}
})
})
})
</script>
使用 jQuery 实现 loading 效果
<script>
$(function(){
$(document).ajaxStart(function(){
// 监听 Ajax 请求,会被监听到当前文档内所有的 Ajax 请求
})
$(document).ajaxStop(function(){
// 监听到 Ajax 请求完成
})
})
</script>
axios
是什么?
-
专注于网络数据请求的库
-
相比于原生的
XMLHttpsRequest
对象,axios
简单易用 -
相比于
jQuery
,axios
更加轻量化,只专注于网络数据请求
axios
发起 get
请求:
axios.get('url',{param:{参数}}).then(callback)
axios
发起 post
请求:
axios.get('url',{参数}).then(callback)
axios({
type: 'POST\GET',
url: '请求的地址'
data: {POST数据},
param: {GET参数}
}).then(callback)
什么是同源?
如果两个页面的协议、域名和端口都相同,则两个页面具有相同的源。
没有给端口号,默认为 80
什么是同源策略?(Same origin policy)
是浏览器提供的一个安全功能。
-
无法读取非同源网页的 cookie \ LocalStorage \ IndexedDB
-
无法接触非同源网页的 DOM
-
无法向非同源地址发送 Ajax 请求
什么是跨域?
与同源相反的,就是跨域。
浏览器对跨域请求的拦截
-
跨域请求可以正常发起
-
浏览器能正常接收到跨域响应的数据
注意:浏览器允许跨域请求,但是,跨域请求回来的数据,会被浏览器拦截,无法被页面获取到。
如何实现跨域跨域数据请求?
实现跨域数据请求,最主要的两种解决方案:JSONP 和 CORS。
JSONP:出现的早,兼容性好(兼容低版本IE)。是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案。
缺点是 只支持 GET 请求,不支持 POST 请求。
CORS:出现的较晚,它是 W3C 标准,属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。
缺点是不兼容某些低版本的浏览器。
JSNOP的实现原理
通过 <script>
标签的 src
属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域接口响应回来的数据。
// 1.定义函数
<script>
function success(data) {
console.log('拿到了 Data 数据');
}
</script>
// 2.调用函数
<script src="调用函数的文件路径"></script>
// 调用函数的文件
<script>
success({name:'zs', age:'20'})
</script>
设置具体请求被调用函数的名称
// 1.定义函数
<script>
function success(data) {
console.log('拿到了 Data 数据');
}
</script>
// 2.调用函数
<script src="调用函数的文件路径?callback=success"></script>
注意: JSONP 和 Ajax 之间没有任何关系。
jQuery中的 JSONP
<script>
$(function(){
//发起JSONP的请求
$.ajax({
url: 'URL?name=zs&age=20',
// 我们要发起 JSONP 的数据请求
dataType: 'jsonp',
jsonp: 'callback', //callback参数名称--等号前
jsonpCallback: 'success', //callback函数名称--等号后
success: function(res){
}
})
})
</script>
// 未指定时,jQuery 自动生成一个 callback 名称,一般不改变 jsonp 的参数
jQuery 中的 JSONP 是通过动态创建和移除 <script>
标签的方式,来发起 JSONP 数据请求。
-
发起 JSONP 请求时,动态向
<header>
中append
一个<script>
标签 -
JSONP 请求成功后,动态从
header
中移除刚才append
进去的script
标签
标签:function,知识点,请求,汇集,JSON,xhr,Ajax,var,跨域 From: https://www.cnblogs.com/c0lmd0wn/p/16743482.html