国外网站 设计,wordpress采集豆瓣插件,pyhton可以做网站吗,百度移动权重目录
一、原生Ajax
1.1 Ajax简介
1.2 XML简介
1.3 AJAX 的特点
1.3.1 AJAX的优点
1.3.2 AJAX 的缺点
1.4 AJAX 的使用
1.4.1AJAX的基本操作
1.4.2AJAX的传参
1.4.3 AJAX的post请求及设置请求体
1.4.4 AJAX响应json数据
1.4.5 AJAX请求超时与网络异常处理
1.4.5 AJ…目录
一、原生Ajax
1.1 Ajax简介
1.2 XML简介
1.3 AJAX 的特点
1.3.1 AJAX的优点
1.3.2 AJAX 的缺点
1.4 AJAX 的使用
1.4.1AJAX的基本操作
1.4.2AJAX的传参
1.4.3 AJAX的post请求及设置请求体
1.4.4 AJAX响应json数据
1.4.5 AJAX请求超时与网络异常处理
1.4.5 AJAX取消请求
1.4.5 AJAX重复发送请求解决
二、Ajax-jquery
2.1引入jQuery
2.2创建前端界面
2.3发送请求
三、Ajax-Axios
3.1引入axios的cdn链接
3.2 axios发送get请求
3.2 axios发送请求通用方法
四、跨域
4.1 同源策略
4.2 如何解决跨域
4.2.1 JSONP
4.2.2 CORS 一、原生Ajax
1.1 Ajax简介
Ajax全称为Asynchronous Javascript And XML即异步JS和XML通过Ajax可以在浏览器中向服务器发送异步请求最大的优势无刷新获取数据AJAX不是新的编程语言而是一种将现有的标准组合在一起使用的新方式
1.2 XML简介
XML可扩展标记语言XML被设计用来传输和存储数据XML和HTML类似不同点HTML中都是预定义标签XML中没有预定义标签全是自定义标签用来表示一些数据现在已被JSON取代
1.3 AJAX 的特点
1.3.1 AJAX的优点
可以无刷新页面与服务端进行通信允许你根据用户事件来更新部分页面内容
1.3.2 AJAX 的缺点
没有浏览历史不能回退存在跨域问题同源SEO不友好爬虫获取不到信息
1.4 AJAX 的使用
1.4.1AJAX的基本操作
在开始使用前先创建两个文件test.html和test.js分别作为前端和后端。
首先通过nodejsexpress搭建后端服务为方便测试可安装nodemon
//安装express npm i express//导入express
const express require(express)
//创建应用对象
const appexpress()//创建路由规则
app.get(/server,(req,res){res.send(你好)
})//监听端口启动服务
app.listen(8000,(){console.log(服务器启动);
})
前端界面准备
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle#result{width: 200px;height: 100px;border: solid 1px #90b;}/style/headbodybutton点击发送请求/buttondiv idresult/div/body
/html
页面如下 现要实现点击按钮后获取服务器请求数据代码如下
script//获取元素const btndocument.getElementsByTagName(button)[0]const resultdocument.getElementById(result)//绑定事件btn.onclickfunction(){//创建对象const xhrnew XMLHttpRequest();//初始化 设置请求方法和urlxhr.open(GET,http://127.0.0.1:8000/server)//发送xhr.send()//事件绑定处理服务端返回的结果//readystate 是xhr对象属性状态为0,1,2,3,44为服务器返回所有结果xhr.onreadystatechangefunction(){//判断服务器返回了所有结果if(xhr.readyState4){//判断状态码if(xhr.status200xhr.status300){//xhr.status为响应状态码 xhr.statusText 状态字符串 xhr.response 响应体result.innerHTMLxhr.response}}}}/script
1.4.2AJAX的传参
xhr.open(GET,http://127.0.0.1:8000/server?a1b2)
1.4.3 AJAX的post请求及设置请求体
xhr.open(POST,http://127.0.0.1:8000/server)
//设置请求体
xhr.send(a1b2)
//设置请求头
xhr.setRequestHeader(content-Type,application/x-www-form-urlencoded)
//设置自定义请求头
xhr.setRequestHeader(name,xiaozhang)//在服务器端加上
//接受自定义请求头
res.setHeader(Access-Control-Allow-Headers,*)
1.4.4 AJAX响应json数据
服务器端
//创建路由规则
app.get(/server,(req,res){//设置响应头 允许跨域res.setHeader(Access-Control-Allow-Origin,*)//接受自定义请求头// res.setHeader(Access-Control-Allow-Headers,*)const data{name:张,age:18}//将数据转化为字符串let strJSON.stringify(data)res.send(str)
})
前端
result.innerHTMLJSON.parse(xhr.response).name
1.4.5 AJAX请求超时与网络异常处理
//超时设置 超过两秒取消请求xhr.timeout 2000 //单位毫秒//超时回调xhr.ontimeoutfunction(){console.log(网络超时);}//网络异常回调xhr.onerrorfunction(){console.log(网络异常);}
1.4.5 AJAX取消请求
//取消请求
xhr.abort()
1.4.5 AJAX重复发送请求解决 script//获取元素const btndocument.getElementsByTagName(button)[0]const resultdocument.getElementById(result)//是否正在发送AJAX请求let isSendingfalse//绑定事件btn.onclickfunction(){//判断标识变量if(isSending){xhr.abort()}//创建对象const xhrnew XMLHttpRequest();isSendingtrue //初始化 设置请求方法和urlxhr.open(GET,http://127.0.0.1:8000/server)//设置请求头xhr.setRequestHeader(content-Type,application/x-www-form-urlencoded)// xhr.setRequestHeader(name,xiaozhang)//发送xhr.send(a1b2)//事件绑定处理服务端返回的结果//readystate 是xhr对象属性状态为0,1,2,3,44为服务器返回所有结果xhr.onreadystatechangefunction(){//判断服务器返回了所有结果if(xhr.readyState4){isSendingfalse//判断状态码if(xhr.status200xhr.status300){//xhr.status为响应状态码 xhr.statusText 状态字符串 xhr.response 响应体//获取字符串中name值result.innerHTMLJSON.parse(xhr.response).name}}}}/script 二、Ajax-jquery
2.1引入jQuery
百度输入bootcdn搜索输入jQuery复制cdn链接进行引入
2.2创建前端界面
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle#result{width: 200px;height: 100px;border: solid 1px #90b;}/stylescript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/script/headbodyh2jQuery发送请求/h2buttonGET/buttonbuttonpost/buttonbutton通用型方法/buttondiv idresult/div/bodyscript/script
/html 2.3发送请求
script//绑定事件//发送get请求$(button).eq(0).click(function(){//发送请求$.get(http://127.0.0.1:8000/server,{a:100,b:20},function(data){console.log(data);},json) //若加上json代表返回数据为json格式})//发送post请求$(button).eq(1).click(function(){//发送请求$.post(http://127.0.0.1:8000/server,{a:100,b:20},function(data){console.log(data);},json) //若加上json代表返回数据为json格式})//通用方法发送请求$(button).eq(2).click(function(){//发送请求$.ajax({url:http://127.0.0.1:8000/server,//参数data:{a:100,b200},//方法type:GET,//响应体结果dataTypejson.//超时时间timeout2000//成功回调success:function(data){console.log(data);}//失败回调errorfunction(data){console.log(data);}})})/script 三、Ajax-Axios
3.1引入axios的cdn链接
script srchttps://cdn.bootcdn.net/ajax/libs/axios/1.7.3/axios.js/script
3.2 axios发送get请求
script//获取元素const btndocument.getElementsByTagName(button)const resultdocument.getElementById(result)//配置 baseURLaxios.default.baseURLhttp://127.0.0.1:8000//绑定事件btn[0].onclickfunction(){//get请求axios.get(/server,{//参数params:{id:100},}).then((data){console.log(data);})}/script
3.2 axios发送请求通用方法
//通用方法请求btn[2].onclickfunction(){axios({method:GETurl:/server,params:{id:10},//请求体参数data:{username:admin,password:admin}}).then((data){console.log(data);})}
四、跨域
4.1 同源策略
同源策略Same-Origin Policy最早由 Netscape 公司提出是浏览器的一种安全策略。
同源协议、域名、端口号 必须完全相同
违背同源策略就是跨域
4.2 如何解决跨域
4.2.1 JSONP JSONP是什么 JSONP (JSON with Padding)是一个非官方的跨域解决方案纯粹凭借程序员的聪明才智开发出来只支持get请求 JSONP 怎么工作的 在网页有一些标签天生具有跨域能力比如img, link, iframe, script JSONP就是利用script标签的跨域能力来发送请求的 JSONP的使用 动态的创建一个script标签var script document.createElement(script); 设置script的src设置回调函数script.src http://locallhost:3000/textAJAX?callbackabc
4.2.2 CORS
推荐阅读
跨域资源共享 CORS 详解 - 阮一峰的网络日志https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS CORS是什么 CORS (Cross-Origin Resource Sharing), 跨域资源共享。CORS 是官方的跨域解决方案它的特点是不需要在客户端做任何特殊的操作完全在服务器中进行处理支持 get 和 post 等请求。跨域资源共享标准新增了一组 HTTP 首部字段响应头允许服务器声明哪些源站通过浏览器有权限访问哪些资源 CORS怎么工作的 CORS 是通过设置一个响应头来告诉浏览器该请求允许跨域浏览器收到该响应以后就会对响应放行。 CORS 的使用 主要是服务端的设置 rounter.get(/testAJAX,function(req, res){})
