Ajax与Cors

admin · 发表于 2022-2-1 12:09:16

什么是Ajax
Ajax(Asynchronous JavaScript and XML)异步JavaScript 和 XML，它并不是一门编程语言，而是利用JavaScript在保证页面不被刷新，页面链接不改变的情况下与服务器交换数据并更新部分网页的技术。

对于传统网页，如果要更新其内容，那么必须要刷新整个页面，但是Ajax，便可以在页面不被全部刷新的情况下更新其内容。这个过程其实就是页面在后台和服务器进行了交互，在得到请求数据后，再利用JavaScript改变页面。

弊端

Ajax只能在同源情况下请求，Cors可以不同源。

如图所示当我们触发某个事件时浏览器后台会创建一个XMLHttpRequest对象并向服务器发送Httprequest请求，服务器收到后会响应并将请求数据返回浏览器，浏览器接收到后使用JS修改更新部分网页内容。
Ajax实例
创建实例之前我们先了解几个对象方法

Ajax状态码
xhr.readyState

readyState === 0 表示未初始化完成，也就是 open 方法还没有执行
readyState === 1 表示配置信息已经完成，也就是执行完 open 之后
readyState === 2 表示 send 方法已经执行完成
readyState === 3 表示正在解析响应内容
readyState === 4 表示响应内容已经解析完毕，可以在客户端使用了

xhr.status
//一般常见的有这两种
200, OK，访问正常
404, Not Found，未发现指定网址

readyStateChange事件
用来监听readyState的变化，当readyState发生变化时此事件才会启用。

XMLHttpRequest.response
此属性表示服务器返回的数据体（即 HTTP 回应的 body 部分）。它可能是任何数据类型，比如字符串、对象、二进制对象等等，具体的类型由XMLHttpRequest.responseType属性决定。该属性只读。

XMLHttpRequest.responseType
xhr.responseType属性是一个字符串，表示服务器返回数据的类型。这个属性是可写的，可以在调用open()方法之后、调用send()方法之前，设置这个属性的值，告诉浏览器如何解读返回的数据。如果responseType设为空字符串，就等同于默认值text。

XMLHttpRequest.responseText
XMLHttpRequest.responseText属性返回从服务器接收到的字符串，该属性为只读。只有 HTTP 请求完成接收以后，该属性才会包含完整的数据。

XMLHttpRequest.open()
用于指定 HTTP 请求的参数

XMLHttpRequest.send()
用于实际发出 HTTP 请求。它的参数是可选的，如果不带参数，就表示 HTTP 请求只有一个 URL，没有数据体，典型例子就是 GET 请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是 POST 请求。

创建Ajax
[mw_shl_code=applescript,true]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()  //此处创建函数
{
var xmlhttp;
if (window.XMLHttpRequest)  //判断浏览器类型
{
//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() //监听Ajax状态码
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) //如果状态码等于4和200时为ture
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
         //执行修改ID为myDiv标签的值让其等于服务器接收到的数据
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
//第一个参数表示通过get方式传参
//第二个参数表示服务器路径
//第三个参数表示是否为异步
xmlhttp.send(); //向服务器发送请求
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>[/mw_shl_code]
此时一个简单的Ajax实例创建完成

什么是Cors
CORS 是一个 W3C 标准，全称是“跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨域的服务器，发出XMLHttpRequest请求，从而克服了 AJAX 只能同源使用的限制。是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源
同源：

//一个网站向另一个网站发送请求
//同源两个网站之间协议头端口号域名三个都一样的情况下就是同源
//跨域两个网站之间协议头端口号域名三个有任意一个不一样就是跨域

CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能。

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

cors两种求情方式：
简单请求（simple request）和非简单请求（not-so-simple request）

简单请求：满足以下条件就是简单请求
1、请求方法是以下三种方法之一：

HEAD
GET
POST

2、HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
不满足条件的就是非简单请求。

对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。
GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
上面的头信息中，Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段（详见下文），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。

如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8
上面的头信息之中，有三个与CORS请求相关的字段，都以Access-Control-开头。

（1）Access-Control-Allow-Origin

服务器返回它的值有两种情况，要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

（2）Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。

（3）Access-Control-Expose-Headers

该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。

		自动登录	找回密码
密码			立即注册