AJAX教程

于 2021-12-12 21:55:21 发布
阅读量777 收藏 1
点赞数 1
文章标签： ajax javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lovely_ll/article/details/121893627
版权
本文详细介绍了AJAX的基础知识，包括AJAX的定义、XML介绍、优点和缺点。接着深入探讨了HTTP相关问题，如HTTP请求交互过程、请求报文和响应报文结构。此外，讲解了原生AJAX的使用步骤和案例，以及在jQuery、Axios和fetch中的实现。同时，文章还涵盖了AJAX的跨域问题，包括JSONP和CORS的原理和使用方法。
摘要由CSDN通过智能技术生成

1.Ajax概述

1.1 AJAX 简介

​ AJAX 全称为Asynchronous JavaScript And XML，就是异步的JS 和XML通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据

​ AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

1.2 XML 简介

​ XML 可扩展标记语言。
​ XML 被设计用来传输和存储数据。
​ 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. 没有浏览历史，不能回退
  2. 存在跨域问题(同源)
  3. SEO 不友好

2. HTTP相关问题

2.1 MDN 文档

MDN参考网站

2.2 HTTP 请求交互的基本过程

img

  1. 前后应用从浏览器端向服务器发送HTTP 请求(请求报文)
  2. 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
  3. 浏览器端接收到响应, 解析显示响应体/调用监视回调

2.3 HTTP 请求报文

1.请求行

​ method url
​ GET /product_detail?id=2
​ POST /login

2.多个请求头

​ Host: www.baidu.com
​ Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;
​ Content-Type: application/x-www-form-urlencoded 或者application/json

3.请求体

​ username=tom&pwd=123
​ {"username": "tom", "pwd": 123}

2.4 HTTP 响应报文

1.响应状态行: status statusText
2.多个响应头
Content-Type: text/html;charset=utf-8
Set-Cookie: BD_CK_SAM=1;path=/
3.响应体
html 文本/json 文本/js/css/图片...

2.5 post 请求体参数格式

  1. Content-Type: application/x-www-form-urlencoded;charset=utf-8
    用于键值对参数，参数的键值用=连接, 参数之间用&连接
    例如: name=%E5%B0%8F%E6%98%8E&age=12
  2. Content-Type: application/json;charset=utf-8
    用于 json 字符串参数
    例如: {"name": "%E5%B0%8F%E6%98%8E", "age": 12}
  3. Content-Type: multipart/form-data
    用于文件上传请求

2.6 常见的响应状态码

200 OK 请求成功。一般用于GET 与POST 请求
201 Created 已创建。成功请求并创建了新的资源
401 Unauthorized 未授权/请求要求用户的身份认证
404 Not Found 服务器无法根据客户端的请求找到资源
500 Internal Server Error 服务器内部错误，无法完成请求

2.7 不同类型的请求及其作用

  1. GET: 从服务器端读取数据（查）
  2. POST: 向服务器端添加新数据 （增）
  3. PUT: 更新服务器端已经数据 （改）
  4. DELETE: 删除服务器端数据 （删）

2.8 API 的分类

1.REST API: restful （Representational State Transfer (资源)表现层状态转化）

​ (1) 发送请求进行CRUD 哪个操作由请求方式来决定
​ (2) 同一个请求路径可以进行多个操作
​ (3) 请求方式会用到GET/POST/PUT/DELETE

2.非REST API: restless

​ (1) 请求方式不决定请求的CRUD 操作
​ (2) 一个请求路径只对应一个操作
​ (3) 一般只有GET/POST

2.9 区别 一般http请求 与 ajax请求

  1. ajax请求 是一种特别的 http请求
  2. 对服务器端来说, 没有任何区别, 区别在浏览器端
  3. 浏览器端发请求: 只有XHR 或fetch 发出的才是ajax 请求, 其它所有的都是非ajax 请求
  4. 浏览器端接收到响应
    (1) 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
    (2) ajax请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据

3. 原生AJAX 的基本使用 XHR

3.0 准备工作

3.0.1 安装node.js

nodejs下载网址

3.0.2 安装express（服务端框架）

express官网

img

  1. 初始化环境
npm init --yes

​ 2.下载express包

npm install express --save

​ 3.编写js代码

// 1. 引入express
const express = require('express');

// 2. 创建应用对象
const app = express();

// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response) => {
   
  //  设置响应
  response.send("Hello Express");
});

// 4. 监听端口，启动服务
app.listen(8000, () => {
   
  console.log("服务已经启动, 8000 端口监听中...");
 })

​ 4.运行js程序

node .\express的基本使用.js

在这里插入图片描述

​ 5.打开网页显示页面

在这里插入图片描述

6.调试程序可以查看请求和响应

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.0.3 安装nodemon自动重启工具

文件内容有修改自动重新启动服务

nodemon下载网址

img

安装

npm install -g nodemon

启动服务

nodemon server.js

注意：启动时可能会报以下错误

nodemon : 无法加载文件 C:\Users\cell\AppData\Roaming\npm\nodemon.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

在这里插入图片描述

解决方案：

（1） 管理员身份运行PowerShell

（2）输入下面命令并回车

set-ExecutionPolicy RemoteSigned

（3）选择Y

在这里插入图片描述

（4）重新尝试

在这里插入图片描述

3.1 理解

  1. 使用XMLHttpRequest (XHR)对象可以与服务器交互, 也就是发送ajax 请求
  2. 前端可以获取到数据，而无需让整个的页面刷新。
  3. 这使得Web 页面可以只更新页面的局部，而不影响用户的操作。

XMLHttpRequest解释
XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的

3.2 核心对象使用步骤

3.2.1 创建XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

3.2.2 设置请求信息（请求方法和url）

// 请求方式
xhr.open(method, url);
//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

3.2.3 发送请求

xhr.send(body) //get请求不传 body 参数，只有post请求使用

3.2.4 接收响应（事件绑定，处理服务端返回的结果）

      //4.事件绑定 处理服务端返回的结果
      //onreadystatechange单词意思拆分：
        //on 有when的意思，可以理解为当....时候
        //readystate是xhr对象中的属性，表示状态 有五个值，分别为0 1 2 3 4
            //0状态表示未初始化
            //1表示open方法已经调用完毕
            //2表示send方法已经调用完毕
            //3表示服务端返回了部分的结果
            //4表示服务端返回了全部的结果
        //change 表示改变
	xhr.onreadystatechange = function (){
   
	if(xhr.readyState == 4 && xhr.status == 200){
   
		var text = xhr.responseText;
		console.log(text);
	}
}

3.2.5 整体页面代码

<!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 GET 请求</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.getElementsByTagName('button')[0];
    const result=document.getElementById("result");
    //绑定事件
    btn.onclick=function(){
     
      //1.创建对象
      const xhr=new XMLHttpRequest();
      //2.初始化 设置请求方法和url
      xhr.open('GET','http://localhost:8000/server?a=100&b=200&c=300')
      //3.发送
      xhr.send();
      //4.事件绑定 处理服务端返回的结果
      //onreadystatechange单词意思拆分：
        //on 有when的意思，可以理解为当....时候
        //readystate是xhr对象中的属性，表示状态 有五个值，分别为0 1 2 3 4
            //0状态表示未初始化
            //1表示open方法已经调用完毕
            //2表示send方法已经调用完毕
            //3表示服务端返回了部分的结果
            //4表示服务端返回了全部的结果
        //change 表示改变
      xhr.onreadystatechange=function(){
     
        //判断(服务端是否返回了全部的结果)
        if(xhr.readyState===4){
     
          //判断响应的状态码 例如，200 404 403 401 500
            //补充：响应状态码中 2xx 都是表示成功
          if(xhr.status >=200&&xhr.status<300){
     
            //处理结果 行 头 空行 体
            //1.响应行
            // console.log(xhr.status);//状态码
            // console.log(xhr.statusText);//状态字符串
            // console.log(xhr.getAllResponseHeaders());//所有的响应头
            // console.log(xhr.response);//响应体

            //设置result的文本
            result.innerHTML=xhr.response;
          }
        }
      }
    }
  </script>
</body>
</html>

3.3 使用案例

3.3.1 GET 请求

点击返回响应信息

img

创建两个文件，浏览器端使用的html文件和服务器端使用的js文件
在这里插入图片描述
服务器端 server.js

//1.引入express
const express = require('express')

//2.创建应用对象
const app = express()

//3.创建路由规则
//request是对请求报文的封装
//response是对相应报文的封装
app.get('/serve', (request, response) => {
   
  //设置响应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')
  //设置响应体
  response.send('HELLO AJAX')
})

//4.监听端口启动服务
app.listen(8000, () => {
   
  console.log('服务已经启动，8000端口监听中.....')
})

启动服务

node .\server.js

在这里插入图片描述

前端页面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 GET 请求</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.getElementsByTagName('button')[0];
    const result = document.getElementById('result');
    //绑定事件
    btn.onclick = function(){
     
      // 1. 创建对象 
      const xhr = new XMLHttpRequest();
      // 2. 初始化 设置请求方法和url
      xhr.open('GET', 'http://localhost:8000/server')
      // 3. 发送
      xhr.send();
      // 4. 事件绑定 处理服务端返回的结果
      xhr.onreadystatechange = function(){
     
        // readyState 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
        //判断 (服务端返回了所有的结果)
        if(xhr.readyState === 4){
     
          //判断响应状态码 200  404  403 401 500
          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;
          }else{
     
          }
        }
      } 
    }
  </script>
</body>
</html>

img

# GET 请求设置请求参数

设置url参数

xhr.open('GET', 'http://localhost:8000/server?a=100&b=200&c=300');

在这里插入图片描述
在这里插入图片描述

3.3.2 POST请求

鼠标放到div中，发post请求，将响应体放在div中呈现

server.js添加post

app.post('/server', (request, response) => {
   
  // 设置响应头, 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*'
最低0.47元/天 解锁文章
lovely_ll
关注
ajax教程
08-15
介绍ajax的教程,感觉还行,建议下载使用
AJAX 教程
12-14
AJAX 教程 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换...
AJAX教程：
qq_41302958的博客
11-02 297
1.AJAX 地址回车、a、表单提交等几种方式都可以向服务器提交请求(同步请求)，服务器在处理的过程中，浏览器只能等待…。这种 同步访问的效率低。 1.什么是AJAX ​ Asynchronous Javascript And Xml ​ 异步的 JS 和 xml(EXtensible Markup Language) ​ 通过 JS 异步的向服务器发送请 求并接收响应数据。数据格式是XML格式。A：异步；J:Javascript代码 A:and,和X:Xml，一种数据
Ajax 完整教程
Gerry的专栏
08-13 2035
Ajax 完整教程第 1 页 Ajax 简介Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家，他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱，包括 XMLHttpR
AJAX基础教程
习习徐风---专栏
10-25 2421
AJAX基础教程 　　这篇文章将带您浏览整个AJAX的基本概貌,并展示两个简单的例子让您轻松上路. 　　什么是 AJAX? 　　AJAX (异步 JavaScript 和 XML) 是个新产生的术语,专为描述JavaScript的两项强大性能.这两项性能在多年来一直被网络开发者所忽略,直到最近Gmail, Google suggest和google Maps的横空出世才使人们开始意识到其重要性.
四天学会ajax_ajax教程.pdf
05-09
【Ajax技术概述】 Ajax，全称为Asynchronous JavaScript and XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax并非一种全新的编程语言，而是利用已有的Web技术（如HTML、JavaScript、DOM...
ajax教程_Ajax教程_
10-02
**Ajax教程** Ajax，全称为"Asynchronous JavaScript and XML"（异步JavaScript和XML），是一种创建动态网页的技术。它允许在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容，极大地提升了用户...
AJAX学习教程
12-16
学习AJAX开发初步，达到能基本使用AJAX进行开发应用
ajax入门基础教程
09-01
ajax javascript web 入门的教材 比较适合刚学习js的人使用，浅显易懂，多做例子就可以了
javascript进击（七）Ajax
dianqueshi9054的博客
01-04 315
AJAX AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 AJAX 是一种用于创建...
Ajax教程
qq_44037690的博客
01-02 244
预备知识 强烈建议您在尝试本教程之前熟悉HTML、XML和JavaScript。 Ajax教程 AJAX 简介 AJAX 实例 XHR 创建对象 XHR 请求 XHR 响应 XHR readyState AJAX ASP PHP AJAX 数据库 AJAX XML ...
AJAX 基础教程
爱睡的虫虫
05-20 926
AJAX 名词解释 同步 在一段时间内，只能做一件事情 同步访问：在访问服务器时，客户端只能等待服务器的相应，不能做其它事情。用户体验非常差 代表场合： 浏览器输入网址访问 a标记的默认跳转 submit按钮的表单提交 异步 在一段时间内，可以同时干多个事情 异步访问：在向服务器发送请求时，不耽误用户在网页上做其它操作 什么是AJAX Asynchronous Javascript And Xml...
AJAX
热门推荐
高飞的博客
12-28 31万+
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值