码迷,mamicode.com
首页 > Web开发 > 详细

【计算机网络】如何让Ajax通信过程携带Cookie呢?

时间:2019-12-02 23:32:11      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:stat   前端   ide   url   else   属性   on()   绑定   org   

Ajax

1. 介绍一下ajax并代码实现

1.1 基本概念

JavaScript 和XML(Asynchronous JavaScript And XML)。简单点说,就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性,也就是说他可以在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。

Ajax | MDN

1.2 创建一个简单的Ajax

  • 创建 XMLHttpRequest 对象
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
  • 绑定onreadystatechange 事件
httpRequest.onreadystatechange = function(){
    // Process the server response here.
};
  • 向服务器发送请求
httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();

完整的例子

function ajax(url, cb) {
  let xhr;
  if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
      cb(xhr.responseText);
    }
  }
  xhr.open('GET', url, true);
  xhr.send();
}

1.3 httpRequest.readyState的值(熟记)

  • 0 (未初始化) or (请求还未初始化)
  • 1 (正在加载) or (已建立服务器链接)
  • 2 (加载成功) or (请求已接受)
  • 3 (交互) or (正在处理请求)
  • 4 (完成) or (请求已完成并且响应已准备好)

1.4 访问服务端返回的数据

  • httpRequest.responseText
    • 服务器以文本字符的形式返回
  • httpRequest.responseXML
    • 以 XMLDocument 对象方式返回,之后就可以使用JavaScript来处理

1.5 GET 注意事项

  • 如果不设置响应头 Cache-Control: no-cache 浏览器将会把响应缓存下来而且再也不无法重新提交请求。你也可以添加一个总是不同的 GET 参数,比如时间戳或者随机数 (详情见 bypassing the cache)

1.6 POST 请求

[!NOTE]
POST请求则需要设置RequestHeader告诉后台传递内容的编码方式以及在send方法里传入对应的值

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type": "application/x-www-form-urlencoded");
xhr.send("key1=value1&key2=value2");

1.7 Ajax如何携带cookie(面试加分)

  • ajax会自动带上同源的cookie,不会带上不同源的cookie
  • 可以通过前端设置withCredentials为true, 后端设置Header的方式让ajax自动带上不同源的cookie,但是这个属性对同源请求没有任何影响。会被自动忽略。

withCredentials | MDN

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);

【计算机网络】如何让Ajax通信过程携带Cookie呢?

标签:stat   前端   ide   url   else   属性   on()   绑定   org   

原文地址:https://www.cnblogs.com/fecommunity/p/11965926.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!