目录
XMLHttpRequest的使用
XMLHttpRequest简称xhr,是浏览器提供的JavaScript对象,可以通过它可以请求服务器上的数据资源。
Jquery里的Ajax函数就是通过xhr封装出来的。
查询字符串
URL末尾加上的用于向服务器发送信息的字符串。
格式:英文的?放在URL末尾,再加上 参数=值,多个参数用&连接。
http://www.xxx.com:3000/getproducts
http://www.xxx.com:3000/getproducts?id=1
http://www.xxx.com:3000/getproducts?id=1&proname=西瓜
URL编码和解码
URL编码的原则:使用安全的字符去表示不安全的字符,用英文字符表示非英文字符。
encodeURI() //编码
decodeURI() //解码
<script>
console.log(encodeURI('张三'));
console.log(decodeURI('%E5%BC%A0%E4%B8%89')); //三个%表示一个汉字
</script>
使用xhr发起get请求
1、创建xhr对象
2、调用xhr.open()
3、调用xhr.send()
4、监听xhr.onreadystatechange事件
<script>
var xhr=new XMLHttpRequest();
xhr.open('get','url');
xhr.send();
xhr.onreadystatechange=function(){
//xhr请求状态和服务器响应状态
if(xhr.readState===4 && xhr.status===200){
//服务器响应的数据
console.log(xhr.responseText);
}
}
</script>
xhr对象的readyState属性,用来表示当前Ajax请求的状态。
值 | 状态 | 描述 |
---|---|---|
0 | UNSENT | xhr对象已经被创建,但还没调用open方法 |
1 | OPENED | open方法已被调用 |
2 | HEADERS_RECEIVED | send方法已被调用,响应头也被修改 |
3 | LOADING | 数据接收中,response属性已经包含部分数据 |
4 | DONE | Ajax请求完成,意味着数据传输成功或失败 |
GET请求携带参数的本质:将参数以查询字符串的形式,追加到URL地址后面,发送到服务器。
$.get('url',{name:'xiaoming',age:10},function(){} )
等价于
$.get('url?name=xiaoming&age=10',function(){} )
使用xhr发起post请求
1、创建xhr对象
2、调用xhr.open()
3、设置Content-Type属性(固定写法)
3、调用xhr.send(),同时指定要发送的数据
4、监听xhr.onreadystatechange事件
<script>
var xhr=new XMLHttpRequest();
xhr.open('post','url');
xhr.setRequestHeader('Conten-Type','application/x-www-form-urlencoded');
xhr.send('bookname=书名&author=佚名');
xhr.onreadystatechange=function(){
//xhr请求状态和服务器响应状态
if(xhr.readState===4 && xhr.status===200){
//服务器响应的数据
console.log(xhr.responseText);
}
}
</script>
JavaScript封装Ajax
<script>
function ajax(options) {
// 存储默认值的对象
var defaults = {
type: 'get',
url: '',
data: {},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function() {},
error: function() {}
}
// options对象覆盖defaults对象中的属性
Object.assign(defaults, options);
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 拼接请求参数的变量
var params = '';
// 循环用户传递进来的对象格式参数
for (var attr in defaults.data) {
// 将对象参数转化为字符串格式
params += attr + '=' + defaults.data[attr] + '&';
}
// 将参数最后的&去掉
params = params.substr(0, params.length - 1);
// console.log(params);
// 判断请求方式
if (defaults.type == 'get') {
defaults.url = defaults.url + '?' + params;
}
// 配置ajax对象
xhr.open(defaults.type, defaults.url);
// 发送请求
if (defaults.type == 'post') {
// 用户设置的向服务器端传递的请求参数类型
var contentType = defaults.header['Content-Type'];
// 设置请求参数格式的类型
xhr.setRequestHeader('Content-Type', contentType);
// 判断用户希望的请求参数格式类型
if (contentType === 'application/json') {
// 如果类型为json,向服务器端传递json数据格式的参数
xhr.send(JSON.stringify(defaults.data));
} else {
// 向服务器端传递普通类型的参数
xhr.send(params);
}
} else {
xhr.send();
}
// 监听xhr对象下面的onload事件
// xhr对象接收完响应数据后触发
xhr.onload = function() {
// 获取响应头中的数据
var contentType = xhr.getResponseHeader('Content-Type');
// 服务器返回的数据
var responseText = xhr.responseText;
if (contentType.includes('application/json')) {
// 将json字符串转换为json对象
responseText = JSON.parse(responseText);
}
// http状态码为200
if (xhr.status === 200) {
// 请求成功,调用成功的函数
defaults.success(responseText, xhr);
} else {
// 请求失败,调用失败的函数
defaults.error(responseText, xhr);
}
}
}
</script>
数据交换格式
服务器与客户端之间进行数据传输与交换的格式。
常用的两种数据交换的格式:XML,JSON。
XML
可扩展标记语言,与html类似,但和html没有关系。
XML被设计用来传输和存储数据,是数据的载体。
<note>
<to>zs</to>
<from>ls</from>
</note>
缺点:格式臃肿,和数据无关的代码多,体积大传输速率低,在JS中解析比较麻烦。
JSON
JavaScript对象表示法,是JavaScript对象和数据的字符串表示法,使用文本表示一个JS对象或数据的信息,本质是一个字符串,同样的用来传输和存储数据。
JSON中包含对象和数组两种结构,通过嵌套表示更复杂的数据结构。
JSON中属性必须使用双引号包裹,不允许使用单引号表示字符串,不能写注释,最外层必须是对象或数组格式,不能使用undefined或函数作为JSON的值。
对象结构
使用{}表示,key必须使用英文双引号,value可以是数字,字符串,布尔值,null,数组,对象。
{
"key":value,
"key2":value2
}
JSON和JS对象的互转:序列化和反序列化
// 将JSON字符串转为JS对象,反序列化
var obj=JSON.parse( '{ "a":10,"b":"aaa" }' );
// 将JS对象转为JSON字符串,序列化
var json=JSON.stringfy( {a:10,b:'aaa'} )
XMLHttpRequest Level2新特性
旧版XMLHttpRequest的缺点:
只支持文本数据的传输,无法读取和上传文件,传送和接收数据时,没有进度信息,只能提示有没有完成。
XMLHttpRequest Level2的新功能:
1、可以设置HTTP请求时限
2、可以使用FormData对象管理表单数据
3、可以上传文件
4、可以获得数据传输进度
FormData对象管理表单数据
FormData对象可以模拟表单操作
<script>
var fd=new FormData();
fd.append('username','zs');
fd.append('password','1235');
var xhr=new XMLHttpRequest();
xhr.open('post','url');
xhr.send(fd);
</script>
FormData对象可以获取表单的值
<script>
var form=document.getElementById('form1');
form.addEventListener('submit',function(e){
e.preventDefault();
var fd=new FormData(form);
var xhr=new XMLHttpRequest();
xhr.open('post','url');
xhr.send(fd);
xhr.onreadystatechange=function(){}
})
</script>
上传文件
实现步骤:
1、定义UI结构
2、验证是否选择了文件
3、向FormData中追加文件
4、使用xhr发起上传文件的请求
5、监听onreadystatechange事件
<input type="file" id="file1" />
<button id="btnUpload">上传文件</button>
<script>
var btnUpload=document.querySelector('#btnUpload');
btnUpload.addEventListener('',function(){
var files=document.querySelector('#file1').files;
if(files.length<=0){
return alert('请选择要上传的文件');
}
//向表单追加文件
var fd=new FormData();
fd.append('avatar',files[0]);
//发起上传文件请求
var xhr=new XMLHttpRequest();
xhr.open('post','url');
xhr.send(fd);
//监听
xhr.onreadystatechange=function(){
if(xhr.readyState === 4 && xhr.status === 200){
var data=JSON.parse(xhr.responseText);
if(data.status === 200){
docuent.querySelector('#img').src='url';
}else{
console.log(data.message);
}
}
}
});
</script>
显示文件上传进度,通过监听xhr.upload.onprogress事件
<script>
var xhr=new XMLHttpRequest();
xhr.upload.onprogress=function(e){
if(e.lengthComputable){
//e.loaded已传输字节,e.total需要传输的字节
var percentComplete=Math.ceil( (e.loaded / e.total) * 100 );
}
}
</script>
axios
axios发起get请求
axios.get('url', {params: {参数} } ).then(callback);
<script>
var url='xxxxx';
var paramsObj={ name:'zss',age:10}
axios.get(url,{params:paramsObj}).then(function(res){
var result=res.data;
console.log(res);
});
</script>
axios发起post请求
axios.post('url', {参数} ).then(callback);
<script>
var url='xxxxx';
var dataObj={ name:'zss',age:10}
axios.post(url,{dataObj}).then(function(res){
var result=res.data;
console.log(result);
});
</script>
axios直接发起请求
<script>
axios({
method:'请求类型',
url:'请求URL地址',
data:{POST数据},
params:{GET参数}
}).then(callback)
</script>
跨域和JSONP
同源:两个页面按的协议、域名、端口相同,则这两个页面有相同的源。
同源策略:浏览器提供的一个安全功能,限制了从同一个源加载的文档或脚本,与来自另一个源的资源进行交互。
例:
A网站的JavaScript不允许和非同源的网站C之间进行资源交互,比如:
1、无法读取非同源网页的Cookie,LocalStorage和IndexedDB
2、无法接触非同源网页的DOM
3、无法向非同源地址发送Ajax请求
跨域
与同源相反,就是跨域。
出现跨域的根本原因:不允许非同源的网页进行资源交互。
浏览器允许发起跨域请求,但是返回的数据会被浏览器拦截,无法被页面获取。
解决:JSONP和CORS
JSONP:兼容低版本IE,临时解决方案,只支持GET请求。
CORS:W3C标准,跨域Ajax请求的根本解决方案,支持GET和POST请求,不兼容某些低版本浏览器。
JSONP
script标签不受同源策略的影响,可以通过src属性请求非同源的js脚本。
JSONP实现原理:通过script标签的src属性请求跨域的接口,并通过函数调用的方式接收跨域接口响应回来的数据。
实现一个简单的JSONP
<body>
<script>
function abcFunc(data){
console.log(data);
}
</script>
<script src="./js/getdata.js?callback=abcFunc"></script>
</body>
//getdata.js
abcFunc({ name:'ls',age:20 })
JSONP缺点:只支持GET请求。
注意:JSONP和Ajax没有关系,因为没用到XMLHttpRequest对象。
防抖和节流
节流策略:减少一段时间内事件的触发频率。
节流应用场景:鼠标不断点击,滚动条重复滚动到同一位置…