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呢?的更多相关文章

  1. ajax 跨域携带COOKIE

    这个问题属于Ajax跨域携带Cookie的问题,找了一篇博文的解决方案. 原生ajax请求方式: var xhr = new XMLHttpRequest(); xhr.open("POST ...

  2. vue项目使用axios发送请求让ajax请求头部携带cookie

    最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知ax ...

  3. 允许跨域资源共享(CORS)携带 Cookie (转载)

    如何让CORS携带Cookie CORS 是一个 W3C 标准,全称是“跨域资源共享”(Cross-origin resource sharing).默认浏览器为了安全,遵循“同源策略”,不允许 Aj ...

  4. 携带cookie进行数据请求

    前端进行数据请求有:普通的ajax(json)请求,jsop跨域请求,cors跨域请求,fetch请求...PC端这些请求方式中,普通的ajax(json)请求和jsop跨域请求是默认携带cookie ...

  5. fetch默认不携带cookie

    最近在使用fetch向服务器发送请求,过程中的体会和遇到的问题在这里记录一下. fetch返回的是一个Promise对象,我们可以对返回的结果做进一步的处理,这是与传统ajax的一个区别. 简单的请求 ...

  6. TLS通信过程

    TLS通信过程 握手与密钥协商过程 基于RSA握手和密钥交换的客户端验证服务器为示例详解TLS/SSL握手过程 sequenceDiagram client->>server: clien ...

  7. Python Web学习笔记之WebSocket 通信过程与实现

    一.什么是 WebSocket ? WebSocket 是一种标准协议,用于在客户端和服务端之间进行双向数据传输.但它跟 HTTP 没什么关系,它是基于 TCP 的一种独立实现. 以前客户端想知道服务 ...

  8. django基础之Ajax、分页、cookie与session

    目录: Ajax之json Ajax简介 jquery实现的ajax js实现的ajax django分页器 COOKIE与SESSION 一.Ajax之json 1.什么是json? 定义: JSO ...

  9. SSL、TLS协议格式、HTTPS通信过程、RDP SSL通信过程

    相关学习资料 http://www.360doc.com/content/10/0602/08/1466362_30787868.shtml http://www.gxu.edu.cn/college ...

随机推荐

  1. gunicorn Python部署应用

    对于flask应用 启动命令为 python app.py 使用gunicorn启动 pip install gunicorn python gunicorn --workers=7 switch_a ...

  2. Cisdem OCRWizard for Mac 使用教程

    Cisdem OCRWizard for Mac是一款macOS平台的的文件识别软件,可以对任何PDF.扫描文件或图像文件(包括名片的照片)进行OCR识别,支持超过40种语言,帮助我们提高效率.现在小 ...

  3. C# 执行 cmd 命令, 不显示任何窗口

    代码如下: 调用的命令:reg export exportPath registryKey -y Process proc = new Process(); proc.StartInfo.FileNa ...

  4. ETCD:实验特性和APIs

    原文地址:Experimental features and APIs 大多数情况下,etcd项目是稳定的,但我们仍在快速发展! 我们相信快速发布理念. 我们希望获得有关仍在开发和稳定中的功能的早期反 ...

  5. windows 下安装beego

    好久没写博客了,最近忙于一些杂事,看见有几个博友留言了,未能及时回复,稍后晚点回复诸位博友.不多说了,windows安装beego(请先确保git环境已安装并设置了git环境变量.这个简单网上很多教程 ...

  6. vscode自动修复eslint规范的插件及配置

    在开发大型项目中,经常都是需要多人合作的.相信大家一定都非常头疼于修改别人的代码的吧,而合理的使用eslint规范可以让我们在代码review时变得轻松,也可以让我们在修改小伙伴们的代码的时候会更加清 ...

  7. 大话Git系列之初识版本控制系统(1)

    前言:何谓版本控制系统呐?有两种说法:一种叫法为SCM,==source code management (源代码管理系统)另一种说法为VCS,==version control system(版本控 ...

  8. 个人项目开源之Django图书借阅系统源代码

    Django写的模拟图书借阅系统源代码已开源到码云 源代码

  9. 纸壳CMS现已支持自定义扩展字段

    简介 纸壳CMS是开源免费的可视化内容管理系统. GitHub https://github.com/SeriaWei/ZKEACMS 自定义字段 纸壳CMS现已支持自定义字段,在不修改代码的情况下, ...

  10. 初级模拟电路:3-10 BJT实现开关电路

    回到目录 1. 基本用法 用BJT晶体管实现开关功能是经常会用到的实用电路.和逻辑门电路类似,当BJT用于开关电路时,也只工作于饱和区和截止区. 开关功能的实现电路如下图所示,负载可以是发光二极管.电 ...