通过JSONP实现跨域访问
跨域访问 说到跨域访问就要谈到浏览器的同源策略，所谓同源指的就是协议相同、域名相同、端口号相同，三个条件必须全部匹配，否则就会收到限制，例如： Cookie、LocalStorage 和 IndexDB 无法读取 DOM 无法获得 AJAX 请求不能发送 而互联网默认原则就是同源策略，也就是说不允许跨域访问。 常见的跨域可以通过标签元素实现，例如link、script、img、iframe等标签。 <!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="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script> </hea ...
原生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等）的添加。 (function anonymous(window) { //默认配置项 let _default = { // 请求方式 method: "GET", // URL url: "", // URL基 baseURL: "", // 请求头 headers: {}, // 设置返回格式 dataType: "JSON", // POST请求的数据 data: null, // GET请求的数据 params: null, // 缓存 cache: tr ...
二、fetch中的基础语法
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch fetch概念 fetch不是Ajax，它诞生的目的是为了代替Ajax，它是js中内置的API。 基于fetch可以实现客户端和服务端的信息通信 由于fetch是2018年提出，因此存在浏览器兼容问题。 fetch('https://v1.hitokoto.cn', { method: 'GET', }).then(result => { console.log(result); }) fetch('https://v1.hitokoto.cn', { method: 'POST', body: 'c=b', headers: { 'Content-Type': 'x-www-form-urlcoded' }, ...
一、Axios基础
参考文档：http://www.axios-js.com/zh-cn/docs/ axios库基本概念 它是一个类库，基于promise管理的Ajax库 关于get、post方法的参数 url 第一个参数，请求的url地址 options 对象。 get方法 axios.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稍有些不同，其第二个参数直接传入对象即代表请求数据。 axios.post('https://v1.hitokoto.cn/', { ...
四、实现跨域访问
同源策略 同源：协议相同、域名相同、端口号相同 如果非同源那么将收到的限制： Cookie、LocalStorage和IndexDB无法读取 DOM无法获得 AJAX请求不能发送 互联网默认原则：同源策略（不允许跨域访问） 常见跨域 link元素 script元素 img元素 iframe元素 JSONP 通过动态创建 script 标签，通过 script 标签的 src 请求没有域限制来获取资源 例如在 html 页面中，将 script 标签地址改为后端接口。 网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同原政策限制；服务器收到请求后，将数据放在一个指定名的回调函数里传回来。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu ...
三、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 自动将返回结果写入到目标元素中 $('.btn').click(function () { $('button').load('data/server2.txt', { name: '123' }, function () { console.log('success'); }) }) 此方法会自动将请求结果写入到调用元素中。 get与post方法 $.get(url ...
二、JSON数据格式
JSON语法规则 ”名称/值“对的集合。例如对象、字典 { "name": "好人", "job": [1, 2, 3, 4, 5] } 字符串必须使用双引号。 值的有序列表。例如数组。 [ 1,2,3 ] JSON的值可以是字符串、数值、布尔值、null、对象、数组。 JSON可以独立成文件，扩展名为json。 JavaScript中的JSON json字符串 数据格式符合JSON格式的要求，类型是字符串 var jsonString = '{"name":"张无忌"}' json对象 JSON数据格式在JavaScript中的具体表现 var jsonObject = { name:'张无忌' } var jsonArr = [1,2,3] JSON对象与JSON字符串转换 将json格式字符串转为JSON对象 // json字符串 var jsonString = '{"name":"张无忌"}' var jsonObject = JS ...
一、Ajax的基本用法
同步交互与异步交互 同步交互 指发送一个请求，需要等待返回，然后才能够发送下ー个请求。同步交互相当于排队，轮到下一个的情况会因为前一个而有所不同。 与排队类似。例如学生在食堂买饭，只有等前边同学买完才能轮到自己。 客户端向服务器端发送请求，必须等待结果返回，才能向服务端再次发送请求。 异步交互 所谓异步交互，就是指指发送一个请求，不需要等待返回，随时可以再发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果，而异步交互不需要等待。 异步交互相比同步交互的优势主要具有以下几点 用户操作无须像同步交互必须等待结果。 异步交互只需与服务器端交換必要的数据内容，而不是将所有数据全部更新。 异步交互对带宽造成的压力相比同步交互更小。 通过Aja实现异步交互不需要任何第三方插件，只要浏览器支持Javascript语言即可实现。 异步交互相比同步交互井不是优势，它也存在一些问题 异步交互破坏了浏览器原有的前进和后退机制。 如果后面逻辑的行依靠前面逻辑行的结果的话，异步交互可能会造成问题。 Aja×实现异步交互对搜索引擎支持较弱。 Ajax实现异步交互会引起一些Web安 ...
