澄海建网站,wordpress 代码,阜阳网站建设价格,成都网站开发AJAX 的使用
核心对象#xff1a;XMLHttpRequest#xff0c;AJAX 的所有操作都是通过该对象进行的。
1. 使用步骤 创建 XMLHttpRequest 对象 var xhr new XMLHttpRequest(); 设置请求信息
xhr.open(method, url);//可以设置请求头#xff0c;一般不设置
xhr.setReques…AJAX 的使用
核心对象XMLHttpRequestAJAX 的所有操作都是通过该对象进行的。
1. 使用步骤 创建 XMLHttpRequest 对象 var xhr new XMLHttpRequest(); 设置请求信息
xhr.open(method, url);//可以设置请求头一般不设置
xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);发送请求 xhr.send(body) //get 请求不传 body 参数只有 post 请求使用 接收响应
//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange function (){if(xhr.readyState 4 xhr.status 200){var text xhr.responseText;console.log(text);}
}2. AJAX 请求状态
xhr.readyState 可以用来查看请求当前的状态readyState
readystate是xhr对象中的属性表示状态0, 1, 2, 3, 4
0: 表示 XMLHttpRequest 实例已经生成但是 open()方法还没有被调用。1: 表示 send()方法还没有被调用仍然可以使用 setRequestHeader()设定 HTTP请求的头信息。2: 表示 send()方法已经执行并且头信息和状态码已经收到。3: 表示正在接收服务器传来的 body 部分的数据。4: 表示服务器数据已经完全接收或者本次接收已经失败了
3. AJAX发送GET请求
需求点击按钮向服务端发送请求把从服务端返回的响应体结果在文本框里面展示出来在div里面做一个呈现
3.1 GET.html
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleAJAX GET 请求/titlestyle#result {width: 200px;height: 100px;border: solid 1px #90b;}/style
/head
bodybutton idresult1点击发送请求/buttondiv idresult/divscript// 获取button元素const btn document.getElementById(result1);const result document.getElementById(result);// 绑定事件btn.onclick function () {// 1. 创建 XMLHttpRequest 对象const xhr new XMLHttpRequest();// 2. 初始化 设置请求方法和 urlxhr.open(GET, http://127.0.0.1:8000/server);// 发送请求xhr.send();// 4. 事件绑定 处理服务端返回的结果xhr.onreadystatechange function () {// 判断服务端返回了所有的结果if(xhr.readyState 4) {// 判断响应状态码 200 404 403 401 500// 2xx 成功if (xhr.status 200 xhr.status 300) {// // 处理结果 行 头 空行 体// // 1. 响应行// console.log(xhr.status); // 状态码// console.log(xhr.statusText); // 状态字符串// console.log(xhr.getAllResponseHeaders()); // 所有响应头// console.log(xhr.response); // 响应体// 设置 result 的文本result.innerHTML xhr.response;}}}}/script
/body
/html3.2 server.js
// 1. 引入express
const express require(express);// 2. 创建应用对象
const app express();// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get(/server, (request, response) {// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *);// 设置响应体response.send(Hello AJAX);
});// 4. 监听端口启动服务
app.listen(8000, () {console.log(服务已经启动, 8000 端口监听中....);
});3.3 AJAX设置GET请求参数
直接在url后面用?分割然后加参数的名与值如果有多个参数就用分开
4. AJAX发送POST请求
需求鼠标光标移进文本框就会向服务端发送请求服务端返回结果然后把结果在该框中做一个呈现
4.1 POST.html
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleAJAX POST 请求/titlestyle#result {width: 200px;height: 100px;border: solid 1px #903;}/style
/head
bodydiv idresult/divscript// 获取元素对象const result document.getElementById(result);// 绑定事件result.addEventListener(mouseover, function () {// 1. 创建对象const xhr new XMLHttpRequest();// 2. 初始化 设置类型 与URLxhr.open(POST, http://127.0.0.1:8000/server);// 3. 发送xhr.send(a100);// 4. 事件绑定xhr.onreadystatechange function () {// 判断if (xhr.readyState 4) {// 判断状态码if (xhr.status 200 xhr.status 300) {// 处理服务端返回的结果result.innerHTML xhr.response;}}}})/script
/body
/html4.2 server.js
// 1. 引入express
const express require(express);// 2. 创建应用对象
const app express();// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装app.post(/server, (request, response) {// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *);// 设置响应体response.send(Hello AJAX POST);
});// 4. 监听端口启动服务
app.listen(8000, () {console.log(服务已经启动, 8000 端口监听中....);
});4.3 post设置参数
直接在send里面设置参数可以自己设置格式只要服务端能够处理
5. 设置请求头信息
设置预设头信息
xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);设置自定义头信息
xhr.setRequestHeader(name, 123);// node.js设置
//请求类型改为all
app.all// 设置可接收自定义请求
response.setHeader(Access-Control-Allow-Headers, *);6. 服务端响应JSON数据
需求按下键盘上的任意按键就会向服务端发送请求服务端返回结果然后把结果在div中做一个呈现
6.1 处理json数据 因为响应体只能发送字符串我们可以先在服务端把要响应的数据对其进行字符串转换之后再将其发送 在客户端处理数据有两种方法一是手动处理二是自动处理用的多 手动处理将接受到的字符串进行json格式的转换let data JSON.parse(xhr.response); 自动处理在前面设置好响应体的数据类型xhr.responseType json;后面直接用该数据就行
6.1 JSON.html
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJSON响应/titlestyle#result {width: 200px;height: 100px;border: solid 1px #903;}/style/head
bodydiv idresult/divscript// 获取元素对象const result document.getElementById(result);// 绑定键盘按下事件window.onkeydown function () {// 1. 创建对象const xhr new XMLHttpRequest();// 设置响应体数据的类型自动转换xhr.responseType json;// 2. 初始化 设置类型 与URLxhr.open(GET, http://127.0.0.1:8000/json-server);// 3. 发送xhr.send();// 4. 事件绑定xhr.onreadystatechange function () {// 判断if (xhr.readyState 4) {// 判断状态码if (xhr.status 200 xhr.status 300) {// 处理服务端返回的结果// console.log(xhr.response);// result.innerHTML xhr.response;// 处理数据第一种方法手动对数据转换// let data JSON.parse(xhr.response);// result.innerHTML data.name;// 处理数据第二种方法自动转换console.log(xhr.response);result.innerHTML xhr.response.name;}}}}/script
/body
/html6.2 server.js
// 1. 引入express
const express require(express);// 2. 创建应用对象
const app express();// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装app.all(/json-server, (request, response) {// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *);// 响应头response.setHeader(Access-Control-Allow-Headers, *);// 响应一个数据const data {name:张三};// 对对象进行字符串转换let str JSON.stringify(data);// 设置响应体response.send(str);
});// 4. 监听端口启动服务
app.listen(8000, () {console.log(服务已经启动, 8000 端口监听中....);
});7. nodemon自动重启工具安装
每次修改js文件都需要停掉服务重新启动比较麻烦这个工具会在检测到js文件修改后自动重启服务
7.1 nodemon的安装
停掉服务ctrl c终端输入npm install -g nodemon进行nodemon的安装
7.2 nodemon启动服务
启动服务nodemon server.js后面只要该文件server.js被修改服务会自动重新启动
8. 解决 IE 缓存问题
IE缓存问题IE浏览器会对AJAX的一个请求结果做一个缓存会导致一个问题下一次发送请求的时候走得是本地的缓存而非服务器返回的最新数据在一些时效性比较强的场景ajax缓存会影响我们的结果它不能够正常去显示问题在一些浏览器中(IE),由于缓存机制的存在ajax 只会发送的第一次请求剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。解决方式浏览器的缓存是根据 url 地址来记录的所以我们只需要修改 url 地址即可避免缓存问题。我们给url后面加一个“获取当前时间的时间戳”因为时间不同所以url不同浏览器会认为这是两次不同的请求这个时候客户端会发送一个新的请求而非走本地缓存 xhr.open(get,/testAJAX?tDate.now());
8.1 IE缓存问题.html
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleIE缓存问题/titlestyle#result {width: 200px;height: 100px;border: solid 1px #258;}/style
/head
bodybutton点击发送请求/buttondiv idresult/divscriptconst btn document.getElementsByTagName(button)[0];const result document.querySelector(#result);btn.addEventListener(click, function(){console.log(test);const xhr new XMLHttpRequest();xhr.open(GET, http://127.0.0.1:8000/ie?t Date.now());xhr.send();xhr.onreadystatechange function() {if (xhr.readyState 4) {if (xhr.status 200 xhr.status 300) {result.innerHTML xhr.response;}}}})/script
/body
/html8.2 server.js
// 1. 引入express
const express require(express);// 2. 创建应用对象
const app express();// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装// 针对IE缓存
app.get(/ie, (request, response) {// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *);// 设置响应体response.send(Hello IE);
});// 4. 监听端口启动服务
app.listen(8000, () {console.log(服务已经启动, 8000 端口监听中....);
});9. 请求超时与网络异常处理
通过ajax给超时做一个设置来及时给客户做一个提醒并且在网络异常的时候也给用户来一个友好的提醒
如果2s后还没有返回结果就来一个提醒告诉客户网络超时请稍后重试如果网络异常则返回一个提醒
9.1 超时与网络异常.html
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title超时与网络异常/titlestyle#result {width: 200px;height: 100px;border: solid 1px #90b;}/style
/head
bodybutton点击发送请求/buttondiv idresult/divscript// 获取元素对象const btn document.getElementsByTagName(button)[0];const result document.getElementById(result);// 绑定事件btn.addEventListener(click, function () {// 1. 创建对象const xhr new XMLHttpRequest();// 超时设置 2s 设置xhr.timeout 2000;// 超时回调xhr.ontimeout function () {result.innerHTML 请求超时;}// 网络异常xhr.onerror function () {alert(网络异常);}// 2. 初始化 设置类型 与URLxhr.open(GET, http://127.0.0.1:8000/delay);// 3. 发送xhr.send();// 4. 事件绑定xhr.onreadystatechange function () {// 判断if (xhr.readyState 4) {// 判断状态码if (xhr.status 200 xhr.status 300) {// 处理服务端返回的结果result.innerHTML xhr.response;}}}})/script
/body
/html9.2 server.js
// 1. 引入express
const express require(express);// 2. 创建应用对象
const app express();// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装// 延时响应
app.get(/delay, (request, response) {// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *);// 延时响应setTimeout(() {response.send(延时响应);}, 3000);
});// 4. 监听端口启动服务
app.listen(8000, () {console.log(服务已经启动, 8000 端口监听中....);
});9.3 断网测试 10. 取消请求
通过代码手动取消请求statuspending是处于发送过程中statuscancel是取消发送
10.1 取消请求.html
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthq, initial-scale1.0title取消请求/title
/head
bodybutton点击发送/buttonbutton点击取消/buttonscript// 获取元素对象const btns document.querySelectorAll(button);let x null;// const controller new AbortController();btns[0].onclick function() {const x new XMLHttpRequest();x.open(GET, http://127.0.0.1:8000/cancel);x.send();}// abortbtns[1].onclick function() {// controller.abort();x.abort();}/script
/body
/html10.2 server.js
// 1. 引入express
const express require(express);// 2. 创建应用对象
const app express();// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装// 取消请求
app.get(/cancel, (request, response) {// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *);// 取消请求setTimeout(() {response.send(取消请求);}, 3000);
});// 4. 监听端口启动服务
app.listen(8000, () {console.log(服务已经启动, 8000 端口监听中....);
});11. 请求重复发送问题
解决办法 当点击发送第二个相同的请求的时候把第一个请求取消掉
解决步骤
定义一个标识变量isSending为false修改isSending为true表示发送请求当readyState为4的时候表示请求完成修改isSending为false连续发送请求但是此时的isSending还是true所以取消该请求重新发送如果连续发送请求都会取消上一个发送的请求来保证只有一个请求发出减少服务器压力
11.1 重复请求问题.html
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthq, initial-scale1.0title取消请求/title
/head
bodybutton点击发送/buttonscript// 获取元素对象const btns document.querySelectorAll(button);let x null;// 标识变量let isSending false; // 是否正在发送Ajax请求// const controller new AbortController();btns[0].onclick function() {// 判断标识变量if (isSending) x.abort(); // 如果正在发送Ajax请求则取消请求创建一个新的请求// 修改 标识变量的值isSending true;x new XMLHttpRequest();x.open(GET, http://127.0.0.1:8000/cancel);x.send();x.onreadystatechange function() {if (x.readyState 4) {// 修改标识变量isSending false;}}}/script
/body
/html11.2 server.js
// 1. 引入express
const express require(express);// 2. 创建应用对象
const app express();// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装// 重复请求
app.get(/cancel, (request, response) {// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *);// 取消请求setTimeout(() {response.send(重复请求);}, 3000);
});// 4. 监听端口启动服务
app.listen(8000, () {console.log(服务已经启动, 8000 端口监听中....);
});
