前端学习（七十九） DOM-Ajax（Dom）

全称：Asynchronous JavaScript And XML

简单的说就是利用一系列技术，使用Ajax模型，在不刷新页面的基础上与服务器进行通信

Ajax实现

都是通过XHR对象实现的，IED范文中以ActiveXObject实现（不考虑）

XHR

全称：XMLHttpRequest，虽然叫做这个，但是XHR可以取回所以类型的资源，并不局限于XML

创建XHR对象

new XMLHttpRequest()创建

属性

属性名	描述
readyState	请求的状态
onreadystatechange	当readyState属性改变时会调用
response	相应实体，类型由responseType指定
responseType	指定响应类型
status	请求的响应状态码，只读
statusText	请求的响应状态信息，只读
unload	可以在upload上添加一个事件监听来跟踪上传过程

readyState

readyState有不同的值，在不同的值代表不同的状态

0：尚未发送

1：请求已经打开，但是尚未发送

2：已经开始发送

3：发送中

4：发送结束（另外，注意只有当状态为4阶段的时候，才有resonseText信息）

responseType

responseType有不同的值，不同的值代表的类型不同

‘’：默认，字符串

‘arraybuffer’：arraybuffer类型

'blob'：HEADERS_RECEIVED

'document'：document

'json'：json

'text'：字符串

XHR方法

主要的方法有三个

open(method,url,async,username,password)

代表初始化请求，打开请求

method：发送的方法，有GET/POST/DELETE/HEAD/OPTIONS/PUT
url：地址
async：是否异步，默认是异步
username：用户名
password：密码

setRequestHeader(header,value)

设置请求头信息

header：名称
value：对应的值

send(data)

发送请求

data：String/FormData

示例

            var xhr=new XMLHttpRequest();   //创建xhr对象
            xhr.onreadystatechange = function(callback) {
                if(xhr.readyState == 4){
                    if(xhr.status >= 200 && xhr.status <300 || xhr.status == 304){
                        callback(xhr.responseText);
                    }
                    else{
                        console.error('失败'+xhr.status);
                        
                    }
                }
            }
            xhr.open('get','example.com',true);     //打开请求
            xhr.setRequestHeader('header-key','header-value');   //  设置头部
            xhr.send(null)  //发送请求

首先是创建xhr对象，然后通过监听readyState，来判断当前的状态值的变化，然后通过onreadystatechange判断，当值变为我们需要的值时，执行一些操作

Ajax跨域

什么是跨域？

违反浏览器同源策略的资源访问行为

什么是同源？

两个页面必须使用的是相同的协议，端口，主机，比如都是http（协议），都是80（端口），都是xxx.com（主机也就是域名），换句话说，也就是网址前面的：http://xxx.com:80，这一段必须完全相同，则是同源

我个人的理解就是，访问不同网址文件夹的资源，比如有两个网站a.com和b.com，这两个网站的资源包括图片，网页等都存储在各自的文件夹下，但是如果要a.com访问b.com文件夹下的内容，就不行，这时就需要用到跨域

为什么要跨域？

实际上，很多内容都需要跨域，最简单的不同的应用域名就不同，因此就就无法访问，所以用到了跨域

跨域的方法

CORS(Cross-Origin Resource Sharing)

iframe代理

message
window.name
document.domain

JSONP

CORS(Cross-Origin Resource Sharing)

是xhr2的新特性，但是xhr1中是禁止跨域请求的，所以存在一定的兼容问题

xhr2中，可以发送跨域请求，由服务器决定是否允许，浏览器不再干涉

xhr1中，即时服务器端允许，前端也发送了请求，但是浏览器会禁止发送

iframe代理

简单的说，就是在a.com中嵌入了一个b.com的页面，所有需要访问b.com的资源头通过嵌入的代理页面去请求访问，这种方式优点很明显，就是兼容各种浏览器

JSONP

原理就是<script>这个是可以跨域的，不受同源策略限制，所以可以使用请求一段js代码，不过这种方法的限制比较明显只能使用GET方法，因此实际开发中的使用有一定局限

前端学习（七十九） DOM-Ajax（Dom）

猜你喜欢