通过JSONP实现跨域访问
跨域访问 说到跨域访问就要谈到浏览器的同源策略，所谓同源指的就是协议相同、域名相同、端口号相同，三个条件必须全部匹配，否则就会收到限制，例如： Cookie、LocalStorage 和 IndexDB 无法读取 DOM 无法获得 AJAX 请求不能发送 而互联网默认原则就是同源策略，也就是说不允许跨域访问。 常见的跨域可以通过标签元素实现，例如link、script、img、iframe等标签。 1234567891011121314151617<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src=" ...
原生JS实现一个Ajax跨域请求
什么Ajax 在现实Ajax之前，我们需要了解下什么Ajax？ Asynchronous JavaScript + XML（异步 JavaScript 和 XML）, 其本身不是一种新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的‘新’方法。 当使用结合了这些技术的 AJAX 模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。 异步交互 接下来便要弄清楚什么是异步交互。 所谓异步交互，就是指指发送一个请求，不需要等待返回，随时可以再发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果，而异步交互不需要等待。 举个简单的例子就是当点击某个按钮后，程序会去请求一些数据，而这个过程整个页面是不会刷新的。如下图所示，异步获取一言并且显示在页面中 快速开始 一：核心对象 关于核心对象：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest 核心对象是实现Aja ...
三、基于promise封装属于自己的Ajax库
模拟axios利用promise封装一个自己的Ajax库。 一、基础框架 封装Ajax库之前，我们要将其框架结构写出来。 我们通过一个匿名函数，将我们的核心函数暴露给全局。 对这个核心函数进行方法（get、post等）的添加。 1234567891011121314151617181920212223242526272829303132(function anonymous(window) { //默认配置项 let _default = { // 请求方式 method: "GET", // URL url: "", // URL基 baseURL: "", // 请求头 headers: {}, // 设置返回格式 dataType: "JSON", // POST请求的数据 data ...
二、fetch中的基础语法
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch fetch概念 fetch不是Ajax，它诞生的目的是为了代替Ajax，它是js中内置的API。 基于fetch可以实现客户端和服务端的信息通信 由于fetch是2018年提出，因此存在浏览器兼容问题。 12345fetch('https://v1.hitokoto.cn', { method: 'GET',}).then(result => { console.log(result);}) 12345678910fetch('https://v1.hitokoto.cn', { method: 'POST', body: 'c=b', headers: { ' ...
一、Axios基础
参考文档：http://www.axios-js.com/zh-cn/docs/ axios库基本概念 它是一个类库，基于promise管理的Ajax库 关于get、post方法的参数 url 第一个参数，请求的url地址 options 对象。 get方法 123456789axios.get('https://v1.hitokoto.cn/', { params: { c: "b" }}).then(function (res) { console.log(res);}).catch(function (err) { console.log(err);}) get请求会把params中的键值对拼接成urlencode格式的字符串，然后以问号传递参数的形式，传递给服务器。 post方法 post方法与get稍有些不同，其第二个参数直接传入对象即代表请求数据。 1234567axios.post( ...
四、实现跨域访问
同源策略 同源：协议相同、域名相同、端口号相同 如果非同源那么将收到的限制： Cookie、LocalStorage和IndexDB无法读取 DOM无法获得 AJAX请求不能发送 互联网默认原则：同源策略（不允许跨域访问） 常见跨域 link元素 script元素 img元素 iframe元素 JSONP 通过动态创建 script 标签，通过 script 标签的 src 请求没有域限制来获取资源 例如在 html 页面中，将 script 标签地址改为后端接口。 网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同原政策限制；服务器收到请求后，将数据放在一个指定名的回调函数里传回来。 12345678910111213141516171819<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c ...
三、jQuery中的Ajax
JQuery中的Ajax 方法 load方法 $.get和$.post方法 $.ajax方法 $.getScript方法和$.JSON方法 事件 ajaxStart和ajaxStop ajaxComlete、ajaxSend、ajaxError、ajaxSuccess事件 load方法 $element.load(url,[data],[callback]) url 异步请求的地址 data 异步请求的数据.。如果传入参数那么请求方式为post，否则为get。请求数据为键值对形式。 callback 自动将返回结果写入到目标元素中 12345$('.btn').click(function () { $('button').load('data/server2.txt', { name: '123' }, function () { console.log('success'); }) ...
二、JSON数据格式
JSON语法规则 ”名称/值“对的集合。例如对象、字典 1234{ "name": "好人", "job": [1, 2, 3, 4, 5]} 字符串必须使用双引号。 值的有序列表。例如数组。 123[ 1,2,3] JSON的值可以是字符串、数值、布尔值、null、对象、数组。 JSON可以独立成文件，扩展名为json。 JavaScript中的JSON json字符串 数据格式符合JSON格式的要求，类型是字符串 1var jsonString = '{"name":"张无忌"}' json对象 JSON数据格式在JavaScript中的具体表现 1234var jsonObject = { name:'张无忌'}var jsonArr = [1,2,3] JSON对象与JSON字符串转换 将json格式字符串转为JSON对象 ...
一、Ajax的基本用法
同步交互与异步交互 同步交互 指发送一个请求，需要等待返回，然后才能够发送下ー个请求。同步交互相当于排队，轮到下一个的情况会因为前一个而有所不同。 与排队类似。例如学生在食堂买饭，只有等前边同学买完才能轮到自己。 客户端向服务器端发送请求，必须等待结果返回，才能向服务端再次发送请求。 异步交互 所谓异步交互，就是指指发送一个请求，不需要等待返回，随时可以再发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果，而异步交互不需要等待。 异步交互相比同步交互的优势主要具有以下几点 用户操作无须像同步交互必须等待结果。 异步交互只需与服务器端交換必要的数据内容，而不是将所有数据全部更新。 异步交互对带宽造成的压力相比同步交互更小。 通过Aja实现异步交互不需要任何第三方插件，只要浏览器支持Javascript语言即可实现。 异步交互相比同步交互井不是优势，它也存在一些问题 异步交互破坏了浏览器原有的前进和后退机制。 如果后面逻辑的行依靠前面逻辑行的结果的话，异步交互可能会造成问题。 Aja×实现异步交互对搜索引擎支持较弱。 Ajax实现异步交互会引起一些Web安 ...
