一些Ajax的相关内容

ajax三部曲

var http = new XMLHttpRequest()
http.open("GET","xxx.com/xx",true)
http.send()
http.onreadystatechange(()=>{
	//做出不同的处理
	if(http.readyState === 4){
		if(http.status === 200){
			console.log(http.responseText)
		}
	}
})

封装

function ajax(url,method,async,callback,data){
	var http = new XMLHttpRequest()
	http.open(method,url,async)
	if(data){
		data = JSON.stringify(data)
		http.send(data)
	}else{
		http.send()
	}
	http.onreadystatechange(()=>{
		//做出不同的处理
		if(http.readyState === 4){
			if(http.status === 200){
				console.log(http.responseText)
				// callback(http.responseText)
			}
		}
	})
}
ajax("xxx.com/xx","GET",true)

传参JSON化

function ajax(e){
	var http = new XMLHttpRequest()
	http.open(e.method,e.url,e.async)
	if(e.data){
		data = JSON.stringify(e.data)
		http.send(data)
	}else{
		http.send()
	}
	http.onreadystatechange((response)=>{
		//做出不同的处理
		if(http.readyState === 4){
			if(http.status === 200){
				console.log(http.responseText)
				// e.callback(http.responseText)
			}
		}
	})
}
ajax({
	url:"xxx.com/xx",
	method:"GET",
	data:null,
	async:true,
	callback:(r)=>{console.log(r)},
	})

JSON.stringify()字符串化，JSON.parse()解析为对象

jQeury的封装

$.extend({
	ajax(e){
		//...
	}
})
// $.extend({ajax}) => $.ajax
// $.fn.extend({ajax}) => $("#div").ajax

jQuery中的ajax请求

$.ajax({
	type:"GET",
	data:"",
	url:"xxx.com/xxx",
	timeout: 10000, 
    beforeSend: function(r) {
    	r.setRequestHeader("name":"value");
    },
    headers: {
    	'Access-Token':$.cookie('access_token')
    },
	dataType:"jsonp",
	success(){},
	error(){},
	complete(){},
})

jquery Ajax参数表 – cuishifeng.cn

设置请求头

• JS
  调用 open( ) 之后 且 调用 send( ) 之前，需要后端配置，响应请求头http.setRequestHeader("name","value")；
• jQuery：

$.ajax({
	headers:{
		"Origin":"http://www.baidu.com/"
	}
})
//或
$.ajax({
	beforeSend:(request){
		request.setRequestHeader("Origin","http://www.baidu.com/")
	}
})

浏览器默认不让修改Origin等等一些敏感字段；
content-type：application/x-www-form-urlencoded表单键值对，浏览器默认，multipart/form-data二进制文件，application/jsonJSON，text/*远程调用*文件，HTML,XML等等，text/plain纯文本

跨域

同源策略（http协议+域名+端口号要相同）

- Jsonp（ajax跨域请求一般是get请求）
- document.domain + iframe
- location.hash + iframe
- window.name + iframe
- postMessage
- 跨域资源共享（CORS）
- nginx代理
- nodejs中间件代理
- WebSocket协议

单向的数据请求，我们应该优先选择JSONP或者window.name，
双向通信优先采取location.hash，
在未与数据提供方达成通信协议的情况下我们也可以用server proxy的方式来抓取数据。

解决：
1. jsonp（只解决get）：
动态创建一个script标签，利用script标签的src属性不受同源策略限制(因为所有的src属性和href属性都不受同源策略的限制)，可以请求第三方服务器资源内容
script的src属性设置接口地址，URL接口参数必须要带一个自定义函数名，服务器端通过参数去接受返回的数据。
2. document.domain：
基础域名相同，子域名不同。
3. window.name：
利用在一个浏览器窗口内，载入所有的域名都是共享一个window.name。
4. 服务器设置对CORS的支持 
原理：服务器设置Access-Control-Allow-Origin HTTP响应头之后，浏览器将会允许跨域请求。
6. 利用h5新特性window.postMessage()

CORS把HTTP请求分成两类：

1. 简单跨域请求GET\POST\HEAD：
   请求头会携带Origin头，响应头会有Access-Control-Allow-Origin头服务器授权信息，不通过就忽略该次响应

当请求方法是POST时，Content-Type必须是application/x-www-form-urlencoded, multipart/form-data或着text/plain中的一个值，且请求中没有自定义HTTP头部；
JSONP技术只用于GET请求；

2. Preflighted跨域请求：
   其他类型请求或有自定义头部时，先发送OPTIONS请求确认权限

server-end：彻底解决跨域问题(五种解决跨域的方式)

拦截器

$.ajaxSetup({statusCode: {400:{...}})，配置默认设置

Angular2：我教Rx写文档
Vue：axios.js中文网

MVC model（数据相关的） view（页面视图相关的） controller（控制器） -----Angular.js、React.js
MVVM model view viewmodel（数据和页面视图相关的隐形的控制变化） -----vue（修改数据或者页面视图的时候，不用担心出事，viewmodel帮我们处理。只需要控制好数据和页面视图，中间的所有处理是viewmodel相关的）

HTTP 1.0/1.1/2 HTTPS

• HTTP1： GET、POST、HEAD、
• HTTP1.1： OPTIONS、DELETE、PUT、TRACE、CONNECT
• HTTP2 ：二进制文本传输数据，压缩表头，服务器推送，减少请求次数
• HTTPS：SSL加密

状态码

2XX（成功处理了请求状态）
    200 服务器已经成功处理请求，并提供了请求的网页
    201 用户新建或修改数据成功
    202 一个请求已经进入后台
    204 用户删除成功
3XX（每次请求使用的重定向不要超过5次）
    304 网页上次请求没有更新，节省带宽和开销
4XX（表示请求可能出错，妨碍了服务器的处理）
    400 服务器不理解请求的语法
    401 用户没有权限（用户名，密码输入错误）
    403 用户得到授权（401相反），但是访问被禁止
    404 服务器找不到请求的网页，
5XX（表示服务器在处理请求的时候发生内部错误）
    500 服务器遇到错误，无法完成请求
    503 服务器目前无法使用（超载或停机维护）