编程语言   发布时间:2022-06-27  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Ajax与Cors大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_772_2@什么是Ajax

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

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

弊端

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

工作原理

Ajax与Cors

如图所示 当我们触发某个事件时浏览器后台会创建一个XMLhttprequest对象并向服务器发送httprequest请求࿰c;服务器收到后会响应并将请求数据返回浏览器࿰c;浏览器接收到后使用JS修改更新部分网页内容。

@H_772_2@Ajax实例

创建实例之前我们先了解几个对象方法

Ajax与Cors

Ajax状态码

xhr.readyState

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


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

@H_772_2@readyStateChange事件

用来监听readyState的变化࿰c;当readyState发生变化时此事件才会启用。

XMLhttprequest.response

此属性表示服务器返回的数据体(即 http 回应的 body 部分)。它可能是任何数据类型࿰c;比如字符串、对象、二进制对象等等࿰c;具体的类型由XMLhttprequest.responseType属性决定。该属性只读。

XMLhttprequest.responseType

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

XMLhttprequest.responseText

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

XMLhttprequest.open()

用于指定 http 请求的参数

XMLhttprequest.send()

用于实际发出 http 请求。它的参数是可选的࿰c;如果不带参数࿰c;就表示 http 请求只有一个 URL࿰c;没有数据体࿰c;典型例子就是 GET 请求;如果带有参数࿰c;就表示除了头信息࿰c;还带有包含具体数据的信息体࿰c;典型例子就是 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 标准࿰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;就可以跨域通信。

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

不满足条件的就是非简单请求。

对于简单请求࿰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;XMLhttprequestonerror回调函数捕获。注意࿰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请求之中。设为truec;即表示服务器明确许可࿰c;Cookie可以包含在请求中࿰c;一起发给服务器。这个值也只能设为truec;如果服务器不要浏览器发送Cookie࿰c;删除该字段即可。

@H_772_2@(3)Access-Control-Expose-Headers

该字段可选。CORS请求时࿰c;XMLhttprequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-ControlContent-LanguageContent-TypeExpiresLast-ModifiedPragma。如果想拿到其他字段࿰c;就必须在Access-Control-Expose-Headers里面指定。

大佬总结

以上是大佬教程为你收集整理的Ajax与Cors全部内容,希望文章能够帮你解决Ajax与Cors所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。