原生js、JQuery、axios实现Ajax异步通信以及解决跨域

最新推荐文章于 2023-05-15 17:34:42 发布
最新推荐文章于 2023-05-15 17:34:42 发布
阅读量2.0k 收藏 16
点赞数 6
文章标签： js ajax jquery ajax跨域问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46734347/article/details/115018415
版权

Ajax简介

Ajax全称为 Asynchronous JavaScript And XML 就是异步的JS和XML
XML：可扩展标记语言 被设计用来传输和存储数据

优点：

  • 可以无刷新页面与服务器进行通信
  • 允许你根据用户时间来更新部分页面内容

缺点：

  • 没有浏览历史，不能回退
  • 存在跨域问题
  • SEO不友好（搜索引擎优化）

Ajax返回的状态

  • 0 - (未初始化) 还没有调用send()方法
  • 1 - (载入)已调用send()方法，正在发送请求
  • 2 - (载入完成)send()方法执行完成，已经接收到全部响应内容
  • 3 - (交互) 正在解析响应内容
  • 4 - (完成) 响应内容解析完成，可以在客户端调用了

Express的使用（首先我们创建一个server.js用来做服务端

  1. 引入express
const express = require('express')
  1. 创建应用对象
const app = express()
  1. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/',(request,response) => {
// 设置相应
response.send('hello express')
})
  1. 监听端口启动服务
app.listen(8000,()=>{
	console.log('服务已经启动')
})
  1. node启动
node server.js

Ajax案例(这里开始真正使用Ajax)

客户端代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        // 获取button元素
        const btn = document.querySelector('button')
        const result = document.getElementById("result")
        // 绑定事件
        btn.onclick = function () {
            // 1.创建对象
            const xhr = new XMLHttpRequest()
            // 2.初始化
            xhr.open('GET', 'http://127.0.0.1:8000/server')
            // 3.发送
            xhr.send()
            // 4.事件绑定 处理服务端返回的结果
            // on when 当。。。时候
            // readystate 是xhr中的属性 表示状态0 1 2 3 4
            // change 改变
            xhr.onreadystatechange = function () {
                // 判断（服务端返回了所有结果）
                if (xhr.readyState === 4) {
                    // 判断响应状态码 200 404 403 401 500
                    // 2XX 成功
                    if (xhr.status >= 200 && xhr.status <= 300) {
                        // 处理结果 行 头 空行 体
                        // 响应行
                        console.log(xhr.status) // 状态码
                        console.log(xhr.statusText) // 状态字符串
                        console.log(xhr.getAllResponseHeaders()) // 所有响应头
                        console.log(xhr.response) // 响应体
                        // 设置result文本
                        result.innerHTML = xhr.response
                    }
                }
            }
        }
    </script>
</body>

</html>

服务器端

const express = require('express')
const app = express()
app.get('/server',(request,response) => {
  // 请求跨域访问
  response.setHeader('Access-Control-Allow-Origin','*')
  response.send('hello Ajax')
})
app.listen(8000,()=>{
	console.log('服务已经启动')
})

演示结果
在这里插入图片描述

Ajax post 请求

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById("result")
        result.addEventListener("mouseover",function(){
            const xhr = new XMLHttpRequest()
            xhr.open('POST', 'http://127.0.0.1:8000/server')
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            // 自定义请求头
			xhr.setRequestHeader('name','yinlu')
			// 设置请求体参数
            xhr.send('a=100&b=200&c=300')
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status <= 300) {
                        result.innerHTML = xhr.response
                    }
                }
            }
        })
    </script>
</body>
</html>

服务器端

const express = require('express')
const app = express()
// request 是对请求报文的封装
// response 是对响应报文的封装
app.all('/server',(request,response) => {
  // 设置响应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*')
  // 自定义请求头设置
  response.setHeader('Access-Control-Allow-Headers','*')
  // 设置响应体
  response.send('Hello Ajax Post')
})
app.listen(8000,()=>{
	console.log('服务已经启动')
})

演示效果
在这里插入图片描述

设置请求体参数

xhr.send('a=100&b=200&c=300')
xhr.send('a:100&b:200&c:300')

设置请求头信息

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

// 自定义请求头
xhr.setRequestHeader('name','yinlu')

app.all('/server',(request,response) => {
  // 设置相应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*')
  // 自定义请求头
  response.setHeader('Access-Control-Allow-Headers','*')
  // 设置响应体
  response.send('Hello Ajax Post')
})

Ajax服务端响应返回json数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById("result")
        // 绑定键盘按下事件
        window.onkeydown = function () {
            const xhr = new XMLHttpRequest();
          // 自动数据转换设置响应体数据的类型
          // xhr.responseType = 'json'
            xhr.open('GET', 'http:127.0.0.1:8000/json-server')
            xhr.send()
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status <= 300) {
                        result.innerHTML = xhr.response
                      // 1.手动数据转化
                      // let data = JSON.parse(xhr.response)
                      // result.innerHTML = data.name
                      // 2.自动数据转换
                      // result.innerHTML = xhr.response.name
                    }
                }
            }
        }
    </script>
</body>

</html>

服务端

const express = require('express')
const app = express()
app.get('/json-server',(request,response) => {
  response.setHeader('Access-Control-Allow-Origin','*')
  const data = {
    name: 'yinlu'
  }
  let str = JSON.stringify(data)
  response.send(str)
})
app.listen(8000,()=>{
	console.log('服务已经启动')
})

结果演示
在这里插入图片描述

这里在介绍一款可以自动检测文件更改时重新启应用程序来调试node.js的工具nodemon

Ajax-IE 缓存问题解决

xhr.open("GET",'http://127.0.0.1:8000/ie?t=' + Date.now())

Ajax 请求超时与网络异常处理

xhr.timeout = 2000 //两秒之内如果没有结果 就取消发送
// 超时回调
xhr.ontimeout = function(){
  alert('网络异常，请稍后重试')
}
// 网络异常回调
xhr.onerror = function(){
  alert('网络出了些问题')
}

Ajax手动取消请求

xhr.abort()

Ajax重复发送请求

let isSending = false; // 是否正在发送ajax请求
btn.onclick = function(){
		if(isSending) x.abort() // 如果正在发送，则取消该请求，创建一个新的请求
		const xhr = new XMLHttpRequest();
		// 修改标示变量的值
		isSending = true
		xhr.open('GET', 'http:127.0.0.1:8000/json-server')
		xhr.send()
		xhr.onreadystatechange = function () {
		if (xhr.readyState === 4) {
				// 修改标示变量的值
				isSending = false
 				}
		}
}

JQuery发送Ajax请求

// GET
$('button').eq(0).click(function(){
  $.get('url',{a:100,b:200},function(data){
		console.log(data)
  },'json')
})
// POST
$('button').eq(1).click(function(){
  $.post('url',{a:100,b:200},function(data){
		console.log(data)
  })
})
// jQuery通用方法
$('button').eq(2).click(function(){
  $.ajax({
    // url
    url: '',
    // 参数
    data: {
      a: 100,
      b: 200
    },
    // 请求类型
    type: 'GET',
    // 响应体结果
    dataType: 'json',
    // 成功的回调函数
    success: function(data){
      console.log(data)
    },
    // 失败的回调
    error: function(){
      console.log('出错了')
    },
    // 头信息设置
    headers: {
      c: 300,
      d: 400
    }
  })
})

axios 发送Ajax请求

// 配置baseurl
axios.defaults.baseURL = 'http://127.0.0.1:8000'
btns[0].onclick = function(){
  // GET请求
  axios.get('/login',{
    // url参数
    params: {
			id: 100,
      vip: 7
    },
    // 请求头信息
    header: {
    	name: 'yinlu',
    	age: 20
  	}
  }).then(value => {
    console.log(value)
  })
}

// POST请求
axios.post('/login', {
			username: 'admin',
      password: 'admin'
    },{
    // url参数
    params: {
			id: 100,
      vip: 7
    },
    // 请求头信息
    header: {
    	name: 'yinlu',
    	age: 20
  	}
  }).then(value => {
    console.log(value)
  })
}

// axios函数发送请求
axios({
  method: 'POST',
  url: '',
  params: {
		vip: 10,
    level: 30
  },
  headers: {
		a: 100,
    b: 200
  },
  data: {
    uername: 'admin',
    password: 'admin'
  }
}).then(response => {
	console.log(response)
})

跨域

同源策略：协议、域名、端口号、必须完全相同

违背同源策略就是跨域

JSONP 解决跨域

jsonp：是JSON with Padding 的略称，它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback 的形式实现跨域访问

// 客户端
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        // 处理数据
      function handle(data){
      	const result = document.getElementById("result")
        result.innerHTML = data.name
    	}
    </script>
	<script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>
</html>

// 服务器端
const express = require('express')
const app = express()
app.all('/jsonp-server',(request,response) => {
  const data = {
    name: 'yinlu'
  }
  let str = JSON.stringify(data)
  response.end(`handle(${str})`)
})
app.listen(8000,()=>{
	console.log('服务已经启动')
})

演示效果
在这里插入图片描述

JQuery 发送JSONP请求

// 客户端
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b
        }
    </style>
</head>
<body>
    <button>点击发送jsonp请求</button>
    <div id="result"></div>
    <script>
        $('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>

// 服务器端
const express = require('express')
const app = express()
app.all('/jquery-jsonp-server',(request,response) => {
  response.setHeader('Access-Control-Allow-Origin','*')
  const data = {
    name: 'yinlu',
    city: 'Hohhot'
  }
  let str = JSON.stringify(data)
  // 接受callback参数
  let cb = request.query.callback
  response.end(`${cb}(${str})`)
})
app.listen(8000,()=>{
	console.log('服务已经启动')
})

演示结果
在这里插入图片描述

CORS解决跨域

CORS,跨域资源共享，特点是不需要在客户端做任何的操作，完全在服务器中进行处理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button')
        const result = document.getElementById("result")
        btn.onclick = function () {
            const xhr = new XMLHttpRequest()
            xhr.open('GET', 'http://127.0.0.1:8000/cors-server')
            xhr.send()
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status <= 300) {
                        result.innerHTML = xhr.response
                    }
                }
            }
        }
    </script>
</body>

</html>

// 服务器端
const express = require('express')
const app = express()
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.send('hello cors')
})
app.listen(8000,()=>{
	console.log('服务已经启动')
})

演示效果
在这里插入图片描述
看到应该对Ajax有了不少的了解了吧，感谢各位的支持🙏！
在这里插入图片描述

Y shǔ shǔ
关注
  • 6
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
JavaScript案例-原生ajax
02-16
"JavaScript案例-原生ajax"这个主题聚焦于如何不依赖任何库或框架，仅用JavaScript原生API实现Ajax通信。 Ajax的核心在于XMLHttpRequest对象，它允许我们在不刷新整个页面的情况下发送HTTP请求并接收响应。以下是...
原生js封装的ajax方法示例
12-10
在现代Web开发中，通常会使用jQuery、axios等库来简化Ajax操作，但如果想要深入理解Ajax的工作原理，学习原生实现是非常有帮助的。 通过这个简单的Ajax封装示例，我们可以了解到如何利用JavaScript实现异步数据通信...
Ajax和jQuery连接后端服务器两种方法
m0_73715441的博客
04-11 345
连接后端服务器常用的两种方式
JavaScript--前后端交互Ajax&jQuery
m0_50315078的博客
08-13 1368
JavaScript前后端交互与jQuery
axios基本使用及跨域问题详解
AnnGreen的博客
07-31 1万+
前端请求自然也发展迅速，从原生的XHR到jqueryajax，再到现在的axios和fetch。//www.axios-js.com/zh-cn/）是Vue推荐的http库，这个还是要了解一点的。
系列教程之使用Axios跨域请求问题
种麦南山下的博客
06-23 4548
一、安装 $ npm install axios 或： $ bower install axios 或： <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 二、引入axios main.js import axios from 'axios' //将axios全局挂载到Vue原型上 //Vue.prototype.$axios = axios //this.axios.
js跨域的解决方案
最新发布
muzidigbig的博客
05-15 1万+
指的是浏览器不能执行其他网站的脚本，简单来说是浏览器同源政策的限制，浏览器针对于的限制。两个页面拥有相同的协议，端口，域名就是同源，如果有一个不相同就是不同源。保护用户，防止一些网站盗取用户信息。 1、通过jsonp跨域 2、跨域资源共享（CORS） 3、document.domain + iframe跨域 4、location.hash + iframe 5、window.name + iframe跨域 6、postMessage跨域 7、nginx代理跨域 8、nodejs中间件代理跨域（非vue、v
Ajax客户端异步调用服务端的实现方法(js调用cs文件)
10-18
在JavaScript中，我们通常使用库如jQuery、axios或原生的XMLHttpRequest对象来创建和管理Ajax请求。但在本例中，我们讨论的是使用特定的Ajax库（可能是Ajax.NET Professional）来调用C#方法。 步骤1：引入Ajax库 ...
原生ajax使用
11-29
在JavaScript中，XMLHttpRequest对象是实现Ajax的核心，它提供了与服务器进行通信的能力。以下是对原生Ajax使用的详细讲解。 1. **创建XMLHttpRequest对象** 首先，你需要创建一个XMLHttpRequest实例。这是Ajax的...
javascript Ajax 类实现代码
12-08
1. `this.HttpRequest`: 用于存储创建的XMLHttpRequest对象，这是Ajax的核心，它允许客户端与服务器进行异步通信。 2. `this.openMethod`: 表示HTTP请求方法，通常为GET或POST，用于指定如何从服务器获取或发送数据...
浏览器访问跨域问题
liubangbo的专栏
12-15 483
项目中遇到一个问题：用ajax来获取数据，但返回的status为0，从浏览器的打印看应该是跨域问题： origin 'file://' has been blocked by CORS policy: Response to preflight request does not pass access control chech: No "Access-Control-Allow-Origin"...
axios如何解决跨域的方案
HaushoLin的博客
12-10 2万+
由于解决跨域需要用到headers属性，所以在axios形参中需要用对象形式包裹，同时api接口也要放在url属性当中， 废话不多说，直接上代码，然后在请求接口 ---- 到浏览器的控制台 — 点击刚刚请求的接口 ---- 找到Request Headers 下 ---- Access-Control-Allow-Origin": “*” ，如果有看到这个属性代表解决跨域完成啦。(我说的好像很繁琐，实际上超级简单，赶紧去试试看吧????) axios.get( { url: "你的api地址"
axios解决开发环境跨域问题
qq_64209130的博客
11-11 4525
跨域是因为协议域名端口其中一个的不同而产生的的报错,这是浏览器发出的,有些跨域这个时候是已经成功请求了,但是被浏览器拦截了,前端可以配置代理服务器来解决跨域,这个是因为服务器与服务器之间不存在跨域,配置的代理服务器又与本地的协议端口域名都一样,这样跨域就解决了.2.在vue.config.js文件下创建同级文件 .env.development 和 .env.production。4. .env.production是生产环境请求接口的地址,在打包发布到服务器上的时候用的就是这个文件里的接口地址。
Axios解决跨域问题（Vue2版）
weixin_43565079的博客
09-13 6万+
什么是跨域 首先需要了解到浏览器的同源策略，同源策略是最核心也是最基本的安全功能，缺少同源策略浏览器的正常功能可能会受到影响。同源策略会阻止一个域的javascript脚本和另外一个域的能容进行交互。同源（即指在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。 当一个请求url的协议、域名、端口三个之间任意一个与当前页面url不同即为跨域。 Vue中用Axios解决跨域问题 配置代理可解决使用Axios不能直接进行跨域...
vuejs2.0使用axios跨域时的一个注意
sinat_35643949的博客
06-09 2113
很多在VUE2.0的朋友都知道，vue大部分数据都是从接口调取的，这时候就会设计到一个跨域的问题了。 下面是我在跨域的时候遇到过的几个情况，都是在服务端这边引起的，我不知道看到各位有没有遇到过。 一:服务端没允许客户端的域名调去接口（我服务端是PHP写的） 然后我们要在服务端设置一下 加上这句代码之后，发现另外一个问题又来了：允许的调取接口的来源不能为星号（就是所以域名都可
js解决跨域的方案
^_^
05-22 8711
什么是跨域？ 指的是浏览器不能执行其他网站的脚本，简单来说是浏览器同源政策的限制，浏览器针对于ajax的限制。 同源政策 两个页面拥有相同的协议，端口，域名 就是同源，如果有一个不相同就是不同源。 同源政策产生的目的 保护用户信息安全，防止一些网站盗取用户信息。 解决跨域的方案一 1.jsonp （json with padding） json with padding 将json 数据作为填充，简单来说就是服务器将json作为函数的参数。 原理： 1.动态创建一个script标签 ..
解决Axios跨域问题（Axios跨域问题解决方案）
热门推荐
★【World Of Moshow 郑锴】★
07-11 10万+
Axios是不允许跨域访问的，别说跨域，跨端口都不行。例如某项目我本地vue前端frontEnd为`localhost:8888`，Java后台 backEnd为`localhost:8889` 。 这个时候就有两个方案了： - 修改`frontEnd`前端，支持跨域（通过代理的形式，当然这种是`伪跨域`，但是挺有用，前提是后端不限制即可）。 - 修改`backEnd`后台，支持跨域（同时限制可跨域名，不在本文讨论范围，且看过往处理方式）。
axios请求使用方法 并解决跨域问题
叶新东老师的博客
12-20 4635
最近在研究axios 的异步请求，用法和ajax差不多，但是官方说明比ajsx要好     get 请求使用方法 var url = "请求链接"; var param= {"参数":"参数的值"}; // axios 参数必须用params包裹，例如: var param = {params:{pageNo:1,pageSize:20}} param = {par...
axios怎么设置响应头，解决跨域问题
04-19
你可以通过设置请求头的方式解决跨域问题，示例代码如下： ```javascript axios.get(url, { headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS', 'Access-Control-Allow-Headers': 'Content-Type, Authorization, Content-Length, X-Requested-With, Accept' } }).then(response => { console.log(response.data); }).catch(error => { console.log(error); }); ``` 其中，'Access-Control-Allow-Origin'表示允许跨域的源，* 表示允许所有来源；'Access-Control-Allow-Methods'表示允许的请求方法；'Access-Control-Allow-Headers'表示允许的请求头。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Y shǔ shǔ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值