AJAX学习笔记(基本使用,请求参数传递,获取服务端响应,错误处理,低版本IE浏览器缓存问题及解决)
1. Ajax实现步骤
创建ajax对象
let xhr = new XMLHttpRequest();
告诉ajax请求地址及请求方式
xhr.open('get','http://www.example.com');
发送请求
xhr.send();
获取服务器端与客户端的响应数据
xhr.onload = ()=>{console.log(xrh.responseText) }
服务器端响应的数据格式
真实项目中,服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到响应数据时,要将JSON数据和HTML字符串进行拼接,然后将拼接的结果展示在页面中。
在http请求与响应的过程中,无论是请求参数还是响应内容,如果是对象类型,最终都会被转换为对象字符串进行传输。
使用:
JSON.parse(); //将json字符串转化为json对象
2. 请求参数传递
1)传统网站表单提交
<form action="http://www.example.com" method="GET"><input type="text" name="uname"><input type="password" name="pwd"></form><!-- 此时的请求地址:http://www.example.com?uname=jack&pwd=1234 -->
2)GET请求方式
xhr.open('get','http://www.example.com?uname=jack&pwd=1234')
3)POST请求方式
//设置请求参数格式的类型
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send('uname=jack&pwd=1234');
请求报文:
请求参数的格式:
1)application/x-www-form-urlencoded
uname=jack&age=20
2)application/json
{name:'jack',age:'20'}
在请求头中指定Content-type属性的值是application/json,告诉服务器端当前请求参数的格式是json。
JSON.stringfy(); //将json对象转化为json字符串
参考:Ajax对象的属性、方法
火狐开发者文档:
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
属性
**readyState: Ajax状态码 **
0:表示对象已建立,但未初始化,只是 new 成功获取了对象,但是未调用open方法
1:表示对象已初始化,但未发送,调用了open方法,但是未调用send方法
2:已调用send方法进行请求
3:正在接收数据(接收到一部分),客户端已经接收到了一部分返回的数据
**4:接收完成,客户端已经接收到了所有数据 * **status :http响应状态码
200代表成功获取服务器端数据
404未找到页面等等……statusText :http响应状态文本
responseText:如果服务器端返回字符串,使用responseText进行接收
responseXML :如果服务器端返回XML数据,使用responseXML进行接收
onreadystatechange:当 readyState 状态码发生改变时所触发的回调函数
方法
open(method,url,[aycs]):初始化Ajax对象 (打开)
method:http请求方式,get/post
url:请求的服务器地址
aycs:同步与异步setRequestHeader(header,value):设置请求头信息
header :请求头名称
value :请求头的值xhr.getAllResponseHeaders() 获取全部响应头信息
xhr.getResponseHeader(‘key’) 获取指定头信息
send([content]) :发送Ajax请求
content : 如果是get请求时,此参数为null;如果是post请求时,此参数就是要传递的数据
注意: 所有相关的事件绑定必须在调用send()方法之前进行.
3. 获取服务端响应
onreadyStatechange事件
当ajax状态码发发生变化时将自动触发该事件。readyState表示ajax状态码。
let xhr = new XMLHttpRequest();console.log(xhr.readyState);//-> 0 已经创建了ajax对象,但是还没有对ajax对象进行配置xhr.open('get', 'localhost:3000/readystate');console.log(xhr.readyState);//-> 1 已经对ajax对象进行配置,但是还没有发送请求xhr.onreadystatechange = () => {console.log(xhr.readyState);// 2 代表请求已经发送了// 3 代表以及接收到服务器端的部分数据了// 4 服务器端的响应数据已经接收完毕}
4. Ajax错误处理
1)网络畅通,服务器端能接收到请求,服务器端返回的结果不是预期结果。
可以判断服务器端返回的状态码,分别进行处理。xhr.status
获取http状态码。
xhr.onload = ()=>{console.log(xhr.responseText); //接收返回字符串if(xhr.status == 400)alert('请求出错');
}
2)网络畅通,服务器端没有接收到请求,返回404状态码。
检查请求地址是否错误。
3)网络畅通,服务器能够接收到请求,服务器端返回500状态码。
服务器端错误,找后端。
4)网络中断,请求无法发送到服务器。
会触发xhr对象下面的onerror事件,在onerror事件处理函数中对错误进行处理。
xhr.onerror = ()={alert('网络中断,无法请求')
}
低版本IE浏览器缓存问题
问题来源:
在Ajax的get请求中,如果运行在IE内核的浏览器下,其如果向同一个url发送多次请求时,只有第一次请求会真正发送到服务器端,后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了,客户端拿到的依然是缓存中的旧数据。这就是所谓的缓存问题。
缓存问题最早设计初衷是为了加快应用程序的访问速度,但是其会影响Ajax实时的获取服务器端的数据。
解决方案:
产生缓存的问题就是 我们的客户端向同一个 url 发送了多次请求;
如果我们每次请求的url不同,那么,缓存问题就不会存在了;
我们可以在请求地址的后面加上一个无意义的参数,参数值使用随机数即可,
那么每次请求都会产生随机数,URL就会不同,缓存问题就被解决了;
Math.random():返回 0-1 之间的随机数,包括 0 但不包括 1;
修改代码如下:
let url = '03-1.php?names='+inp.value+'&_=' + Math.random();
xhr.open('get',url);
但是,随机数虽然解决了问题,但是,我们不能保证每次生成的随机数都不一样;
也就是说,使用随机数存在一定的隐患;
new Date().getTime() : 获取当前时间的毫秒时间戳
修改代码如下:
let url = '03-1.php?names='+inp.value+'&_='+new Date().getTime();
xhr.open('get',url);
设置响应头禁用客户端缓存
服务器端在相应客户端请求时,可以设置响应头信息,如:
header('Content-type:text/html; charset=utf-8')
:告诉客户端浏览器,使用utf-8的编码格式解析html页面信息。
设置不缓存的响应头标识即可:
//告诉客户端浏览器不要缓存数据
res.setHeader('Cache-Control','no-cache');
AJAX学习笔记(基本使用,请求参数传递,获取服务端响应,错误处理,低版本IE浏览器缓存问题及解决)相关推荐
- 学习AJAX必知必会(2)~Ajax基本使用,设置请求行、请求体、请求头,服务端响应JSON数据
一.Ajax的基本使用 1.核心对象 XMLHttpRequest,AJAX 的所有操作都是通过该对象进行的. 2.发送ajax请求(4个步骤): 创建xhr对象,然后open方法初始化,设置请求方式 ...
- ESP32学习笔记(30)——BLE GATT服务端自定义服务和特征
一.简介 1.1 低功耗蓝牙(BLE)协议栈 链路层(LL) 控制设备的射频状态,有五个设备状态:待机.广播.扫描.初始化和连接. 广播 为广播数据包,而 扫描 则是监听广播. GAP通信中角色,中心 ...
- 客户端请求下载,服务端响应下载请求并返回文件流
工作中遇到这样的需求: 1.A项目提供下载服务 2.B项目封装A项目的下载服务 3.通过B项目来下载文件. 遇到的场景是:只有A服务可以下载文件,这里ip 限制,其他的服务器无法直接下载文件,这里类似 ...
- Ajax学习笔记--- 【xmind 详细展示 浏览器与 服务器端通信,请求与响应报文】
php和express用来做后端,还是express强大和方便!!! 翻看笔记才知道自己当时下载Fiddler,Wampserver,phpstudy_pro是为了什么,实在不敢说自己学过php 文章 ...
- ajax实时获取股票信息,Ajax学习笔记03-模拟动态显示股票信息动态变化的小例子...
模拟实现一个动态显示股票价格的经典例子: 实体类 :Stock.java 由于篇幅问题,此处省略了get Set 方法 /** * Created by IntelliJ IDEA. * User: ...
- Ajax学习笔记-动力节点-王鹤老师
Ajax学习笔记-动力节点-王鹤老师 视频教程来自:https://www.bilibili.com/video/BV15k4y167XM?spm_id_from=333.999.0.0 第一节 全局 ...
- 一、AJAX学习笔记——原生AJAX (ajax简介、XML简介、ajax优缺点、ajax的使用)
第 1 章:原生 AJAX 1.1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML. 通过 AJAX 可以在浏览器中向服 ...
- CTFHUB http协议题目 学习笔记 详细步骤 请求方式 302跳转 cookie 基础认证 响应源代码
CTFHUB http协议题目 学习笔记 详细步骤 请求方式 302跳转 cookie 基础认证 响应源代码 WEB-HTTP协议 1-请求方式 2-302跳转 3.cookie 4.基础认证 5.响 ...
- 阿瑶的ajax学习笔记
1.AJAX简介 AJAX全称为Asynchronous JavaScript And XML,就是异步的 JS 和 XML. 通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势: 无刷新获取 ...
最新文章
- java 继承 注解_在java中实现组合注解原理分析(注解继承)
- 在单元测试时指定HttpContext的各种Path
- 彻底理解乐观锁和悲观锁的区别
- java并发编程线程安全
- 稀疏自编码器_基于tensorflow实现稀疏自编码和在推荐中的应用
- 大学生换学校学计算机,高校换上新课桌,同学表示“世界观被颠覆”,网友:黑科技的诞生...
- php模板引擎如何实现,PHP模板引擎如何实现
- 偶然发现SQL2005中文版里有vs2005中文安装包
- python中findroot_Python源码问题算负数平方根无结果输出何解,python负数,def findRoot...
- 手机通讯加密软件Peerio上架,代码全部开源
- 现代的 “Hello, World”,可不仅仅是几行代码而已
- java注释越多_java 注释+常便量
- Source does not fit in dest
- 数据库设计时设计标识字段的一些思考
- r-cnn 行人检测_了解用于对象检测的快速R-CNN和快速R-CNN。
- 手机照片局部放大镜_往事洗照片
- 找不到局域网计算机网络路径,分享解决Win10局域网找不到网络路径的技巧
- 简单有趣,半小时漫画中国史
- 如何在服务器上配置深度学习环境
- 内江人物--(张大千、骆成骧)秀才、美女、黏鱼