Ajax请求合集

最新推荐文章于 2024-10-19 21:00:00 发布
最新推荐文章于 2024-10-19 21:00:00 发布
阅读量244 收藏
点赞数
分类专栏： ajax 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38686150/article/details/118860059
版权

AjAx 的特点

优点

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

缺点

  • 没有浏览历史 不能回退
  • 存在跨域问题（同源）
  • SEO 不友好

请求报文

重点是格式和参数

  • 请求体
    在这里插入图片描述

  • 响应体
    在这里插入图片描述

  • gei 请求 参数
    在这里插入图片描述

  • post 请求体参数
    在这里插入图片描述

Ajax的使用

  //  创建对象
  const xhr = new XMLHttpRequest()
  // 初始化 设置请求方法和 url
  xhr.open("GET","http://127.0.0.1:8000/serve")
  // 发送
  xhr.send()
  // 事件绑定 处理服务器返回的结果
  // on  when  当。。。 时候
  // readystate 是 xhr 对象中的属性 表示状态 0 1 2 3 4
  // 0 对象初始化完成    1 open 完成   2 send 完成   3 请求数据部分 返回  4 请求数据全部返回

    xhr.onreadystatechange = function(res){
    
      // 满足下列条件  请求数据成功
      if(xhr.readyState == 4 && (xhr.status >= 200  && xhr <300)){
       //  status  响应状态码 =》  200  300  400 500 
       // 2 开头都是表示成功

		let data =	xhr.response    // 响应体的内容
        

      }else {
				
			}
    }

Ajax设置参数

  • get 请求设置参数
 xhr.open("GET","http://127.0.0.1:8000/serve?a=100&b=200&c=300")

在这里插入图片描述

  • post 设置请求参数
// & 分隔
  xhr.send("a=100&b=200&c=300")

在这里插入图片描述

// 冒号分隔
  xhr.send("a=100:b=200:c=300")

在这里插入图片描述

设置请求头

在请求中（如POST 或 PUT） content-Type字段用于客户端告诉服务器实际发送的数据类型 方便服务器去解析数据 如果你不管服务器无法理解你的请求

  • content-Type 用来设置请求参数类型的

注意 在 open 和 send 之间 设置

    // 设置请求头  接受两个参数
  xhr.setRequestHeader("content-Type",'application/x-wwww-form-urlencoded')
  • 自定义请求头 属性 报错 （浏览器不允许）如果硬要这么做 需要在后台设置

在这里插入图片描述

// 对所有请求进行处理
app.use((req, res, next) => {
    //设置请求头
    res.set({
        'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type',
        'Access-Control-Allow-Headers': '*',
    })
 // 对特定的路由处理
 app.get('/api/wx/getSignature.do', (req, res) => {
 
	 res.set({
        'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type',
        'Access-Control-Allow-Headers': '*',
    })

}

后台设置还不行 还会再次校验 发送一个option 请求 校验这个头信息是否可用
在这里插入图片描述

app.get('/api/wx/getSignature.do', (req, res) => {


}
  • 此时这个请求路由类型要改为 all 校验 是发的 option
app.all('/api/wx/getSignature.do', (req, res) => {


}

服务器响应JSON数据

  • 方式一、
// 后台返回数据
app.get('/api/wx/getSignature.do', (req, res) => {

let obj = {a:1,b:2}

let str = JSON.stringify(obj)

res.send(str)

}

//前端接收时
JSON.parse(xhr.rsponse)
  • 方式二、
 // 设置响应数据的类型  
  xhr.responseType = "json"

Ajax IE 缓存问题

  • IE GET请求 是有缓存 对于该接口展示数据有一定的时效性 第二次请求 是会走缓存 不会再次请求
// 让每次发的请求的url都不一样
	 xhr.open("GET",`http://127.0.0.1:8000/IE?t=${Date.now()}`)

Ajax 请求超时

在这里插入图片描述

  • 设置 超时 回调函数 增加用户体验
const xhr = new XMLHttpRequest()
// 如果 两秒钟后客户端还没有返回  就取消请求
xhr.timeout =  2000
// 请求超时 回调函数
xhr.ontimeout = function(){
	alert('请求超时')
}
// 网络异常处理函数
xhr.onerror  = function(){
	alert('网络异常')
}
xhr.open( "GET","/delay")

xhr.send()


xhr.onreadystatechange = function(res){

    if(xhr.readyState==4 && xhr.status >= 200 && xhr <300){

    }

}


// --------------------------------->
// 解决跨域
app.use((req, res, next) => {
    //设置请求头
    
    res.set({
        'Access-Control-Allow-Credentials': true,
        'Access-Control-Max-Age': 1728000,
        'Access-Control-Allow-Origin': req.headers.origin || '*',
        'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type',
        'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS',
        'Content-Type': 'application/json; charset=utf-8'
    })
			next()
})


app.get('/delay', (req, res) => {

	
}

在这里插入图片描述

Ajax取消请求

  • 当我们发送ajax请求 但是请求没有返回结果 我们可以手动取消请求 （跟请求超时类似 超时未返回 自动取消）
// xhr 与发送的请求的 xhr 必须是同一个实例
xhr.abort()

解决Ajax 重复发送请求

  • 方式一、

  let btn = document.querySelector('.btn')
  let xhr = null;
  let isok = false;

  btn.conclick() = function () {

    if(isok) xhr.abort()  // 正在发送请求

   xhr  = new XMLHttpRequest()  // 创建一个请求

   isok = true  

 
    xhr.open("GET", "/delay")

    xhr.send()


    xhr.onreadystatechange = function (res) {

      if (xhr.readyState == 4 && xhr.status >= 200 && xhr < 300) {

          isok = false

      }

    }


  }
  • 方法二 防抖和节流

jQuery 请求 Ajax

Jquery在线文档

  • 引入 在线 jquery 会有这个提示 在 scrip 标签加
// crossorigin="anonymous" 表示这个资源发送请求  不会发送当前域名下的cooki
<script crossorigin="anonymous"   src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

在这里插入图片描述

  • get
 $.get('http//dadas/..',{a:1,b:2},function(res){
      
    },'json')  // 表示返回的数据格式是 json类型
  • post
 $.post('http//dadas/..',{a:1,b:2},function(res){
      
    },'json')  // 表示返回的数据格式是 json类型
  • 通用的请求
//后台 

app.all('/api/wx/getSignature.do', (req, res) => {
  let data ={
    a:1,
    b:2
  }

  let str =  JSON.stringify(data)

 res.send(str)

}

$.ajax({
  type: "GET",
  url: "test.js",
  dataType:'json'   //  这一步 相当于 把 JSON。parse(data)
  timeout: 3000,   // 超时时间
  header:{  //请求头信息的设置
	a: 1,
	b:2
},
  // 失败的回调
  error:()=>{
  },
  success:(data)=>{


	}
});

axios 发送Ajax 请求

axiose中文文档

<script crossorigin="anonymous"      src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

// 全局默认配置
axios.defaults.baseURL = 'https://api.example.com';
// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then((res)=>{

})

fetch 发送Ajax 请求

fetch文档

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

feth 设置请求头

使用 fetch 提供的 API 即可设置

let myheader = new Headers()

myheader.append("content-Type","application/json")

原生JSONP如何解决跨域

在这里插入图片描述

jsonp是一个非官方的跨域解决方案 只支持 get请求

  • jsonp 的原理 在网页中有一些标签天生具有跨域的能力 比如 ing link iframe scrip src属性 jsonp 就是利用script 标签的跨域 能力来发送请求的
  • jsonp 使用
    1、动态的创建一个 script 标签 并定义全局的函数
// 全局函数
<script >
	function handle(data){
		console.log('我被调用了',data)
	}

</script>

var script = document.createElemnt('script')

2、设置 script 的 src 设置回调函数

// ?callback=? 固定写法  jQuery 中 jsonp
script.src = 'https:/api/wx/getSignature.do?callback=?'

3.插入页面中

document.body.appendChild(script)  //
  • 后台的设置
app.get('/api/wx/getSignature.do', (req, res) => {
	let obj= "我是后台传过来的"
 		res.send(` handle(${obj})`)  // 返回后回调用客户端全局函数  handle
}

query 中的jsonp

  • 和原生的jsonp 区别是 不用设置全局函数 需要后端配合拿到 callback 值 并传递前端所需要的数据

JSONP形式的回调函数来加载其他网域的JSON数据，如 “myurl?callback=?”。jQuery 将自动替换 ?
为正确的函数名，

// 后台

app.get('/api/wx/getSignature.do', (req, res) => {
let cb = req.query.callback  // 拿到函数名
	let obj= {
		name:"尚硅谷"，
		city：["北京","上海","深圳"]
	}
 		res.send(`${cb}(${obj})`)  // 返回后回调用客户端全局函数  handle
}

// ------------------------------>

jQuery.getJSON(url, [data], [callback])

  $.getJSON({
    'http://dadadad/ada?callback=?',
    function(res) {
        consol.log(res)
        /*obj= {
		name:"尚硅谷"，
		city：["北京","上海","深圳"]
	}
	*/
    }
  })
  • 后台需要把该参数接手到 传递参数 再次传给客户端
    在这里插入图片描述

在这里插入图片描述

du_独孤九剑
关注
专栏目录
postman上传文件
ldzm
11-28 1337
postman上传文件一 ftl文件二 Postman操作 一 ftl文件 请注意以下代码的uploadingFiles，用于postman中文件的key <body οnlοad="updateSize();"> <form name="uploadingForm" enctype="multipart/form-data" action="/up" method="POST...
ajax请求
weixin_44599202的博客
10-12 187
ajax异步请求一、原生JS中的Ajax：二、Jquery中的Ajax 参考：https://blog.csdn.net/Hulu_IT/article/details/89363145 异步请求ajax的使用在前后台传递数据，优化用户体验起着至关重要的角色，那么下面给大家简单罗列了一下ajax请求的步骤与代码。 一、原生JS中的Ajax： 使用ajax发送数据的步骤 第一步：创建异步对象 ...
学习ajax（网络请求）
最新发布
liu3078670547的博客
10-19 907
Ajax 是一项创建动态网页的技术。（可以通过不同的代码去实现）。Ajax 是一种快速实现数据的前后端交互的代码。
C# 如何使用ajax请求
08-18
C# 如何使用ajax请求 C# 使用ajax请求是指在C# 项目中使用ajax技术来实现异步更新网页的内容。ajax即“Asynchronous Javascript And XML”（异步JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页...
实例详解Android Webview拦截ajax请求
08-28
Android Webview 拦截 Ajax 请求的详细讲解 Android Webview 提供了页面加载及资源请求的钩子，但是对于 H5 的 Ajax 请求并没有提供干涉的接口。这意味着我们不能在 Webview 中干涉 JavaScript 发起的 HTTP 请求，...
Ajax请求
weixin_38389149的博客
11-25 839
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。 js实现方式: ...
HTTP概念详解与案例测试
TYPFOON的博客
10-07 720
文章目录HTTP简介 HTTP简介 HTTP协议： 超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。用于定义WEB浏览器与WEB服务器之间交换数据的过程。
JAVA互联网架构学习之ajax&Json
sinat_36449151的博客
08-18 373
1.AJAX [1] AJAX简介 > 全称： Asynchronous JavaScript And XML > 异步的JavaScript和XML > AJAX就是通过JavaScript向服务器发送请求，并接收响应，然后我们在通过DOM来修改页面。 > XML指的是服务器响应的数据的格式。 > 目前AJAX已经很少使用XML作为响应的格式。因为XML的解析性能及传输性能较差。
ajax 请求
前端博客
05-19 918
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $.ajax({ type : "POST", url: "data.json", x...
chrome扩展插件获取ajax请求记录
04-06
其中，获取Ajax请求记录是开发者调试过程中非常关键的一环，因为它可以帮助开发者检查数据的发送和接收情况，排查网络问题，以及理解应用程序的工作流程。 Chrome扩展插件就是一种增强浏览器功能的方式，它们可以...
AJAX请求
qq_49633562的博客
08-01 590
AJAX即“AsynchronousJavascriptAndXML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。对AJAX的印象。...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值