javascript知识点（四）之 ajax

1，ajax概念：全称：Asynchronous（异步）And Xml

AJAX不是一种新的编程语言，而是一种用于创建更快更好以及交互性更强的WEB应用程序技术，该技术在98年前后得到了应用。通过AJAX，你的JS可以通过JS的XMLHttpRequest对象在页面不重载的情况下与服务器直接进行通信。这样可以在服务器请求到想要的数据，而不是整个页面。AJAX的核心就是JS的XMLHttpRequest对象。xhr对象是在IE5中首次引入，它是一种支持异步请求的对象。

2，ajax的优势：

1），无刷新更新数据。（局部刷新）

2），异步与服务器通信。（不让界面卡顿）

3），基于标准被广泛支持。

4），界面与应用分离。（前后端分离）

5），节省带宽。

3，ajax的编写步骤：

1），创建XMLHttpRequest对象：

扫描二维码关注公众号，回复： 1853940 查看本文章

所有现代浏览器(IE7+，chrome，firefox，opera，safari)均内建XMLHttpRequest对象。

但是IE5、6使用ActiveXObject对象。

//兼容写法
function getAjax() {
var  xmlhttp = null;
if(window.ActiveXObject){
 		xmlhttp = new ActiveXObject(’Microsoft.XMLHTTP’);
} else if(window.XMLHttpRequest){
 		xmlhttp = new XMLHttpRequest();
}
return  xmlhttp;
}

//如果不考虑兼容的话

var xhr = new XMLHttpRequest();

2），打开与Server的连接，指定发送方式、URL以及权限等

//open方法：创建新的HTTP请求，并指定此请求的方法，URL以及验证信息。
//xhr.open(type, url, async);
//type：HTTP请求方式，GET（参数是在url）、POST（参数不在url中）等。大小写不敏感。
//url：请求地址。
//async：布尔型，请求是否为异步方式。默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。（可选）


var url = 'http://cangdu.org:8001/v1/pois?city_id=1&keyword=上海&type=search';

xhr.open('GET', url, true);

3），回调函数：

//通过onreadystatechange属性指定  xhr.readystate属性改变时的事件处理回调函数。
//xhr.onreadystatechange = function(){}
//readyState属性：返回请求的当前状态。
//状态：
//0：对象已建立，尚未初始化（未调用open方法）。
//1：对象已建立，尚未调用send方法。
//2：send方法已调用。但是当前的状态以及HTTP状态未知。
//3：开始接收数据，因为响应以及HTTP头不全，这时通过responseBody和responseText获取部分数据会出现错误。
//4：数据接收完毕，此时可以通过responseBody和responseText获取完整的响应数据。
//status属性：返回当前请求的状态码。
//200 OK：请求文档已经找到，并正确返回。
//304 Not Modified：拥有一个本地的缓存副本，服务器端内容与此相同。
//403 Forbidden：请求者对所请求的文档不具有相应的权限。
//404 Not Found：请求的文档没找到。
//statusText属性：返回当前请求的响应行信息。
//responseText属性：将响应信息作为字符串返回。
xhr.onreadystatechange = function() {
	if(xhr.readyState == 4 && xhr.status == 200) {					
		var obj = JSON.parse(xhr.responseText)
			console.log(obj)	
		}
	}
//发送指令
xhr.send(null)

3，JS解析JSON

JSON简介：定义：Javascript Object Notation，一种轻量级的基于文本的数据交换格式，易于人阅读和编写，也能提高网络传输速率。

ES5新增的两个方法：

JSON.parse：将JSON字符串数据转换为JSON对象。

JSON.stringify：将JSON对象转换为JSON字符串。

注： 1：浏览器支持：IE8+。

2：JSON格式的字符串里面的key或者字符串型的value都必须用双引号包裹。

局部刷新机制： 操作相应的DOM节点

事件委托应用：利用冒泡机制，将子元素事件委托给父元素执行。

前后端分离：后台只管数据输出和业务逻辑处理，前端负责交互逻辑和界面展示。

简单的说：前端静态页面中没有有后台程序代码，后台输出不带有HTML标签的数据。

前后端分离靠ajax来实现数据的交互。

4，json跨域：

JSONP = JSON WITH PADDING。一种数据调用的方式。（协议）

为什么要跨域：

1），ajax的同源策略：由Netscape公司引入浏览器，他是浏览器最核心，最基本的的功能。

所谓同源：指协议，域名，端口都相同

目的：保证用户信息安全，防止恶意的网站窃取数据。

ajax无论请求什么页面，因为同源策略的限制，只要跨域就一律不准，不过我们发现凡是拥有src这个属性的标签都拥有跨域的功能，如img，iframe，script。

//通过script的src属性进行跨域请求			
var api = //'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=
		  //&json=1&p=3&sid=1439_21108_20928&req=2&csor=3&cb=fn&_=1520475027747'

				
var sc = document.createElement('script')
sc.src = api;
document.body.appendChild(sc)
document.body.removeChild(sc)
				
function fn(res){
console.log(res)

5，Promise

1)，ajax的依赖调用：在使用ajax异步调用的时候，可能碰到同时调用多个ajax的情况，而且多个ajax之间还存在依赖关系。

举个例子：验证用户名和密码之后才能获取用户的信息。

2），Promise介绍：

Es6新推出的Promise函数,是一个构造函数,它实际上是对回调函数的一种封装对异步编程的一种改进
3），Promise的特点：

1：Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

2：一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

var paromise = new Promise(function(resolve,reject){
	
	if(/*异步操作成功*/){
		resolve(value);
	}else{
		reject(error);
	}
})
//Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。
//它们是两个函数，由JavaScript引擎提供，不用自己部署。

Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。

promise.then(function(value){
	//success
},function(error){
	//failure
})

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为Resolved时调用，第二个回调函数是Promise对象的状态变为Reject时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

Promise新建后就会立即执行。

let promise = Promise(function(resolve,reject){
	console.log('promise')
	resolve();
});

promise.then(function(){
	console.log('Resolved.');
});

console.log('hi')

//promise
//hi
//Resolved

上面代码中，Promise新建后立即执行，所以首先输出的是“Promise”。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以“Resolved”最后输出。

catch方法：

catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。一般来说，不要在then方法里面定义Reject状态的回调函数（即then的第二个参数），总是使用catch方法。如果没有使用catch方法指定错误处理的回调函数，Promise对象抛出的错误不会传递到外层代码，即不会有任何反应。

问题: 当有两个或以上的ajax请求需要按顺序执行,该如何编写?

而使用promise的写法如下:

也就是代码被改进成了new Promise(ajax1).then(ajax2).catch() 使用了链式调用代替了嵌套结构。resolve() 和 reject() 则意味着成功回调和失败回调的执行。

6：get和post提交

1：功能

get多用于从服务器上获取数据，post多用于向服务器发送数据。

2：数据提交

GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，参数之间以&相连。POST把提交的数据则放置在是HTTP包的包体中。

3：数据大小

GET请求传送的数据量比较小，最大2KB，这个受浏览器的限制。而POST请求传送的数据量比较大，一般默认为不受限制。其实大小受服务器的限制。

4：安全性

GET安全性非常低，POST的安全性较高。

7：服务器端跨域

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

浏览器发起CORS请求，都会在请求头信息中增加一个Origin字段。该字段用来说明本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，来决定是否同意这次请求。

8：兼容问题

与JSONP比较：

CORS与JSONP使用目的相同，但是比JSONP更强大。JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。