Ajax与跨域请求详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36484899/article/details/103460309

关于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请求分成两类：

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

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

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 服务器目前无法使用（超载或停机维护）