基础知识

　　知识点梳理见图：

自己动手实践案例

案例1： 访问本地文件

<!DOCTYPE html>

<html>

<body>

<div id="demo">

<h1>XMLHttpRequest 对象</h1>

<button type="button" onclick="loadDoc()">更改内容</button>

</div>

<script>

function loadDoc() {

  const myHttp = new XMLHttpRequest();

  myHttp.onload = function () {

    //响应

    document.getElementById("demo").innerHTML = this.responseText

  };

    //这里是访问跟文件同一层级下的文件夹下的某个文件

  myHttp.open("GET", "./demo/aa.txt",true);

  myHttp.send();

}

</script>

</body>

</html>

文件的位置：

  • 代码效果如下：

案例2：访问服务端数据

<!DOCTYPE html>

<html>

<body>

<div id="demo">

<h1>XMLHttpRequest 对象</h1>

<button type="button" onclick="loadDoc()">更改内容</button>

</div>

<script>

function loadDoc() {

  const myHttp = new XMLHttpRequest();

  myHttp.onload = function () {

    //响应

    document.getElementById("demo").innerHTML = this.responseText

  };

  console.log(myHttp.getAllResponseHeaders())

  //定义method url

  myHttp.open("GET", "http://123.207.32.31:5000/test",true);

  //设置请求头 - 请求头的设置要在open之后，此处 是设置token，必须是 key-val 形式

  myHttp.setRequestHeader(

    "Authorization","eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwibmFtZSI6ImNvZGVyd2h5Iiwicm9sZSI6eyJpZCI6MSwibmFtZSI6Iui2hee6p-euoeeQhuWRmCJ9LCJpYXQiOjE2ODYyMDgxMzMsImV4cCI6MTY4ODgwMDEzM30.Ve6T7h4dGuYmk4Lwch1rlr2pvf11XKfr2F2mxl1kAgp46rvgFxjmUqjhRmq90whydPVYTtrvPnWp1aGY50eVtQcY1olqqwr8ZOngERHIyHgzQxY3zEDLrtcZ5nrNqGeAIutc6kDOgGQFPyOvFOnKKMH7Puwgjydv41XGpEEqNus"

  )

  //定义传输数据

  let str = {

    "name": "dingding",

    "password": "4569841"

  }

  //传递参数

  myHttp.send(JSON.stringify(str));

}

</script>

</body>

</html>
  • 代码效果如下：

案例3：自己尝试封装一个AJAX

等待更新。。。。。。

原生AJAX的学习的更多相关文章

  1. 学习笔记：IDEA、原生ajax的三道练习题、Markdown

    前言 该从何说起呢?想写博客好久了,正好这个学期课很少(大三),可以静下心来写点东西(虽然事情依旧很多),总感觉记录和分享是一件很酷的事情.第一篇博客,第一次使用Markdown写博客,第一次使用ID ...

  2. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  3. ASP.NET学习笔记（5）——原生Ajax基本操作

    说明(2017-11-4 15:32:49): 1. 回北京后又快一个月了,上次在家写的下回预告,到底是没把加水印写完,而且这次也不想写.. 2. 上次许的愿,十月份看完asp.net,已经泡汤了,翻 ...

  4. Django学习---原生ajax

    Ajax 原生ajax Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件). ...

  5. 手写原生ajax

    关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...

  6. [译]脱离jQuery，使用原生Ajax

    脱离jQuery,使用原生Ajax 标签: Ajax translate 英文出处:<A Guide to Vanilla Ajax Without jQuery> 翻译: 刘健超 J.c ...

  7. 原生AJAX基础讲解及兼容处理

    原文:原生AJAX基础讲解及兼容处理 AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML). AJAX不是新技术 ,但却是热门的技术.它 ...

  8. jQuery的$.ajax方法响应数据类型有哪几种？本质上原生ajax响应数据格式有哪几种，分别对应哪个属性？

    jQuery的$.ajax方法响应数据类型有:xml.html.script.json.jsonp.text 本质上原生ajax响应数据格式只有2种:xml和text,分别对应xhr.response ...

  9. Ajax的学习记录

    Ajax学习笔记 1.同步与异步同步:客户端发送请求到服务端,当服务器返回响应之前,客户端都处于等待卡死状态异步:客户端发送请求到服务端,当服务器返回响应之前,客户端可以随意做其他事情,不会卡死 2. ...

  10. AJAX的学习与使用>前端技术系列

    目录 AJAX的学习与使用 什么是AJAX 为什么要使用AJAX AJAX接收服务器响应数据的3种格式 文本格式(重要) JSON格式(重要) 服务器端响应实体类JSON格式的3种方式 修改实体类的t ...

随机推荐

  1. 最强分布式搜索引擎——ElasticSearch

    最强分布式搜索引擎--ElasticSearch 本篇我们将会介绍到一种特殊的类似数据库存储机制的搜索引擎工具--ES elasticsearch是一款非常强大的开源搜索引擎,具备非常多强大功能,可以 ...

  2. 怎么用ChatGPT写代码，ChatGPT怎么改代码修BUG

    ChatGPT 是一个自然语言处理模型,可以模拟人类语言生成文本,可以用于写代码和修复bug.在本文中,我们将介绍如何使用 ChatGPT 写代码和修bug. 怎么用ChatGPT写代码? 虽然 Ch ...

  3. Go 语言 new 和 make 关键字的区别

    原文链接: Go 语言 new 和 make 关键字的区别 本篇文章来介绍一道非常常见的面试题,到底有多常见呢?可能很多面试的开场白就是由此开始的.那就是 new 和 make 这两个内置函数的区别. ...

  4. computed的setter妙用

    使用场景:当我们用v-model绑定了一个计算属性,想直接设置计算属性时,就要利用到setter demo: <template> <div> <div>First ...

  5. python：生成半年内的巡检日报execl

    问题描述:使用脚本来生成半年内的数据,数据内容大概为每天的数据库巡检日报,临时抱佛脚.数据不可能是真实的,都是随机生成的,想要使用真实的数据后面直连操作系统或者数据库.后期可以慢慢实现自动化生成每天的 ...

  6. oracle删除一张表后，索引，同义词，视图，约束会被删除么

    问题描述:看到有一道题,说删除一张表之后,什么会被关联删除 进行测试,看看一张表什么会被关联删除,进行scoot下的EMP进行测试 一.创建测试需求用例 表结构: SQL> desc emp; ...

  7. VMware Workstation Pro许可证

    永久许可证:ZC10K-8EF57-084QZ-VXYXE-ZF2XF 备用许可证: UF71K-2TW5J-M88QZ-8WMNT-WKUY4 AZ7MK-44Y1J-H819Z-WMYNC-N7A ...

  8. 随手记：Redis 部署到linux上面后，本地无法连接

    修改redis的配置文件 redis.conf 1. bind 设置为 0.0.0.0 2. protected-mode 设置为no   (也就是关闭保护模式) 3.    daemonize 设置 ...

  9. Redis（六）集群

    Redis集群 1.1 存在的问题 容量不够Redis如何扩容 并发写操作,Redis如何分摊 当主机或者从机宕机,薪火相传.反客为主等主从模式都会导致ip发生变化,应用程序中的配置需要对应修改主机地 ...

  10. nlp数据预处理：词库、词典与语料库

    在nlp的数据预处理中,我们通常需要根据原始数据集做出如题目所示的三种结构.但是新手(我自己)常常会感到混乱,因此特意整理一下 1.词库 词库是最先需要处理出的数据形式,即将原数据集按空格分词或者使用 ...