Ajax与Cors
什么是AjaxAjax(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
<!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>
此时一个简单的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里面指定。
页:
[1]