大佬教程收集整理的这篇文章主要介绍了Ajax与Cors,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
Ajax(Asynchronous JavaScript and XML)异步JavaScript 和 XMLc;它并不是一门编程语言c;而是利用JavaScript在保证页面不被刷新c;页面链接不改变的情况下与服务器交换数据并更新部分网页的技术。
对于传统网页c;如果要更新其内容c;那么必须要刷新整个页面c;但是Ajaxc;便可以在页面不被全部刷新的情况下更新其内容。这个过程其实就是页面在后台和服务器进行了交互c;在得到请求数据后c;再利用JavaScript改变页面。
弊端
Ajax只能在同源情况下请求c;Cors可以不同源。
如图所示 当我们触发某个事件时浏览器后台会创建一个XMLhttprequest对象并向服务器发送httprequest请求c;服务器收到后会响应并将请求数据返回浏览器c;浏览器接收到后使用JS修改更新部分网页内容。
创建实例之前我们先了解几个对象方法
Ajax状态码
xhr.readyState
readyState === 0 表示未初始化完成c;也就是 open 方法还没有执行
readyState === 1 表示配置信息已经完成c;也就是执行完 open 之后
readyState === 2 表示 send 方法已经执行完成
readyState === 3 表示正在解析响应内容
readyState === 4 表示响应内容已经解析完毕c;可以在客户端使用了
xhr.status
//一般常见的有这两种
200, OKc;访问正常
404, Not Foundc;未发现指定网址
用来监听readyState的变化c;当readyState发生变化时此事件才会启用。
此属性表示服务器返回的数据体(即 http 回应的 body 部分)。它可能是任何数据类型c;比如字符串、对象、二进制对象等等c;具体的类型由XMLhttprequest.responseType
属性决定。该属性只读。
xhr.responseType
属性是一个字符串c;表示服务器返回数据的类型。这个属性是可写的c;可以在调用open()
方法之后、调用send()
方法之前c;设置这个属性的值c;告诉浏览器如何解读返回的数据。如果responseType
设为空字符串c;就等同于默认值text
。
XMLhttprequest.responseText
属性返回从服务器接收到的字符串c;该属性为只读。只有 http 请求完成接收以后c;该属性才会包含完整的数据。
用于指定 http 请求的参数
用于实际发出 http 请求。它的参数是可选的c;如果不带参数c;就表示 http 请求只有一个 URLc;没有数据体c;典型例子就是 GET 请求;如果带有参数c;就表示除了头信息c;还带有包含具体数据的信息体c;典型例子就是 POST 请求。
<!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 是一个 W3C 标准c;全称是“跨域资源共享”(Cross-origin resource sharing)。它允许浏览器向跨域的服务器c;发出XMLhttprequest
请求c;从而克服了 AJAX 只能同源使用的限制。是一种基于 http 头的机制c;该机制通过允许服务器标示除了它自己以外的其它origin(域c;协议和端口)c;这样浏览器可以访问加载这些资源。
同源:
//一个网站向另一个网站发送请求
//同源 两个网站之间 协议头 端口号 域名 三个都一样的情况下 就是同源
//跨域 两个网站之间 协议头 端口号 域名 三个有任意一个不一样 就是跨域
CORS 需要浏览器和服务器同时支持。目前c;所有浏览器都支持该功能。
整个 CORS 通信过程c;都是浏览器自动完成c;不需要用户参与。对于开发者来说c;CORS 通信与普通的 AJAX 通信没有差别c;代码完全一样。浏览器一旦发现 AJAX 请求跨域c;就会自动添加一些附加的头信息c;有时还会多出一次附加的请求c;但用户不会有感知。因此c;实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口c;就可以跨域通信。
简单请求(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
不满足条件的就是非简单请求。
对于简单请求c;浏览器直接发出CORS请求。具体来说c;就是在头信息之中c;增加一个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...
上面的头信息中c;Origin
字段用来说明c;本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值c;决定是否同意这次请求。
如果Origin
指定的源c;不在许可范围内c;服务器会返回一个正常的http回应。浏览器发现c;这个回应的头信息没有包含Access-Control-Allow-Origin
字段(详见下文)c;就知道出错了c;从而抛出一个错误c;被XMLhttprequest
的onerror
回调函数捕获。注意c;这种错误无法通过状态码识别c;因为http回应的状态码有可能是200。
如果Origin
指定的域名在许可范围内c;服务器返回的响应c;会多出几个头信息字段。
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
上面的头信息之中c;有三个与CORS请求相关的字段c;都以Access-Control-
开头。
@H_772_2@(1)Access-Control-Allow-Origin
服务器返回它的值有两种情况c;要么是请求时Origin
字段的值c;要么是一个*
c;表示接受任意域名的请求。
@H_772_2@(2)Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值c;表示是否允许发送Cookie。默认情况下c;Cookie不包括在CORS请求之中。设为true
c;即表示服务器明确许可c;Cookie可以包含在请求中c;一起发给服务器。这个值也只能设为true
c;如果服务器不要浏览器发送Cookiec;删除该字段即可。
@H_772_2@(3)Access-Control-Expose-Headers
该字段可选。CORS请求时c;XMLhttprequest
对象的getResponseHeader()
方法只能拿到6个基本字段:Cache-Control
、Content-Language
、Content-Type
、Expires
、Last-Modified
、Pragma
。如果想拿到其他字段c;就必须在Access-Control-Expose-Headers
里面指定。
以上是大佬教程为你收集整理的Ajax与Cors全部内容,希望文章能够帮你解决Ajax与Cors所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。