Ajax学习记录

URL

地址组成：客户端与服务器之间的通信协议
存有该资源的服务器名称
资源在服务器上具体的存放位置

客户端与服务器通信过程

请求-处理-相应

资源的请求方式

get请求用于获取服务器端资源
post用于向服务器提交数据

什么是Ajax

Ajax的全称为Asynchronous Javascript And XML（异步Javascript和XML）
在网页中使用XMLHttpRequest对象和服务器进行数据交互的方式，就是ajax
ajax可以实现网页和服务器之间的数据交互

jQuery中Ajax常用的三种方法

$.get()

用来发起get请求，将服务器上的资源请求到客户端来使用

函数语法：$.get(url,[data],[callback])

参数名	参数类型	是否必选	说明
url	string	是	要请求的资源地址
data	object	否	请求资源间携带的参数
callback	function	否	成功时的回调函数

$.post()

用来发起post请求，向服务器提交数据

函数语法：$.post(url,[data],[callback])

参数名	参数类型	是否必选	说明
url	string	是	提交数据的地址
data	object	否	要提交的数据
callback	function	否	成功时的回调函数

$.ajax()

功能比较综合，可以对Ajax请求进行更加详细的配置

函数语法：

   $ajax({type: '', //请求的方式 get / posturl: '', //请求的url地址data: {}, //请求携带的数据success: function(res){} //成功的回调函数})

接口文档

接口文档的组成部分
- 接口名称：用来标识各个接口的简单说明
- 接口URL：接口的调用地址
- 调用方式：接口的调用方式
- 参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明 4项内容
- 响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明 3项内容
- 返回示例（可选）：通过对象的形式，例举服务器返回数据的结构

XMLHttpRequest

什么是XMLHttpRequest

XMLHttpRequest（简称xhr）是浏览器提供的JavaScript对象，可以请求服务器上的数据资源，jQuery中的Ajax函数，就是基于xhr对象封装的

xhr对象的readyState属性

表示当前ajax请求所处的状态

状态表：

值	状态	描述
0	unsent	XMLHttpRequest对象已被创建，还未调用open方法
1	opened	open方法已被调用
2	headers_received	send方法被调用，响应头被接收
3	loading	数据接收中，response属性已经包含部分数据
4	done	ajax请求完成，数据传输完成或失败

发起get请求

若发起带参数的get请求，需要在open方法内为url地址指定参数，这种在url地址后面拼接的参数，称为 查询字符串 ,若想使用多个参数，用&符号分割
例：

var xhr = new XMLHttpRequest();
xhr.open("GET", "");
xhr.send();
xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);}
}

发起post请求

与get请求相比，需设置Content-Type属性
例：

var xhr = new XMLHttpRequest();
xhr.open("POST", "");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send();
xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);}
}

编码和解码

URL 编码是将 URL 中不可打印的字符或具有特殊含义的字符转换为 Web 浏览器和服务器普遍接受的字符的过程

编码：encodeURI()

var str = '我爱学习';
var encode = encodeURI(str);
console.log(encode); //%E6%88%91%E7%88%B1%E5%AD%A6%E4%B9%A0

解码：decodeURI()

var code = '%E6%88%91%E7%88%B1%E5%AD%A6%E4%B9%A0';
var decode = decodeURI(code);
console.log(decode); //我爱学习

注意事项：浏览器会自动对URL进行编码操作，大多数情况下不需要关心URL地址的编码与解码

数据交换格式

数据交换格式是服务器端与客户端之间进行数据传输与交换的格式
经常提及的数据交换格式为JSON和XML，后者用的很少

XML

XML全称为：EXtensible Markup Language 可扩展标记语言
xml用来传输和存储数据，是数据的载体

JSON

概念：全称为：JavaScript Object Notation JavaScript对象表示法；JSON是 JavaScript对象和数组的字符串 表示法，使用文本表示一个JS对象或数组的信息，JSON的本质为字符串
作用：JSON是一种轻量级的文本数据交换格式，专门用于存储和传输数据，比xml更小更快更易解析
JSON包含对象和数组两种结构：
- 对象结构：{}括起来的内容，数据结构为{key:value, …}，JSON中所有字符串使用""，value的数据类型可以为数字、字符串 、布尔值 、null 、数组、对象 6种类型
- 数组结构：[]括起来的内容，数组中的数据类型可以为数字、字符串 、布尔值 、null 、数组、对象 6种类型
注意事项：
- 属性名必须使用双引号
- 字符串类型必须使用双引号
- 不能使用undefined或函数作为JSON的值
- JSON中不能写注释
示例：
var json = '{"name": "a", "age": 18}'
JSON和js对象的互换
- JSON.parse()将字符串转换为对象，把数据对象转换为字符串的过程叫做序列化
- JSON.stringify()将对象转为字符串，把字符串转为数据对象的过程叫做反序列化

XMLHttpRequest Level2

新特性：比起之前的版本，XMLHttpRequest Level2新增了以下功能：

可以设置HTTP请求的时限
可以使用FormData对象管理表单数据
可以上传文件
可以获得数据传输的进度信息

设置http请求时限

xhr.timeout = xxx设置http的请求时限
xhr.ontimeout = function(){}设置回调函数

FormData对象管理表单数据

var fd = new FormData()创建一个FormData实例
fd.append()通过调用append向fd中添加数据，以键值对的形式保存
可以利用FormData获取表单中的信息来实现ajax
上传文件

显示文件上传进度

可以通过监听xhr.upload.onprogress事件，来获取文件的上传进度
例：

var xhr = new XMLHttpRequest();
//监听xhr.upload的onprogress事件
xhr.upload.onprogress = function(e){//e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度if(e.lengthComputable){// e.loaded 已传输的字节// e.total 需传输的字节var percentComplete = Math.ceil((e.loaded/e.total) * 100);}
}

通过xhr.upload.onload事件可以设置文件上传完成后的内容

axios

什么是axios？
axios是专注于网络数据请求的库，相比于原生XMLHttpRequest对象，axios简单易用；相比于jQuery，axios更加轻量化，只专注于网络数据请求
导入axios.js包
发起get请求:
axios.get('url',{params:{/*参数*/}}).then(callback)
发起post请求：
axios.post('url',{/*参数*/}).then(callback)

直接发起请求：

axios({method: 'GET', //'POST'url: '',params: {}, //getdata: {} //post
}).then(function(res){console.log(res.data)
})

同源策略和跨域

同源

页面的协议、域名和端口都相同，则具有相同的源
同源策略：(Same origin policy)是浏览器提供的一个安全功能
MDN官方的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互，这是一个用于隔离潜在恶意文件的重要安全机制（即不允许非同源的网站之间进行资源的交互）
- 无法读取非同源网页的cookie、LocalStorage和IndexedDB
- 无法接触非同源网页的DOM
- 无法向非同源地址发送ajax请求

跨越

页面的协议、域名或端口不相同
浏览器允许发起跨域请求，但跨域请求回来的数据会被浏览器拦截，无法被页面获取
如何实现跨域请求？
- JSONP ：出现的早，兼容好，是一种临时解决方案，缺点是只支持get请求，不支持post请求
- CORS ：出现较晚，是W3C标准，属于跨域AJAX请求的根本解决方案，支持get和post请求，缺点是不兼容低版本浏览器

JSONP

实现原理：利用

防抖和节流

防抖

防抖策略：如果事件被频繁触发，防抖可以保证只有最后一次生效
可以运用在搜索等，规定多少秒后再发起请求，不至于每一次的数据改变都要向服务器发起请求，等到最后确定结果再发起请求，减轻服务器的负担

节流

节流策略：减少事件触发的频率，有选择性地执行一部分事件
减少请求，减轻压力

ajax学习记录总结相关推荐

Asp.net中的AJAX学习记录之一 AJAX技术的崛起与Asp.net AJAX的诞生
最近开始学习Asp.net中的AJAX,可能我的高手朋友们会说:"走还不稳呢!怎么就想学跑了?"呵呵!主要是我在做项目中体会到AJAX真的是很好的一门技术,应该好好的学习一下, ...
尚硅谷ajax学习记录
AJAX Ajax即Asynchronous Javascript And XML(异步JavaScript和XML) 环境搭建安装node.js C:\Users\xlgui>node -v ...
gradle 上传jar包_Gradle学习记录014 关于依赖的声明
详细学习Gradle构建的依赖声明.该学习记录基于Gradle官方网站资料.本篇参考链接如下: https://docs.gradle.org/current/userguide/declaring_ ...
react基础学习记录一
react 学习记录自己学习,记录便于后面回顾基础知识点的记忆: state与props state是组件自己的数据,而props是父组件通过属性赋值方式将其传送给组件:这样达到了,父子组件数据的 ...
LRS+XAPI教育学习记录（安装lrs，以及用xapi传输数据到lrs）
此LRS團隊出了最新版的LRS,是node寫的.運行速度是本文寫的這個版本的無數倍,待我整理好再發出來. 关于lrs跟xapi国内基本用的少,质料基本都是英文的,中文的也就只有繁体的一些少少的资料.新 ...
前端逻辑练习题+学习记录不定期更新
编程题 1.返回数组中最大的数字(reduce函数) largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1 ...
【VUE】学习记录一
[VUE]学习记录学习视频为:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 1.查询vue知识点: https://v2.cn.vuejs.org/ 2. 下载和引入 2.1 下 ...
ajax 学习第四天
ajax 学习第四天文章目录 ajax 学习第四天 1. 同源策略 1.1 同源 1.2 同源策略 2. 跨域 2.1 跨域拦截 2.2 实现跨域数据请求 3. JSONP 3.1 JSONP 实现 ...
TypeScript学习记录
TypeScript学习记录 vscode设置自动编译首先使用tsc --init 生成tsconfig.json配置文件 (可以根据需要修改设置) 终端->运行任务->typescri ...

ajax学习记录总结

Ajax学习记录

URL

客户端与服务器通信过程

资源的请求方式

什么是Ajax

jQuery中Ajax常用的三种方法

$.get()

$.post()

$.ajax()

接口文档

XMLHttpRequest

什么是XMLHttpRequest

xhr对象的readyState属性

发起get请求

发起post请求

编码和解码

数据交换格式

XML

JSON

XMLHttpRequest Level2

设置http请求时限

FormData对象管理表单数据

axios

同源策略和跨域

同源

跨越

JSONP

防抖和节流

防抖

节流

ajax学习记录总结相关推荐

最新文章

热门文章