Ajax–》请求操作以及跨域相关讲解

目录

jQuery中的Ajax

请求超时与网络异常处理

取消请求

Ajax请求—fetch()

跨域

jQuery中的Ajax

在jQuery中应该如何发送Ajax请求呢？看到这篇文章你就能大概了解到如何在jQuery中发送Ajax。

要想使用jQuery框架，肯定是需要引进jQuery资源的，有两种方式，一种是将资源下载到本地，另一种是直接引入网站jQuery链接，推荐大家一个比较好用的网站：bootcdn 其网站致力于为许多像 Bootstrap、jQuery、Angular、Vuejs 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。

点击相关需求，引入相关链接到HTML里面即可，请看如下操作：

jQuery发送Ajax请求
GETPOST通用型方法$('button').eq(0).click(function(){// 参数分别是 url 参数对象 回调函数 响应体类型-json$.get('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){console.log(data);},'json')//加了json返回的结果是一个对象})$('button').eq(1).click(function(){$.post('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){console.log(data);})//不加json返回的结果是一个字符串})

// 1.引入expressconst { response } = require('express')const express = require('express')// 2.创建应用对象const app = express()// 3.jQuery服务app.all('/jquery',(request,response)=>{// 设置响应头response.setHeader('Access-Control-Allow-Origin','*')// response.send('hello jQuery')const data = {name:'张三'}response.send(JSON.stringify(data))})// 4.监听端口启动服务app.listen(8000,()=>{console.log('服务已经启动,8080端口监听中....');})

这里借用了一点bootstarp样式来修改一下CSS属性，让样式更好看点。

上面讲解了get和post请求操作，如果想单独设置个性化强一点的Ajax请求操作，可以选择通用型操作，代码如下：

jQuery发送Ajax请求
GETPOST通用型方法$('button').eq(2).click(function(){$.ajax({// urlurl:'http://127.0.0.1:8000/jquery',// 参数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}})})

请求超时与网络异常处理

请求超时：当我们进行服务器数据传输时因为网络原因出现超时问题，我们设置超时规则来提示用户网络超时

#result {width: 200px;height: 100px;border: 1px solid #008c8c;}点击发送请求const btn = document.querySelector('button')const result = document.querySelector('#result')btn.addEventListener('click',function(){const xhr = new XMLHttpRequest()// 超时2s设置取消xhr.timeout = 2000// 超时回调xhr.ontimeout = 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.status < 300){result.innerHTML = xhr.response}}}})

设置express服务

// 1.引入expressconst { response } = require('express')const express = require('express')// 2.创建应用对象const app = express()// 3.延时响应app.get('/delay',(request,response)=>{// 设置响应头response.setHeader('Access-Control-Allow-Origin','*')// 设置延时效果setTimeout(()=>{// 设置响应体response.send('延时响应')},3000)})// 4.监听端口启动服务app.listen(8000,()=>{console.log('服务已经启动,8080端口监听中....');})

网络异常：访问网站时，如果网络突然断掉，通过Ajax来提醒我们网络断开。

取消请求

既然Ajax可以请求数据，那我们也可以将Ajax请求的数据取消也可以的，这里需要借助Ajax的一个属性 abort 来进行操作。案例如下：

点击发送请求点击取消请求const btns = document.querySelectorAll('button')// 将x设置为全局变量let x = nullbtns[0].addEventListener('click',function(){x = new XMLHttpRequest()x.open('GET','http://127.0.0.1:8000/delay')x.send()})// 取消方法 abortbtns[1].addEventListener('click',function(){x.abort()})

当然我也设置一个延时服务来进行数据还没有请求完就取消的过程。

取消重复请求

在日常浏览网页中，可以由于一些网络或其他原因导致用户疯狂的进行数据请求，这样一来，用户的数量一高请求的数据就很庞大，导致服务器承受不住这么大的流量，所以我们就要进行取消重复的操作来缓解服务器的压力。操作过程如下：

点击发送请求const btns = document.querySelector('button')// 将x设置为全局变量let x = null// 标识变量let isSending = falsebtns.addEventListener('click',function(){// 判断标识变量if(isSending) x.abort()//如果正在发送，则取消该请求，创建一个新的请求x = new XMLHttpRequest()// 修改 标识变量的值isSending = truex.open('GET','http://127.0.0.1:8000/delay')x.send()x.onreadystatechange = function(){if(x.readyState === 4){// 修改标识变量isSending = false}}})

提供express服务

// 1.引入expressconst { response } = require('express')const express = require('express')// 2.创建应用对象const app = express()// 3.延时响应app.get('/delay',(request,response)=>{// 设置响应头response.setHeader('Access-Control-Allow-Origin','*')// 设置延时效果setTimeout(()=>{// 设置响应体response.send('延时响应')},3000)})// 4.监听端口启动服务app.listen(8000,()=>{console.log('服务已经启动,8080端口监听中....');})

Ajax请求—fetch()

fetch()方法用于发起获取资源的请求，它返回一个promise，这个promise会在请求响应后被resolve，并传回 response 对象。注意：fetch()方法的参数与request()构造器是一样的。

Ajax请求const btn = document.querySelector('button')btn.addEventListener('click',function(){fetch('http://127.0.0.1:8000/fetch',{// 请求方法method:'POST',// 请求头headers:{name:'zhangsan'},// 请求体body:'username=admin&password=admin'}).then(response=>{return response.json()}).then(response=>{console.log(response);})})

// 1.引入expressconst { response } = require('express')const express = require('express')// 2.创建应用对象const app = express()// 3.fetch服务app.all('/fetch',(request,response)=>{// 设置响应头response.setHeader('Access-Control-Allow-Origin','*')response.setHeader('Access-Control-Allow-Headers','*')// response.send('hello jQuery')const data = {name:'张三'}response.send(JSON.stringify(data))})// 4.监听端口启动服务app.listen(8000,()=>{console.log('服务已经启动,8080端口监听中....');})

跨域

同源策略(Same-Origin-Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。同源就是协议、域名、端口号必须完全相同，违背同源策略就是跨域。Ajax默认遵循同源策略。

点击获取用户数据const btn = document.querySelector('button')btn.addEventListener('click',function(){const x = new XMLHttpRequest()// 因为是满足同源策略的，所以url是可以简写的x.open('GET','/data')x.send()x.onreadystatechange = function(){if(x.readyState === 4){if(x.status >= 200 && x.status <300){console.log(x.response);}}}})

const { response, request } = require('express')const express = require('express')const app = express()app.get('/home',(request,response)=>{// 响应一个页面response.sendFile(__dirname+'/index.html')})app.get('/data',(request,response)=>{response.send('用户数据')})app.listen(9000,()=>{console.log('9000端口开启，服务已启动...');})

如何解决跨域：

JSONP，是一个非官方的跨域解决方案，由程序员开发出来，只支持get请求。在网页中有一些标签天生具有跨域能力，比如：img、link、iframe、script等，JSONP就是利用script标签的跨域能力来发送请求的。

原理：返回函数调用，并把参数放在里面，让前端的函数对它进行一个处理，用服务端代码去响应JS代码。

#result {width: 300px;height: 200px;border: 1px solid #008c8c;}// 处理函数function handle (data) {// 获取元素const result = document.querySelector('#result')result.innerHTML = data.name}<!--  -->

原生JS代码

const data = {name:'张三'}handle(data)

express服务

// 1.引入expressconst { response } = require('express')const express = require('express')// 2.创建应用对象const app = express()// 3.JSONP服务app.all('/jsonp',(request,response)=>{// response.send('console.log("hello jsonp");')const data = {name:'张三'}// 将数据转换为字符串let str = JSON.stringify(data)// 返回结果 end()不会加特殊响应头// 返回的结果是一个函数调用，而函数的实参就是我们想给客户端返回的结果数据response.end(`handle(${str})`)})// 4.监听端口启动服务app.listen(8000,()=>{console.log('服务已经启动,8080端口监听中....');})

jsonp实践：

用户名：// 获取 input 元素const input = document.querySelector('input')const p = document.querySelector('p')// 声明 handle 函数function handle (data) {input.style.border = "solid 1px #f00"// 修改 p 标签的提示文本p.innerHTML = data.msg}// 绑定事件input.onblur = function () {// 获取用户的输入值let username = this.value// 向服务器发送请求，检测用户名是否存在// 1.创建 script 标签const script = document.createElement('script')// 2.设置标签的 src 属性script.src = 'http://127.0.0.1:8000/username'// 3.将script插入到文档中document.body.appendChild(script)}

jQuery实现发送jsonp请求：

#result {width: 300px;height: 200px;border: 1px solid #008c8c;}点击发送 jsonp 请求$('button').eq(0).click(function(){$.getJSON('http://127.0.0.1:8000/jquery" />// 1.引入expressconst { response } = require('express')const express = require('express')// 2.创建应用对象const app = express()// 3.jQuery服务app.all('/jquery',(request,response)=>{// response.send('hello jQuery')const data = {name:'张三',subject:['语文','数学','英语']}let str = JSON.stringify(data)// 接收 callback 参数let cb = request.query.callback// 返回结果response.end(`${cb}(${str})`)})// 4.监听端口启动服务app.listen(8000,()=>{console.log('服务已经启动,8080端口监听中....');})

CORS：跨域资源共享 。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求，跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

点击发送请求const btn = document.querySelector('button')btn.addEventListener('click',function(){// 1.创建对象const x = new XMLHttpRequest()// 2.初始化设置x.open('GET','http://127.0.0.1:8000/cors')// 3.发送x.send()// 4.绑定事件x.onreadystatechange = function(){if(x.readyState ===4 ){if(x.status >= 200 && x.status < 300){// 输出响应体console.log(x.response );}}}})

// 1.引入expressconst { response } = require('express')const express = require('express')// 2.创建应用对象const app = express()// 3.CORSapp.all('/cors',(request,response)=>{// 设置响应头response.setHeader('Access-Control-Allow-Origin','*')response.send('hello cors')})// 4.监听端口启动服务app.listen(8000,()=>{console.log('服务已经启动,8080端口监听中....');})