网站运营做seo开发区网站建设方案

当前位置： 首页 > news >正文

网站运营做seo,开发区网站建设方案,网上推广怎么弄?,太原市建站外包公司原生AJAX AJAX全称为Asynchronous JavaScript And XML,就是异步的JS和XML#xff0c;通过AJAX可以在浏览器中向服务器发送异步请求#xff0c;最大的优势#xff1a;无需刷新就可获取数据。 AJAX不是新的编程语言#xff0c;而是一种将现有的标准组合在一起使用的新方式 …原生AJAX AJAX全称为Asynchronous JavaScript And XML,就是异步的JS和XML通过AJAX可以在浏览器中向服务器发送异步请求最大的优势无需刷新就可获取数据。 AJAX不是新的编程语言而是一种将现有的标准组合在一起使用的新方式 XML简介 XML可扩展标记语言。XML被设计用来传输和存储数据。HTML用来呈现数据。XML和HTML类似不同的是HTML中都是预定义标签而XML中没有预定义标签全都是自定义标签用来表示一些数据 比如说有一个学生数据 用XML表示studentname孙悟空/nameage18/agegender男/gender/student XML目前已被JSON取代 AJAX的特点 AJAX的优点 可以无需刷新页面而与服务器端进行通信允许你根据用户事件来更新部分页面内容 AJAX的缺点 没有浏览历史不能回退存在跨域问题同源SEO不友好搜索引擎优化 JS动态创建数据搜索引擎不能搜索到不可通过爬虫找到关键信息 HTTP协议 HTTPhypertext transport protocol协议【超文本传输协议】协议详细规定了浏览器和万维网服务器之间互相通信的规则。 请求报文 重点是格式与参数 行 POST /s?ieutf-8 HTTP/1.1头 Host:atguigu.comCookie:nameguiguContent-type:application/x-www-form-urlencodedUser-Agent:chrome 83 空行体 usernameadmainpasswordadmin如果是GET请求请求体是空的如果是POST请求请求体可以不为空响应报文 行 HTTP/1.1协议版本 200(协议状态码) ok(协议字符串)头 Content-Type:text/html;charsetutf-8Content-length:2048Content-encoding:gzip空行体 htmlheadbodyh1尚硅谷/h1/body/head/html 例如在百度中搜索CSDN点击F12键点击Network刷新页面之后点击第一个链接 点击之后会出现以下几个标签 Preview作为一个响应预览 展示解析之后的界面 Header标签中会展示以下页面 以上就包含了响应头(Response Headers)和请求头(Request Headers) 点击请求头之后会出现请求头的内容但此时没有请求行此时点击view source,就会出现请求行的内容 Header标签中的Query String Parameters为查询字符串对请求行中的url进行解析 响应头同理 响应体在Response里 例如在进行登陆页面时请求体在Form Data中里面会包含用户输入的账号和密码等信息 Express基于Node.js平台快速开放极简的Web开发框架 简单的express框架使用 //1.引入express const expressrequire(express) // 2.创建应用对象 const appexpress() // 3.创建路由规则 // request 是对请求报文的封装 // response 是对响应报文的封装 app.get(/,(request,response){// 设置响应response.send(HELLO EXPRESS) }) // 4.监听端口启动服务 app.listen(8000,(){console.log(服务已经启动8000端口监听中…..) }) 运行此代码时终端效果如下 8000端口则会显示出响应 以下为向响应器发出的请求头和请求行 响应头和响应行如下 响应体 案例 需求点击按钮发送请求之后将响应体的内容显示在页面上页面不刷新 服务准备 //1.引入express const expressrequire(express) // 2.创建应用对象 const appexpress() // 3.创建路由规则 // request 是对请求报文的封装 // response 是对响应报文的封装 // 当客户端浏览器向服务端发送请求时请求行的第二段路径是/server的话就会执行回调函数里面的代码并且由response来作出响应 app.get(/server,(request,response){// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,)// 设置响应体response.send(HELLO AJAX) }) // 4.监听端口启动服务 app.listen(8000,(){console.log(服务已经启动8000端口监听中…..) }) 发送新的请求时需将8000端口释放否则终端会报错提示8000端口已被占用 故要先释放上一次端口才可继续发送请求在node终端中输入ctrlc释放端口即可,node即为上次发送请求的终端在此终端中输入ctrlc即可  html以及js代码 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleAJAX GET请求/titlestyle#result{width: 200px;height: 100px;border: solid 1px #000;}/style /head bodybutton点击发送请求/buttondiv idresult/divscript// 获取button元素const btndocument.getElementsByTagName(button)[0]const resultdocument.getElementById(result)// 绑定事件btn.addEventListener(click,function(){// console.log(test)// 1.创建对象// XHR是对AJAX请求做出一个筛选const xhrnew XMLHttpRequest()// 2.初始化 设置请求方法和URLxhr.open(GET,http://127.0.0.1:8000/server)// 3.发送xhr.send()// 4.事件绑定 处理服务端返回的结果// on when 当…..时候// readystate 是对象中的属性表示状态 // 0表示未初始化 1表示open方法已经调用完毕 2表示send方法已经调用完毕 3表示服务端返回的部分结果 4表示服务端返回的所有结果// change 改变// 该事件总共会触发四次 0-1一次 1-2一次 2-3一次 3-4一次xhr.onreadystatechangefunction(){// 处理服务端返回的结果 当状态为4的时候处理,状态为4已经返回所有结果// 判断(服务端返回了所有的结果)if(xhr.readyState4){// 判断响应状态码 200 404 401 500// 2XX 表示成功if(xhr.status200xhr.status300){// 处理结果 行 头 空行 体// 1.响应行// console.log(xhr.status)//状态码// console.log(xhr.statusText)//状态字符串// console.log(xhr.getAllResponseHeaders())//获取所有响应头// console.log(xhr.response)//响应体// 设置result的文本result.innerHTMLxhr.response}else{}}}})/script /body /html 在AJAX请求中如何设置url参数 在url地址后面添加?参数参数值多个参数中间用隔开 http://127.0.0.1:8000/server?a100b200c300 AJAX POST请求 向8000端口发送POST请求原来的js代码只有get请求故还要添加POST请求代码才可 app.post(/server,(request,response){// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,)// 设置响应体response.send(HELLO AJAX POST) }) !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleAJAXPOST请求/titlestyle#result {width: 200px;height: 100px;border: solid 1px #903;}/style /head bodydiv idresult/divscript// 获取元素对象const resultdocument.getElementById(result)result.addEventListener(mouseover,function(){// console.log(test)// 1.创建对象const xhrnew XMLHttpRequest()// 2.初始化 设置类型与URLxhr.open(POST,http://127.0.0.1:8000/server)// 3.发送xhr.send()// 4.事件绑定xhr.onreadystatechangefunction(){if(xhr.readyState4){if(xhr.status200xhr.status300){// 处理服务器返回的结果result.innerHTMLxhr.response}}}})/script /body /html //1.引入express const expressrequire(express) // 2.创建应用对象 const appexpress() // 3.创建路由规则 // request 是对请求报文的封装 // response 是对响应报文的封装 // 当客户端浏览器向服务端发送请求时请求行的第二段路径是/server的话就会执行回调函数里面的代码并且由response来作出响应 app.get(/server,(request,response){// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,)// 设置响应体response.send(HELLO AJAX) }) app.post(/server,(request,response){// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,)// 设置响应体response.send(HELLO AJAX POST) }) // 4.监听端口启动服务 app.listen(8000,(){console.log(服务已经启动8000端口监听中…..) }) POST传递参数 在send中传入参数 xhr.send(a100b200c300)或xhr.send(a:100b:200c:300) 在AJAX中设置请求头信息 在初始化open之后添加如下代码 // Content-Type设置请求体内容的类型// application/x-www-form-urllencoded参数查询字符串类型xhr.setRequestHeader(Content-Type,application/x-www-form-urllencoded) 设置自定义请求头 app.all(/server,(request,response){// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,)// 响应头response.setHeader(Access-Control-Allow-Headers,) // 表示所有头信息都可以接受// 设置响应体response.send(HELLO AJAX POST) }) 将post改为all表示可以接收任意类型的请求(get post options等) xhr.setRequestHeader(name,atguigu) 实现POST请求完整代码 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleAJAXPOST请求/titlestyle#result {width: 200px;height: 100px;border: solid 1px #903;}/style /head bodydiv idresult/divscript// 获取元素对象const resultdocument.getElementById(result)result.addEventListener(mouseover,function(){// console.log(test)// 1.创建对象const xhrnew XMLHttpRequest()// 2.初始化 设置类型与URLxhr.open(POST,http://127.0.0.1:8000/server)// 设置请求头// Content-Type设置请求体内容的类型// application/x-www-form-urllencoded参数查询字符串类型xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded)xhr.setRequestHeader(name,atguigu)// 3.发送xhr.send(a100b200c300)// xhr.send(a:100b:200c:300)// 4.事件绑定xhr.onreadystatechangefunction(){if(xhr.readyState4){if(xhr.status200xhr.status300){// 处理服务器返回的结果result.innerHTMLxhr.response}}}})/script /body /html //1.引入express const expressrequire(express) // 2.创建应用对象 const appexpress() // 3.创建路由规则 // request 是对请求报文的封装 // response 是对响应报文的封装 // 当客户端浏览器向服务端发送请求时请求行的第二段路径是/server的话就会执行回调函数里面的代码并且由response来作出响应 app.get(/server,(request,response){// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,)// 设置响应体response.send(HELLO AJAX) }) // all表示可以接收任意类型的请求(get post options等) app.all(/server,(request,response){// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,)// 响应头response.setHeader(Access-Control-Allow-Headers,) // 表示所有头信息都可以接受// 设置响应体response.send(HELLO AJAX POST) }) // 4.监听端口启动服务 app.listen(8000,(){console.log(服务已经启动8000端口监听中…..) }) JSON数据的响应以及前端代码的处理 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#result{width: 200px;height: 100px;border: solid 1px #89b;}/style /head bodydiv idresult/divscriptconst resultdocument.getElementById(result)// 绑定键盘按下事件window.onkeydownfunction(){// 发送请求const xhrnew XMLHttpRequest()// 设置响应体数据的类型xhr.responseTypejson// 初始化xhr.open(GET,http://127.0.0.1:8000/json-server)xhr.send()xhr.onreadystatechangefunction(){if(xhr.readyState4){if(xhr.status200xhr.status300){// console.log(xhr.response)// result.innerHTMLxhr.response// 1.手动对数据进行转换// let dataJSON.parse(xhr.response)// console.log(data)// 2.自动转换xhr.responseTypejsonresult.innerHTMLxhr.response.name}}}}/script /body /html //1.引入express const expressrequire(express) // 2.创建应用对象 const appexpress() // 3.创建路由规则 // request 是对请求报文的封装 // response 是对响应报文的封装 // 当客户端浏览器向服务端发送请求时请求行的第二段路径是/server的话就会执行回调函数里面的代码并且由response来作出响应 app.get(/server,(request,response){// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,)// 设置响应体response.send(HELLO AJAX) }) // all表示可以接收任意类型的请求(get post options等) app.all(/json-server,(request,response){// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,)// 响应头response.setHeader(Access-Control-Allow-Headers,) // 表示所有头信息都可以接受// 响应一个数据const data{name:atguigu}// 对对象进行字符串转换let strJSON.stringify(data)// 设置响应体response.send(str)//里面只能接收字符串或者buffer(保存二进制文件数据) }) // 4.监听端口启动服务 app.listen(8000,(){console.log(服务已经启动8000端口监听中…..) }) nodemon重新启动 在终端运行服务器代码时输入nodemon.cmd xxx.js当服务器js代码改变时会自动重新启动不用手动启动 IE浏览器缓存问题 IE浏览器会对AJAX请求结果进行缓存在下次进行请求时是从本地缓存中获取而不是服务器返回的最新数据对于时效性比较强的场景AJAX缓存不能及时显示会影响结果 解决方法 xhr.open(GET,http://127.0.0.1:8000/ie?tDate.now()) 请求超时与网络异常 项目向服务器请求时不能保证服务端能够及时快速的响应这时就会请求超时同时在网络异常时也需要给用户一个提醒 !DOCTYPE html html langen 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 btndocument.getElementsByTagName(button)[0]const resultdocument.querySelector(#result)btn.addEventListener(click,function(){// console.log(test)const xhrnew XMLHttpRequest()// 超时设置2s设置xhr.timeout2000//2s之后若没有成功返回结果就取消// 超时回调xhr.ontimeoutfunction(){alert(网络异常,请稍后重试!!)}// 网络异常回调xhr.onerrorfunction(){alert(你的网络似乎出了一些问题!)}xhr.open(GET,http://127.0.0.1:8000/delay)xhr.send()xhr.onreadystatechangefunction(){if(xhr.readyState4){if(xhr.status200xhr.status300){result.innerHTMLxhr.response}}}})/script /body /html app.get(/delay,(request,response){// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,)setTimeout((){response.send(延时响应)},3000)// 设置响应体}) 手动取消请求 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title取消请求/title /head bodybutton点击发送/buttonbutton点击取消/buttonscript// 获取元素对象const btnsdocument.querySelectorAll(button)let xnullbtns[0].onclickfunction(){xnew XMLHttpRequest()x.open(GET,http://127.0.0.1:8000/delay)x.send()}// abortbtns[1].onclickfunction(){x.abort()}/script /body /html 重复请求问题 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title重复请求/title /head bodybutton点击发送/buttonbutton点击取消/buttonscript// 获取元素对象const btnsdocument.querySelectorAll(button)let xnull// 标识变量let isSendingfalse//是否正在发送AJAX请求btns[0].onclickfunction(){if(isSending)x.abort()//如果正在发送,则取消该请求,创建一个新的请求xnew XMLHttpRequest()isSendingtruex.open(GET,http://127.0.0.1:8000/delay)x.send()x.onreadystatechangefunction(){if(x.readyState4){// 修改标识变量isSendingfalse}}}// abortbtns[1].onclickfunction(){x.abort()}/script /body /html jQuery中的AJAX get请求 \(.get(url,[data],[callback],[type]) url:请求的URL地址 data:请求携带的参数 callback:载入成功时回调函数 type:设置返回内容的格式xml,html,script,json,text,_default post请求 \).post(url,[data],[callback],[type]) url:请求的URL地址 data:请求携带的参数 callback:载入成功时回调函数 引入jquery.js文件 搜索BootCDN官网 之后搜索jquery点击jquery后选择所需版本并复制script标签将其放置在html里即可 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0link relstylesheet href../bootstrap-3.3.2-dist/css/bootstrap-theme.csslink relstylesheet href../bootstrap-3.3.2-dist/css/bootstrap.csslink relstylesheet href../bootstrap-3.3.2-dist/css/bootstrap.min.csstitlejQuery发送AJAX请求/titlescript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js/script /head bodydiv classcontainerh2 classpage-headerjQuery发送AJAX请求/h2button classbtn btn-primaryGET/buttonbutton classbtn btn-dangerPOST/buttonbutton classbtn btn-info通用型方法ajax/button/divscript\((button).eq(0).click(function(){\).get(http://127.0.0.1:8000/jquery-server,{a:100,b:200},function(data){console.log(data)},json)//第一个参数给谁发第二个为传进去的参数//第三个为回调函数,data为响应体第四个参数为响应体类型})$(button).eq(1).click(function(){$.post(http://127.0.0.1:8000/jquery-server,{a:100,b:200},function(data){console.log(data)})//第一个参数给谁发第二个为传进去的参数//第三个为回调函数,data为响应体})/script /body /html // jQuery服务 app.all(/jquery-server,(request,response){// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin,)// response.send(Hello jQuery AJAX)const data{name:尚硅谷}response.send(JSON.stringify(data)) }) get请求第四个参数表示响应体类型上述代码在进行get请求时其返回结果类型为json而post请求返回的结果只是字符串 \(.ajax方法接收的参数是一个对象包括url参数请求类型成功的回调以及响应体结果的类型等等 \)(button).eq(2).click(function(){$.ajax({//urlurl:http://127.0.0.1:8000/delay,// 参数data:{a:100,b:200},// 请求类型type:GET,// 响应体结果类型dataType:json,// 成功的回调success:function(data){console.log(data)},// 超时时间timeout:2000,// 失败的回调error:function(){console.log(出错啦)},// 头信息headers:{c:300,d:400}})}) crossoriginanonymous crossoriginanonymous 是一个HTML属性用于设置图像、脚本、样式表等外部资源的跨源资源共享Cross-Origin Resource Sharing简称 CORS策略。当将其应用于如img, script, link relstylesheet 等标签时它的作用主要是 允许跨域加载资源在默认情况下浏览器实施同源策略Same-origin policy阻止从一个域名加载的网页脚本访问来自不同源的资源。通过设置 crossoriginanonymous你可以告诉浏览器允许请求的资源来自不同的源并且请求应该带有一个匿名的凭据标志表示请求不应包含 cookies 或 HTTP 认证信息。 控制请求头的信息当使用 crossoriginanonymous 时浏览器会在请求头中添加一个 Origin 字段告知服务器这个请求是跨域的。服务器需要配置相应的CORS headers如 Access-Control-Allow-Origin来允许这种跨域请求。如果服务器允许它将在响应头中返回 Access-Control-Allow-Origin从而使得浏览器能够成功接收并使用这个跨域资源。 无凭据请求特别需要注意的是anonymous 模式下请求不会发送cookie或其他认证信息这与使用 withCredentials 属性发送凭据的请求通常用于Ajax请求不同。这对于那些不需要用户特定信息的公共资源加载非常有用提高了安全性因为减少了信息泄露的风险。 总之crossoriginanonymous 主要用于实现安全地跨域加载脚本、样式和图像等静态资源而不涉及用户的认证信息是一种提高Web应用安全性和灵活性的机制。 Axios发送AJAX请求 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0script crossoriginanonymous srchttps://cdn.bootcdn.net/ajax/libs/axios/1.6.8/axios.js/scripttitleaxios 发送AJAX请求/title /head bodybuttonGET/buttonbuttonPOST/buttonbuttonAJAX/buttonscriptconst btnsdocument.querySelectorAll(button)// 配置baseURLaxios.defaults.baseURLhttp://127.0.0.1:8000btns[0].onclickfunction(){// GET请求axios.get(/axios-server,{// url参数params:{id:100,vip:7},// 请求头信息Headers:{name:atguigu,age:20}}).then(value{//对返回结果进行处理与jquery的回调函数的作用相似console.log(value)})}btns[1].onclickfunction(){axios.post(/axios-server,// 请求体{username:admin,password:admin},{// urlparams:{id:200,vip:9},// 请求头参数Headers:{weight:180,height:180}})}/script /body /html 服务端代码 // axios服务 app.all(/axios-server,(request,response){// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Headers,) // 表示所有头信息都可以接受response.setHeader(Access-Control-Allow-Origin,)// response.send(Hello jQuery AJAX)const data{name:尚硅谷}response.send(JSON.stringify(data)) }) axios通用方法发送请求 btns[2].onclickfunction(){axios({// 请求方法method:POST,// urlurl:/axios-server,// url参数params:{vip:10,level:30},// 头信息headers:{a:100,b:200},// 请求体参数data:{username:admin,password:admin}}).then(response{console.log(response)// 响应状态码console.log(response.status)// 响应状态字符串console.log(response.statusText)// 响应头信息console.log(response.headers)// 响应体console.log(response.data)})} fetch发送AJAX请求 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlefetch 发送 AJAX请求/title /head bodybuttonAJAX请求/buttonscriptconst btndocument.querySelector(button)btn.onclickfunction(){//接收两个参数,第一个为url,第二个为可选配置对象fetch(http://127.0.0.1:8000/fetch-server?vip10,{// 请求方法method:POST,// 请求头headers:{name:atguigu},body:usernameadminpasswordadmin}).then(response{// console.log(response)// return response.text()return response.json()//把数据转化成json对象}).then(response{console.log(response)})}/script /body /html 服务端代码 // fetch服务 app.all(/fetch-server,(request,response){// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Headers,*) // 表示所有头信息都可以接受response.setHeader(Access-Control-Allow-Origin,)// response.send(Hello jQuery AJAX)const data{name:尚硅谷}response.send(JSON.stringify(data)) }) 同源策略 同源策略是浏览器的一种安全策略 同源当前网页的url和AJAX请求的目标资源的url的协议域名端口号必须完全相同 AJAX默认遵从同源策略违背同源策略就是跨域 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title首页/title /head bodyh1尚硅谷/h1button点击获取用户数据/buttonscriptconst btndocument.querySelector(button)btn.onclickfunction(){const xnew XMLHttpRequest()// 因为满足同源策略 所以url可以简写x.open(GET,/data)// 发送x.send()x.onreadystatechangefunction(){if(x.readyState4){if(x.status200x.status300){console.log(x.response)}}}}/script /body /html const expressrequire(express) const appexpress() app.get(/home,(request,response){// 响应一个页面response.sendFile(dirname/index.html)//dirname在node中是当前文件的绝对路径}) app.get(/data,(request,response){response.send(用户数据) }) app.listen(9000,(){console.log(服务已经启动…) }) 在网址中输入127.0.0.1:9000/home即可进入首页页面 如何解决跨域 JSONP JSONP是什么 JSONP是一个官方的跨域解决方案纯粹凭借程序员的聪明才智开发出来只支持get请求 JSONP是怎么工作的 在网页有一些标签具有跨域能力比如img,link,iframe,script JSONP就是利用script标签的跨域能力来发送请求的 JSONP的使用 1.动态的创建一个script标签 var scriptdocument.creatElement(script) 2.设置script的src设置回调函数 script.srchttp://localhost:3000/testAJAX?callbackabc 原理实现 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title原理演示/titlestyle#result{width: 300px;height: 100px;border: solid 1px #78a;}/style /head bodydiv idresult/divscriptfunction handle(data){// 获取result元素const resultdocument.getElementById(result)result.innerHTMLdata.name }/script!– script src./js/app.js/script –!– script srchttp://127.0.0.1:5500/%E8%B7%A8%E5%9F%9F/JSONP/%E5%8E%9F%E7%90%86.html/script –script srchttp://127.0.0.1:8000/jsonp-server/script !– script发送请求应该返回标准的js代码 –/body /html app.js const data{name:尚硅谷 } console.log(data) // function handle(data){ // // 获取result元素 // const resultdocument.getElementById(result) // result.innerHTMLdata.name // } handle(data) 8000端口 // jsonp服务 app.all(/jsonp-server,(request,response){// response.send(console.log(hello jsonp-server))const data{name:尚硅谷}// 将数据转化为字符串let strJSON.stringify(data)// 返回结果response.end(handle(\({str}))//end不会加特殊响应头 }) 原生JSONP的实现 案例用户注册输入用户名后当光标失去焦点时向服务端发送请求服务端返回是否存在该用户名存在就将input框变成红色 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title案例/title /head body用户名: input typetext idusernamep/pscript// 获取input元素const inputdocument.querySelector(input)const pdocument.querySelector(p)// 声明handle函数function handle(data){input.style.bordersolid 1px #f00p.innerHTMLdata.msg}// 绑定事件input.onblurfunction(){// 获取用户的输入值let usernamethis.value// 向服务器端发送请求 检测用户名是否存在// 1.创建标签的src属性const scriptdocument.createElement(script)// 2.设置标签的src属性script.srchttp://127.0.0.1:8000/check-usernamedocument.body.appendChild(script)}/script /body /html // 检测用户名是否存在 app.all(/check-username,(request,response){// response.send(console.log(hello jsonp-server))const data{exist:1,msg:用户名已经存在}// 将数据转化为字符串let strJSON.stringify(data)// 返回结果response.end(handle(\){str}))//end不会加特殊响应头 }) 用jQuery发送jsonp请求 点击按钮向8000端口发送jsonp请求将返回结果放置在result中 \(.getJSON() 是 jQuery 库中的一个函数用于简化 AJAX 请求专门用于获取 JSON 格式的数据。这个函数是 \).ajax() 的一个便捷封装用于执行 HTTP GET 请求并自动将返回的数据解析为 JavaScript 对象即 JSON 格式数据。 使用 \(.getJSON() 的基本语法如下 \).getJSON(url, data, function(data) {// 这个函数会在请求成功并且数据被解析后执行// data 参数包含了从服务器返回的 JSON 数据已经被转换成 JavaScript 对象console.log(data); }).done(function() {// 可选的当请求成功完成时执行 }).fail(function(jqXHR, textStatus, errorThrown) {// 可选的当请求失败时执行 }).always(function() {// 可选的无论请求成功或失败都会执行 }); url: 字符串必需规定要发送请求的 URL。data: 可选对象或字符串发送到服务器的数据可以是对象的键值对或查询字符串形式。callback: 函数当请求成功并且服务器返回了数据时会执行这个函数。返回的数据会作为参数传递给这个函数。.done(), .fail(), .always() 方法提供了对成功、失败和完成状态的回调处理增加了请求的灵活性。 请注意由于 jQuery 是一个库所以在使用 \(.getJSON() 之前确保已经在项目中引入了 jQuery。 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlejQuery-jsonp/titlestyle#result {width: 300px;height: 100px;border: solid 1px #089;}/stylescript crossoriginanonymous srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js/script /head bodybutton点击发送jsonp请求/buttondiv idresult/divscript\)(button).eq(0).click(function(){\(.getJSON(http://127.0.0.1:8000/jquery-jsonp-server?callback?,function(data){// console.log(data)\)(#result).html(名称:\({data.name}br校区:\){data.city})})})/script /body /html // 用jQuery发送jsonp请求 app.all(/jquery-jsonp-server,(request,response){// response.send(console.log(hello jsonp-server))const data{name:尚硅谷,city:[北京,上海,深圳]}// 将数据转化为字符串let strJSON.stringify(data)// 接收callback参数let cbrequest.query.callback//接收callback返回的参数// 返回结果response.end(\({cb}(\){str}))//end不会加特殊响应头 }) CORS CORS是什么? CORS跨域资源共享CORS是官方的跨域解决方案它的特点是不需要在客户端做任何特殊的操作完全在服务器中进行处理支持get和post请求跨域资源共享标准新增了一组HTTP首部字段允许服务器声明哪些源站通过浏览器有权访问哪些资源 CORS是怎么工作的 CORS是通过设置一个响应头来告诉浏览器该请求允许跨域浏览器收到该响应以后就会对响应放行 CORS的使用 主要是服务器端的设置 router.get(/testAJAX,function(req,res){}) !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 idresult/divscriptconst btndocument.querySelector(button)btn.onclickfunction(){// 1.创建对象const xnew XMLHttpRequest()// 2.初始化位置x.open(GET,http://127.0.0.1:8000/cors-server)// 3.发送x.send()// 4.绑定事件x.onreadystatechangefunction(){if(x.readyState4){if(x.status200x.status300){// 输出响应体console.log(x,response)}}}}/script /body /html // cros app.all(/cors-server,(request,response){//设置响应头response.setHeader(Access-Control-Allow-Origin,)response.setHeader(Access-Control-Allow-Headers,)response.setHeader(Access-Control-Allow-Method,*)//客户端在发送请求时,跨域页面哪个都行,头信息和请求方法都随意// response.setHeader(Access-Control-Allow-Orign,http://127.0.0.1:5500)//只有http://只有127.0.0.1:5500端口的网页才可向该服务器发生请求response.send(hello CORS) })