Ajax入门

已于 2024-03-12 20:46:25 修改
阅读量753 收藏 15
点赞数 20
文章标签： ajax 前端
于 2024-03-12 20:36:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44791442/article/details/136625043
版权

文章目录

一、原生AJAX

1.1 ajax简介

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。
通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势:无刷新获取数据。
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

1.2 XML简介

XML:可扩展标记语言
XML作用:用来被传输和存储数据(html用来呈现数据)
XML和HTML类似，不同的是html都是预定义标签，而XML都是自定义标签

比如说我有一个学生数据:
name = “孙悟空” ; age = 18 ; gender = “男” ;
用 XML 表示:

<student>
	<name>孙悟空</name>
	<age>18</age>
	<gender>男</gender>
</student>

现在被JSON替换了

{"name":"孙悟空","age":18,"gender":"男"}

1.3 AJAX特点

1.3.1 ajax优点

1）可以无需刷新页面而与服务器端进行通信。
2）可以根据用户事件更新部分页面内容

1.3.2 ajax缺点

1）不利于SEO
2）存在跨域问题（同源）
3）没有浏览历史，不能回退

1.3.3知识点补充（服务器）

1）补充 http：
超文本传输协议：规定了浏览器与服务器端进行通信的规则协议。
请求报文：
请求行（请求方式+请求地址+http/1.1）
请求头（host+cookie+content-type+…）

2）补充nodejs安装:
在这里插入图片描述
点击下载之后根据提示进行安装。

3）补充express安装：
①打开终端，初始化：npm init --yes在这里插入图片描述
②输入npm i express进行安装
4）express基本使用

// 引入express
const  express = require('express')
// 创建应用对象
const app = express()
// 创建路由规则
app.get('/',(request,reponse)=>{
  reponse.send('hello express')
})
// 监听端口
app.listen(8000,()=>{
  console.log("服务器已启动，8000端口正在响应中...")
})

结果：
在这里插入图片描述

1.4 AJAX基本使用

1.4.1 ajax发送GET请求基本操作

创建文件set.html

<!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>AJAX请求</title>
  <style>
    #result{
      width: 100px;
      height: 50px;
      border: 1px solid skyblue;
    }
  </style>
</head>
<body>
  <button>AJAX请求</button>
  <div id="result"></div>
  <script>
    // 获取元素
    var btn = document.getElementsByTagName("button")[0]
    var result = document.getElementById('result')

    // 绑定事件
    btn.onclick = function(){
      // 创建对象
      var xhr = new XMLHttpRequest()
      // 初始化。设置请求方法和地址
      xhr.open('GET','http://127.0.0.1:8000/server')
      // 发送
      xhr.send()
      // 事件绑定，处理服务端返回的结果
      xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
          if(xhr.status>=200&&xhr.status<300){
            result.innerHTML = xhr.response
          } 
        }
      }
    }
  </script>
</body>
</html>

服务器端：

// 引入express
const  express = require('express')
// 创建应用对象
const app = express()
// 创建路由规则
app.get('/server',(request,reponse)=>{
  reponse.setHeader('Access-Control-Allow-Origin','*')
  reponse.send('hello ajax')
})
// 监听端口
app.listen(8000,()=>{
  console.log("服务器已启动，8000端口正在响应中...")
})

点击按钮后结果：
在这里插入图片描述
思考：Get请求如何传递参数呢？

xhr.open('GET',http://127.0.0.1:8000/server?a=1&b=2&c=3),

1.4.2 ajax发送POST请求基本操作

创建post请求html：

<!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: 100px;
      height: 50px;
      border: 1px solid rgb(228, 29, 175);
    }
  </style>
</head>
<body>
  <div id="result"></div>
</body>
<script>
  const result = document.getElementById('result')
  result.addEventListener('mouseover',()=>{
    // 创建对象
    var xhr = new XMLHttpRequest()
    // 初始化，设置请求方式、地址
    xhr.open('POST','http://127.0.0.1:8000/server')
    // 发送
    xhr.send()
    // 处理服务器返回的数据
    xhr.onreadystatechange = function(){
      if(xhr.readyState==4){
        if(xhr.status>=200&&xhr.status<300){
          result.innerHTML = xhr.response
        }
      }
    }
  })
</script>
</html>

创建server.js

// An highlighted block
// 引入express
const  express = require('express')
// 创建应用对象
const app = express()
// 创建路由规则
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 ajax1')
})
// 监听端口
app.listen(8000,()=>{
  console.log("服务器已启动，8000端口正在响应中...")
})

鼠标悬停结果：
在这里插入图片描述
那么，post请求如何传递参数呢？
在这里插入图片描述
浏览器可以看到：
在这里插入图片描述

1.4.3 ajax设置请求头信息

在这里插入图片描述

服务器端：
在这里插入图片描述

1.4.2 服务器端响应JSON信息

json.html
方式一：

<!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: 100px;
      height: 50px;
      border: 1px solid pink;
    }
  </style>
</head>
<body>
  <div id="result"></div>
</body>
<script>
  var result = document.getElementById('result')
  result.onmousedown = function(){
    var xhr = new XMLHttpRequest()
    // 1、设置响应体数据的类型为json,后xhr.response会自动转换为对象
    xhr.responseType = 'json'
    xhr.open('POST','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.name
        }
      }
    }
  }
</script>
</html>

方式二部分代码：

 result.onmousedown = function(){
    var xhr = new XMLHttpRequest()
    // 1、设置响应体数据的类型为json,后xhr.response会自动转换为对象
    // xhr.responseType = 'json'
    xhr.open('POST','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.name
          // 手动设置JSON格式
          result.innerHTML = JSON.parse(xhr.response).name
        }
      }
    }
  }

server.js部分代码：

app.post('/json-server',(request,response)=>{
  const data = {
    'name':'jiangya'
  }
  response.setHeader('Access-Control-Allow-Origin','*')
  // send括号里面只能存放字符串格式的数据
  response.send(JSON.stringify(data))
})

鼠标点击返回结果：
在这里插入图片描述

1.4.3 处理网络延时或错误

html部分代码：

<body>
	<div id="result"></div>
</body>
<script>
	var result = document.getElementById("result");
	result.onmouseover = function () {
		var xhr = new XMLHttpRequest();
		xhr.open("GET", "http://127.0.0.1:8000/delay");
		xhr.send();
     xhr.timeout = 2000;
		xhr.ontimeout = function () {
			alert("网络异常，请稍后重试");
		};
		xhr.onerror = function () {
			alert("网络错误，请检查网络状态");
		};
		xhr.onreadystatechange = function () {
			if (xhr.readyState == 4) {
				if (xhr.status >= 200 && xhr.status < 300) {
				}
			}
		};
	};
</script>

server.js部分代码：

//延时设置
app.get('/delay',(request,response)=>{
  response.setHeader('Access-Control-Allow-Origin','*')
  setTimeout(() => {
    response.send('延时响应')
  }, 3000);
})

鼠标悬停2s后结果显示：
在这里插入图片描述
网络错误：
在这里插入图片描述

1.4.4 手动取消请求

<body>
   <button>请求数据</button>
	<button>取消请求</button>
</body>
<script>
	var btns = document.getElementsByTagName("button");
   let xhr = null
	btns[0].onclick = function () {
		xhr = new XMLHttpRequest();
		xhr.open("GET", "http://127.0.0.1:8000/delay");
		xhr.send();
	};
   // abort
   btns[1].onclick = function() {
     xhr.abort()
   }
</script>

1.4.4 请求重复发送问题

部分html代码：

<body>
    <button>请求数据</button>
		<button>取消请求</button>
</body>
<script>
	var btns = document.getElementsByTagName("button");
    let xhr = null
    //判断是否正在请求标志
    let isSending = false
		btns[0].onclick = function () {
      if(isSending) xhr.abort() //如果正在请求，则取消该请求，创建一个新的请求
      isSending = true
			xhr = new XMLHttpRequest();
			xhr.open("GET", "http://127.0.0.1:8000/delay");
			xhr.send();
      xhr.onreadystatechange = function(){
        if(readyState == 4){
          isSending = false
        }
      }
		};
    // abort
    btns[1].onclick = function() {
      xhr.abort()
    }
</script>

浏览器调试截图：
在这里插入图片描述

二、同源策略

什么是同源？
协议、域名、端口号完全相同
什么是跨域？
违背同源策略，就是跨域

2.1案例

index.html

<!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>同源策略</title>
</head>
<body>
  <button>获取数据</button>
</body>
<script>
  var btn = document.getElementsByTagName('button')
  btn[0].onclick = function(){
    var xhr = new XMLHttpRequest()
    // 满足同源策略，这里url可以简写
    xhr.open('GET','/data')
    xhr.send()
    xhr.onreadystatechange = function(){
      if(xhr.readyState==4){
        if(xhr.status>=200&&xhr.status<300){
          alert(xhr.response)
        }
      }
    }
  }
</script>
</html>

server.js

var express = require('express')
var 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端口正在运行中...')
})

在浏览器端地址栏输入端口号http://127.0.0.1:9000/home
在这里插入图片描述
点击按钮后
在这里插入图片描述

2.2 如何解决跨域

2.2.1 JSONP

1）什么是JSONP
JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求

2)JSONP是如何工作的
在网页有一些标签天生具有跨域能力，比如：img link iframe script。
JSONP 就是利用 script 标签的跨域能力来发送请求的。

3）JSONP的使用
html:

<!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>JSONP</title>
  <style>
    #result{
      width: 200px;
      height: 100px;
      border: 1px solid royalblue;
    }
  </style>
</head>
<body>
  <div id="result"></div>
</body>
<script>
  // 处理函数
  function handle(str){
    var result = document.getElementById('result')
    result.innerHTML = str
  }
</script>
<script src="http://127.0.0.1:8000/jsonp-server"></script>
</html>

server.js部分代码：

app.all('/jsonp-server',(request,response)=>{
  response.end("handle('姜姜鸭')")
})

最后浏览器结果：
在这里插入图片描述

2.2.2 CORS

链接: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

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

2)CORS 怎么工作的?
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应,以后就会对响应放行

3)CORS的使用

 response.setHeader('Access-Control-Allow-Origin','*')
小小姜鸭
关注
  • 20
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Ajax入门教程
qq_22075913的博客
03-31 5213
Ajax 学习目标 了解Ajax的概念和作用 了解同步和异步的区别 能够使用jQuery的$.get()和$.post()发送Ajax请求 能够使用jQuery的$.ajax()方法发送Ajax请求 能够定义和解析json 能够使用Jackson转换json格式 能够使用fastjson转换json格式 第一章-JS的AJAX 知识点- AJAX的概述 1.目标 能够理解异步的概念 2.路径 什么是Ajax 什么是异步 为什么要学习Ajax 3.讲解 3
Ajax 入门
hexiechuangxin的博客
02-13 1639
Ajax 入门
AJAX入门
weixin_46065399的博客
07-09 633
简单入门AJAX
ajax入门
dzz_bc的博客
05-24 520
AJAX    A  synchronous  J A vaScript and  X  ML 异步刷新传统方式如果校验用户名的话，需要提交验证，用户名存储在数据库中，只有提交才可与服务器交互。ajax是局部刷新的功能，下边的例子，就是可以直接和servlet交互，从而达到校验的目的。get方式jsp页面&lt;%@ page language="java" contentType="text/h...
java Ajax入门
qq_54088719的博客
12-01 7323
java Ajax入门 文章目录java Ajax入门前言一、同步和异步二、Ajax的使用JavaScript方法JQuery方法总结 前言 接下来整理一下Ajax相关的内容，AJAX（asynchronous js and xml），即异步的JavaScript和xml，它的主要作用就是让页面不必等待服务器返回整个页面信息，而可以通过异步的方式给服务器发送数据和获取数据，对页面进行局部刷新，是一种提高用户体验的技术。 一、同步和异步 同步和异步的主要区别如下； （1）同步：一个响应结束后才能发送下
Ajax入门案例
潘小蓝的博客
08-27 432
文章目录1、Ajax 简单介绍:2、原生Ajax:2.1 Ajax 简介:2.2 Ajax优点和缺点:2.3 请求报文和响应报文:2.4 原生方式实现Ajax异步:2.5 Jquery 方式实现 Ajax 异步: 1、Ajax 简单介绍: Ajax 是什么呢?为什么现在很多浏览器网站都在使用 Ajax 发送请求实现和后台的交互呢?带着些许的疑问,我们先来了解一下 Ajax 在网页上都有哪些应用。 应用一:搜索框提示: 可以看到,当我们在百度搜索“小潘”关键字的时候,会自动 产生一个 下拉提示的内容菜单
ajax新手教程,Ajax入门学习教程（一）
weixin_36265507的博客
08-05 425
1　什么是AJAXAJAX(Asynchronous JavaScript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML(当然，传输的数据不只是XML)。AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。与服务器...
python教程之ajax入门
09-07
### Python教程之AJAX入门知识点详解 #### 一、AJAX基础学习 1. **概念理解**： - **AJAX（Asynchronous JavaScript and XML）**：一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 - 主要通过在...
fieldIndex on a Row without schema is undefined
SunnyRivers
08-02 85
这种情况可能是因为第一次 flatMap 操作改变了原始 Dataset 的结构或类型，导致后续的操作失去了原有的 schema 信息。为了解决这个问题，你需要确保在 flatMap 中处理的数据仍然保持有 schema 信息。有些bug网络上可能没有对应的解决方式，不同是spark版本可能遇到不同的问题，我们可以根据给出的异常提示进行不同的尝试。明显能打印出schema信息，下面去尝试解决这个问题。我们直译一下大概就是你用row.getAs(“字段名”)的时候代码根本不清楚你这个row里面有哪些字段。
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1549
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
m0_62336925的博客
08-02 458
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
html+css+js实现一个简单的电商商城首页
爱敲代码的卡拉米的博客
08-02 227
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!绿泡泡：XiaoMei_NN。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 961
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
文章相关接口
最新发布
qq_74474809的博客
08-03 208
跟着黑马程序员学习SpringBoot3+Vue3
AJAX入门：新手快车道
"Ajax入门——电子书" Ajax，全称Asynchronous JavaScript and XML，是一种用于创建交互式网页应用的技术，它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。Ajax的核心在于利用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小小姜鸭

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

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

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

打赏作者

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

抵扣说明：

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

余额充值