Ajax与CORS通讯

时间 2019-12-05

标签 ajax cors 通讯栏目 Ajax 繁體版

原文原文链接

处理跨域的主要方法html

JSONP
CORS

本文主要讨论CORS解决AJAX由于浏览器同源策略不能跨域请求数据的问题。json

1.JSONP

JSONP跨域能够参考下面这篇博客
JSONP跨域跨域

2.CORS

关于CORS细节能够阅读跨域资源共享 CORS 详解。浏览器

跨域资源共享 CORS服务器

1. 跨域资源共享CORS(Cross-origin resource sharing)cors

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它容许浏览器向跨源服务器，发出XMLHttpRequest请求，从而解决了AJAX不能跨域请求的问题。异步

2. CORS须要浏览器和服务器同时支持。async

整个CORS通讯过程，都是浏览器自动完成，不须要用户参与。对于开发者来讲，CORS通讯与同源的AJAX通讯没有差异，代码彻底同样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感受。函数

所以，实现CORS通讯的关键是服务器。只要服务器实现了CORS接口，就能够跨源通讯。ui

CORS容许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

Ajax简介

Ajax即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术）

Ajax 是一种用于建立快速动态网页的技术。经过在后台与服务器进行少许数据交换，Ajax 可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。

XMLHttpRequest对象是浏览器提供的一个API，用来顺畅地向服务器发送请求并解析服务器响应，固然整个过程当中，浏览器页面不会被刷新。

建立Ajax步骤：

1.建立XMLHttpRequest对象
var xhr = new XMLHttpRequest();
兼容各个浏览器的建立方法

function createRequest (){
    try {
        xhr = new XMLHttpRequest();
    }catch (tryMS){
        try {
            xhr = new ActiveXObject("Msxm12.XMLHTTP");
        } catch (otherMS) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (failed) {
                xhr = null;
            }
        }
    }
    return xhr;
}

2.准备请求
xhr.open(method,url,async);

open() 的第一个参数是HTTP请求方法 - 有GET，POST，HEAD以及服务器支持的其余方法。保证这些方法必定要是大写字母，不然其余一些浏览器（好比FireFox）可能没法处理这个请求。
第二个参数是要做为请求发送目标的URL。
第三个参数是true或false，表示请求是异步仍是同步。true是异步，默认true。

3.发送请求
xhr.send();
send() 方法的参数能够是任何你想发送给服务器的内容

4.处理响应

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText);
    }
}

onreadystatechange ：当处理过程发生变化的时候执行下面的函数
readyState状态值
- 0：请求未初始化。
- 1：正在加载) or (已创建服务器连接)
- 2：请求已发送，正在处理中（一般如今能够从响应中获取内容头）。
- 3：请求在处理中；
- 4：响应已完成。
responseText：服务器以文本字符的形式返回
responseXML：得到 XML形式的响应数据
对象转换为JSON格式使用JSON.stringify
json转换为对象格式用JSON.parse()
返回值通常为json字符串，能够用JSON.parse(xhr.responseText)转化为JSON对象

代码实现以下：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>  
    <button id="myButton">点我</button>
    <script src="./main.js"></script>
</body>
</html>

myButton=document.getElementById('myButton')
myButton.addEventListener('click',(e)=>{
    let xhr=new XMLHttpRequest()
    xhr.onreadystatechange=()=>{
       if( xhr.readyState===4){
           console.log("请求响应都完毕了")
           if( xhr.status>=200&& xhr.status<300){
               console.log("请求成功")
               console.log(typeof  xhr.responseText)//判断返回数据的类型是String
               console.log( xhr.responseText)
               let string= xhr.responseText
               let object=window.JSON.parse(string)
               console.log(typeof object)
               console.log(object)
           }else if( xhr.status>=400){
               console.log("请求失败")
           }
       }
    }
    xhr.open('GET','/xxx')
    xhr.send()
})

if(path==='/xxx'){
    response.statusCode=200
    response.setHeader('Content-Type', 'text/json;charset=utf-8')
    response.write(`
    {
      "note":{
        "to":"xxx",
        "from":"yyy",
        "content":"hello"
      }
    }
    `)
    response.end()
  }

当发送请求的时候，就会根据xml.open('GET','/xxx')找到对应的请求路径。在本文是找到/xxx路径，而后返回所请求的数据，在浏览器运行结果以下。

CORS跨域
关于CORS细节能够阅读跨域资源共享 CORS 详解。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>  
    <button id="myButton">点我</button>
     <script src="./main.js"></script>
</body>
</html>

myButton.addEventListener('click',(e)=>{
    let xhr=new XMLHttpRequest()
    xhr.open('GET','http://jack.com:8002/xxx')
    xhr.onreadystatechange=()=>{
       if(xhr.readyState===4){
           console.log("请求响应都完毕了")
           if(xhr.status>=200&&xhr.status<300){
               console.log("请求成功")
               console.log(typeof xhr.responseText)
               console.log(xhr.responseText)
               let string=xhr.responseText
               let object=window.JSON.parse(string)
               console.log(typeof object)
               console.log(object)
           }else if(xhr.status>=400){
               console.log("请求失败")
           }
       }
    }
    xhr.send()
})

if(path==='/xxx'){
    response.statusCode=200
    response.setHeader('Content-Type', 'text/json;charset=utf-8')
    response.setHeader('Access-Control-Allow-Origin','http://blog1.com:8001')
    response.write(`
    {
      "note":{
        "to":"xxx",
        "from":"yyy",
        "content":"hello"
      }
    }
    `)
    response.end()
  }

能够看到当代码没有下面这一行代码时AJAX并不能跨域请求 response.setHeader('Access-Control-Allow-Origin','http://blog1.com:8001')的时候，结果以下

从结果能够看出，由于浏览器的同源策略，Ajax不能跨域请求

解决的办法是添加 response.setHeader('Access-Control-Allow-Origin','http://blog1.com:8001')