Ajax学习03-Ajax加强

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对象。

防抖和节流

节流策略：减少一段时间内事件的触发频率。
节流应用场景：鼠标不断点击，滚动条重复滚动到同一位置…