网站开发形式,药品彩页设计,有人看片吗免费观看视频,建设企业网站可信度的具体策略一天拿下 介绍二级目录三级目录 b站链接 介绍
ajax优缺点 http
node.js下载配置好环境
express框架 切换到项目文件夹#xff0c;执行下面两条命令 有报错,退出用管理员身份打开 或者再命令提示符用管理员身份打开
npm init --yes
npm i express请求 script//引… 一天拿下 介绍二级目录三级目录 b站链接 介绍
ajax优缺点 http
node.js下载配置好环境
express框架 切换到项目文件夹执行下面两条命令 有报错,退出用管理员身份打开 或者再命令提示符用管理员身份打开
npm init --yes
npm i express请求 script//引入expressconst express require(express);//创建应用对象const app express();//创建路由规则//request对请求报文的封装//response是对响应报文的封装app.get(/,(request,response){//设置响应response.send(HELLO EXPRESS);});//监听端口启动服务app.listen(8000,(){console.log(服务已经启动8000端口监听中……);});/scriptajax请求
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#result{width: 200px;height: 100px;border: solid 1px #90b;}/style
/head
bodybutton点击发送请求/buttondiv id result/divscriptconst btn document.getElementsByTagName(button)[0];btn.onclickfunction(){// console.log(test);//创建对象const xhr new XMLHttpRequest();const result document.getElementById(result);//初始化 设置请求方法和urlxhr.open(GET,http://127.0.0.1:8000/server);//发送xhr.send();xhr.onreadystatechange function(){//判断服务端返回了所有的结果if(xhr.readyState 4){if(xhr.status 200 xhr.status300){//响应行/* console.log(xhr.status);//状态码console.log(xhr.statusTest);//状态字符串console.log(xhr.getAllResponseHeaders());//所有响应头console.log(xhr.response); */result.innerHTML xhr.response;}else{}}}}/script
/body
/htmlpost请求
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#result{width: 200px;height: 100px;border: solid 1px #90b;}/style
/head
bodydiv idresult/divscriptconst result document.getElementById(result);//绑定事件result.addEventListener(mouseover,function(){//创建对象const xhr new XMLHttpRequest();//初始化 设置类型与URLxhr.open(POST,http://127.0.0.1:8000/server);//发送xhr.send(1234567);//事件绑定xhr.onreadystatechange function(){//判断if(xhr.readyState 4){if(xhr.status200 xhr.status300){//处理服务端返回结果result.innerHTMLxhr.response;}}}})/script
/body
/html//引入express
const express require(express);
//创建应用对象
const app express();//创建路由规则
//request对请求报文的封装
//response是对响应报文的封装
app.get(/server,(request,response){//设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,*);//设置响应体response.send(HELLO EXPRESS);
});
app.post(/server,(request,response){//设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,*);//设置响应体response.send(HELLO AJAX POST);
});//监听端口启动服务
app.listen(8000,(){console.log(服务已经启动8000端口监听中……);
});设置请求头
//设置请求头xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded);xhr.setRequestHeader(name,atguigu);//发送xhr.send(a100 b200 c300);app.all(/server,(request,response){//设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,*);//响应头response.setHeader(Access-Control-Allow-Hearders,*)//设置响应体response.send(HELLO AJAX POST);
});
json数据响应
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#result{width: 200px;height: 100px;border: solid 1px #90b;}/style
/head
bodydiv idresult/divscriptconst result document.getElementById(result);//绑定事件window.onkeydown function(){//创建对象const xhr new XMLHttpRequest();//设置响应体数据类型xhr.responseType json;//初始化 设置类型与URLxhr.open(GET,http://127.0.0.1:8000/json-server);//设置请求头xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded);xhr.setRequestHeader(name,atguigu);//发送xhr.send();//事件绑定xhr.onreadystatechange function(){//判断if(xhr.readyState 4){if(xhr.status200 xhr.status300){console.log(xhe.response);//处理服务端返回结果result.innerHTMLxhr.response.name;}}}}/script
/body
/html//引入express
const express require(express);
//创建应用对象
const app express();//创建路由规则
//request对请求报文的封装
//response是对响应报文的封装
app.get(/server,(request,response){//设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,*);//设置响应体response.send(HELLO AJAX);
});
app.all(/server,(request,response){//设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,*);//响应头response.setHeader(Access-Control-Allow-Hearders,*)//响应一个数据const data {name:atguigu};//对对象进行字符串转换let str JSON.stringify(data);//设置响应体response.send(str);
});//监听端口启动服务
app.listen(8000,(){console.log(服务已经启动8000端口监听中……);
});nodemon 有报错退出软件用管理员身份打开
npm install -g nodemonnodemon server.jsie缓存
scriptconst 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?tDate.now());xhr.send();xhr.onreadystatechange function(){if(xhr.readyState 4){if(xhr.status 200 xhr.status300){result.innerHTML xhr.response;}}}})/script//引入express
const express require(express);
//创建应用对象
const app express();//创建路由规则
//request对请求报文的封装
//response是对响应报文的封装
app.get(/server,(request,response){//设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,*);//设置响应体response.send(HELLO AJAX);
});
app.all(/server,(request,response){//设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,*);//响应头response.setHeader(Access-Control-Allow-Hearders,*)//响应一个数据const data {name:atguigu};//对对象进行字符串转换let str JSON.stringify(data);//设置响应体response.send(str);
});app.all(/json-server,(request,response){//设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,*);//响应头response.setHeader(Access-Control-Allow-Hearders,*)//响应一个数据const data {name:atguigu};//对对象进行字符串转换let str JSON.stringify(data);//设置响应体response.send(str);
});app.get(/ie,(request,response){//设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,*);//设置响应体response.send(HELLO IE);
});
//监听端口启动服务
app.listen(8000,(){console.log(服务已经启动8000端口监听中……);
});超时与网络异常 scriptconst btn document.getElementsByTagName(button)[0];const result document.querySelector(#result);btn.addEventListener(click,function(){// console.log(test);const xhr new XMLHttpRequest();//超时xhr.timeout 2000;//超时回调xhr.ontimeout function(){alert(网络异常请稍后重试)}//网络异常回调xhr.onerror function(){alert(你的网络出现了问题)}xhr.open(GET,http://127.0.0.1:8000/delay);xhr.send();xhr.onreadystatechange function(){if(xhr.readyState 4){if(xhr.status 200 xhr.status300){result.innerHTML xhr.response;}}}})/scriptapp.get(/delay,(request,response){//设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,*);setImmeout((){//设置响应体response.send(延时响应);},3000);});取消请求 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodybutton点击登录/buttonbutton点击取消/buttonscriptconst btns document.querySelectorAll(button);let x null;btns[0].onlick function(){xnew XMLHttpRequest();x.open(GET,http://127.0.0.1:8000/delay);x.send();}btns[1].onlick function(){x.abort();}/script
/body
/html请求重复发送问题
scriptconst btns document.querySelectorAll(button);let x null;btns[0].onlick function(){//判断标识变量if(isSending) x.abort();//如果正在发送则取消该请求创建一个新请求xnew XMLHttpRequest();isSending true;x.open(GET,http://127.0.0.1:8000/delay);x.send();x.onreadystatechangefunction(){if(x.readyState 4){isSending false;}}}btns[1].onlick function(){x.abort();}/script怎么感觉学的迷迷糊糊的…… emo中
我还会回来的……
二级目录
三级目录
