Javascript基础知识点整理五：Ajax和跨域

IFE     2019年03月25日     分类：   前端知识体系     标签：   javascript     浏览量：   1857

1， Ajax的介绍

AJAX ，它是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。

Ajax包括以下几个步骤

1. 创建 XMLHttpRequest 实例
2. 发出 HTTP 请求
3. 接收服务器传回的数据
4. 更新网页数据

概况的说就是： AJAX 通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。

2，ajax用法示例

const xhr = new XMLHttpRequest();
xhr.open("GET","/api",true);
xhr.onreadystatechange = function () { //随时监听状态变化
  //异步执行函数
  if(xhr.readyState == 4){ //状态为4表示已经完成了
    //0-（未初始化）还未调用send()方法 1-(载入)已经调用send方法正在发送请求
    //2- (载入完成)send方法执行完成 已经接收到全部响应内容 3-(交互)正在解析
    //4-(完成)响应内容解析完成可以在客户端调用了
    if(xhr.status == 200){ //服务端返回200证明返回成功了
      console.log(xhr.responseText);//打印服务端返回的内容
    } else {
      console.error(xhr.statusText);
    }
  }
}
xhr.onerror = function (e) {
  console.error(xhr.statusText);
}
xhr.send(null);

3，状态码说明

XMLHttpRequest,readyState状态码说明

• 0-(未初始化)还没有调用send()方法
• 1-(载入)已调用send方法，正在发送请求
• 2-(载入完成)send方法执行完成，已经接受到全部响应内容
• 3-(交互)正在解析响应内容
• 4-(完成)响应内容解析完成，可以在客户端调用了

XMLHttpRequest.status返回http状态码 - 200, OK，访问正常 - 301, Moved Permanently，永久移动 - 302, Moved temporarily，暂时移动 - 304, Not Modified，未修改 - 307, Temporary Redirect，暂时重定向 - 401, Unauthorized，未授权 - 403, Forbidden，禁止访问 - 404, Not Found，未发现指定网址 - 500, Internal Server Error，服务器发生错误

4，同源策略

参考 为了保证用户信息的安全，防止恶意的网站窃取数据，浏览器有同源策略，否则 Cookie 可以共享，互联网就毫无安全可言了。提交表单不受同源政策的限制。

同源的限制：

• 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。
• 无法接触非同源网页的 DOM。
• 无法向非同源地址发送 AJAX 请求（可以发送，但浏览器会拒绝接受响应）。

另外，通过 JavaScript 脚本可以拿到其他窗口的window对象。如果是非同源的网页，目前允许一个窗口可以接触其他网页的window对象的九个属性和四个方法。

window.closed
window.frames
window.length
window.location
window.opener
window.parent
window.self
window.top
window.window
window.blur()
window.close()
window.focus()
window.postMessage()

上面的九个属性之中，只有window.location是可读写的，其他八个全部都是只读。而且，即使是location对象，非同源的情况下，也只允许调用location.replace方法和写入location.href属性。

AJAX 只能向同源网址（协议、域名、端口都相同）发出 HTTP 请求，如果发出跨域请求，就会报错。

5，JSONP

有3个标签允许跨域加载资源，img(src), link( href=css), script(src),link、script可以使用CDN，CDN的也是其他域，script可以用于JSONP。
JSONP实现原理：通过script访问外域的js文件，返回信息(可以是服务器动态拼接的js文件)。将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。 服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

// 前端
function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}

function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
};

// 后端返回
foo({
  "ip": "8.8.8.8"
});

由于script元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了foo函数，该函数就会立即调用。作为参数的 JSON 数据被视为 JavaScript 对象，而不是字符串，因此避免了使用JSON.parse的步骤。

由于使用script标签的src属性，因此jsonp只支持get方法。

6，CORS

CORS 是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。相比 JSONP 只能发GET请求，CORS 允许任何类型的请求。

整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与普通的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨域，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感知。因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨域通信。

服务端设置http header:

//不同后端语言的写法可能不一样
//第二个参数填写允许跨域的域的名称，不建议直接写'*'
response.setHeader("Access-Control-Allow-Origin","http://a.com,http://b.com");//允许哪些域可以跨域访问信息
response.setHeader("Access-Control-Allow-Headers","X-Requested-With");
response.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
//接收跨域的cookie
response.setHeader("Access-Control-Allow-Credentials","true");

参考: MDN

登陆后才可以评论