前端学习笔记-8.4数据交互

AJAX是动态的从其他网页获取，
JSONP是通过script引入，
CORS：跨域资源共享
和JSONP的编码没有区别，jsonp支持GET,cors都支持。

1.AJAX:Asyncchronous JavaScript and XML，用JavaScript执行异步网络请求

如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。

AJAX请求是异步执行的，也就是说，要通过回调函数获得响应

目前AJAX主要依靠XMLHttpRequest对象：

		function success(text){
			var textarea = document.getElementById('test-response-text');
			textarea.value = text;
		}
		
		function fail(code){
			var textarea = document.getElementById('test-response-text');
			textarea.value = 'Error code:'+code;
		}
		var request = new XMLHttpRequest();//新建XMLHttpRequest
		
		response.onreadystatechange = function(){//状态发生变化时，函数被回调
			if(request.readyState === 4){//成功完成
			//判断响应结果:
			if(request.status === 20){
				//成功，通过responseText拿到响应的文本：
				return success(request.responseText);
			}else{
				//失败，根据响应码判断失败原因：
				return fail(request.status);
			}
			}else{
				//HTTP请求还在继续...
			}
		};
		
		//发送请求：
		request.open('GET','/api/categories');
		request.send();
		
		alert('请求已发送，请等待响应...');*/

对于低版本的IE，需要用ActiveXObject对象：

		function success(text) {
		    var textarea = document.getElementById('test-ie-response-text');
		    textarea.value = text;
		}
		
		function fail(code) {
		    var textarea = document.getElementById('test-ie-response-text');
		    textarea.value = 'Error code: ' + code;
		}
		
		var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP对象
		
		request.onreadystatechange = function () { // 状态发生变化时，函数被回调
		    if (request.readyState === 4) { // 成功完成
		        // 判断响应结果:
		        if (request.status === 200) {
		            // 成功，通过responseText拿到响应的文本:
		            return success(request.responseText);
		        } else {
		            // 失败，根据响应码判断失败原因:
		            return fail(request.status);
		        }
		    } else {
		        // HTTP请求还在继续...
		    }
		}
		
		// 发送请求:
		request.open('GET', '/api/categories');
		request.send();
		
		alert('请求已发送，请等待响应...');*/

标准写法和IE写法混在一起，可以这么写：

var request;
			if(window.XMLhttpRequest){
				request = new XMLHttpRequest();
			}else{
				request = new ActiveXObject('Microsoft.XMLHTTP');
			}

AJAX的封装一：

function ajax(options){
	var xhr = null;
	var params = formsParams(options.data);
	//创建对象
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");//兼容IE
	}
	//链接
	if(options.type =="GET"){
		xhr.open(options.type,options.url+ "?" + params,options.async);
		xhr.send(null);
	}else if(options.type=="POST"){
		xhr.open(options.type,options.url,options.async);
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xhr.send(params);
	}
	xhr.onreadystatechange = function(){
		if(xhr.readyState ==4&& xhr.status ==200){
			options.success(xhr.responseText);
		}
	}
	function formsParams(data){
		var arr = [];
		for(var prop in data){
			arr.push(prop + "=" data[prop]);
		}
		return arr.join("&");
	}
}

2.JSONP跨域
JSONP,它有个限制，只能用GET请求，并且要求返回javascript。这种方式跨域实际上是利用了浏览器允许跨域引用javascript资源。
JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。

它的基本思想是，网页通过添加一个script元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

首先，网页动态插入script元素，由它向跨源网址发出请求。

function addScriptTag(src) {
var script = document.createElement(‘script’);
script.setAttribute(“type”,“text/javascript”);
script.src = src;
document.body.appendChild(script);
}

window.onload = function () {
addScriptTag(‘http://example.com/ip?callback=foo’);
}

function foo(data) {
console.log('Your public IP address is: ’ + data.ip);
};
上面代码通过动态添加script元素，向服务器example.com发出请求。注意，该请求的查询字符串有一个callback参数，用来指定回调函数的名字，这对于JSONP是必需的。

服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。

foo({
“ip”: “192.168.45.145”
});
由于script元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了foo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤

3.跨域资源共享CORS
4.Promise
5.Axios