Ajax的重要知识点：全是干货，新手学习，老手回顾

原创 已于 2024-04-03 18:27:11 修改 · 2.3k 阅读 · 19 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #学习 #前端

于 2024-04-03 18:23:44 首次发布

一，准备知识

1、Ajax优缺点

优点：

  1. 可以不刷新页面与服务器通信

  2. 可以根据用户事件更新部分页面内容

缺点：

  1. 无浏览记录，无法回退

  2. 存在跨域问题

  3. SEO不友好

2、HTTP协议

超文本传输协议，规定了浏览器与万维网服务器之间的交换规则，主要约定了两块内容：请求和响应。

①.请求报文（重点：记忆格式与参数就ok了）

四部分：

请求行（包含三部分：请求类型、URL路径、HTTP协议版本）；

请求头；

空行；

请求体；

行： POST /s?ie=utf-8 HTTP/1.1

头： Host: baidu.com

     Cookies:  name = wd

       Content-type: application/x-www-form-urlencoded

          User-Agent: Chrome 83

         格式：名字：空格 值

空行

请求体：get请求为空 post请求可以不为空

比如：username = admin&password = admin

②.响应报文

行：HTTP/1.1 200 OK （协议版本 状态码 状态字符串

头   类型 长度

空行

体 返回结果

3、浏览器控制台查看报文

  1. F12

  2. Network

  3. 刷新-会列出来网页发送的所有的请求

  4. 点第一个请求

  5. 会出现Headers Preview Respoonse（响应体在这看） Initiator Timing Cookies

    重点是 Headers（重点Response Headers：响应头 Request Headers：请求头） Response

    请求报文查看：Headers下面的请求头Request Header +请求体 Form Data 响应报文查看 Headers下面的Response Headers和Response

  6. 使用get请求有参数的时候 在Headers里面还会有一个Query String Parameters放参数的地方；

4、安装Node.js Express框架

why：Ajax会给服务端发请求，需要一个服务端,而Express是基于Node的一个服务端框架，只需要掌握基本使用就ok了

安装完Node.js（node安装省略，很简单），后安装express：：：

  1. 在vscode软件项目最外层文件中，打开终端

  2. 终端输入代码初始化：npm init --yes

  3. 安装express框架：npm i express

  4. 引入express

 //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 端口监听中....");
 });

5.执行脚本：node express基本使用.js

6.浏览器查看http://127.0.0.1:8000/，输出HELLO EXPRESS

二、Ajax基本操作

1、点击获取数据的案例（GET）

案例：HTML页面有一个div框 有一个button框 点击按钮 使接收到的请求数据返回到div框内

①准备工作：

准备：1、HTML页面文件

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <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 id = "btn">点击发送请求</button>
     <div id="result"></div>
     <script>
     //获取button元素
      const btn = document.querySelector('#btn');
      const result = document.querySelector('#result')
     </script>
 </body>
 </html>

2、express.js文件

 //1. 引入express
 const express = require('express');
 ​
 //2. 创建应用对象
 const app = express();
 ​
 //3. 创建路由规则
 // request 是对请求报文的封装
 // response 是对响应报文的封装
 app.get('/server', (request, response)=>{
    //设置响应头
 response.setHeader('Access-Control-Allow-Origin','*');
     //设置响应体
     response.send('HELLO AJAX');
 });
 ​
 //4. 监听端口启动服务
 app.listen(8000, ()=>{
     console.log("服务已经启动, 8000 端口监听中....");
 });

特别注意：

路由设置./server是指浏览器向服务器发送请求的时候，ulr路径也就是请求行的第二行内容，路径是/server，则会执行后面的回调函数，由response执行响应

响应头的设置response.setHeader('Access-Control-Allow-Origin','*'); 代表设置可以跨域

②创建一个Ajax对象
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <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 id="btn">点击发送请求</button>
     <div id="result"></div>
 ​
     <script>
         //获取button元素
      const btn = document.querySelector('#btn');
      const result = document.querySelector('#result')
         //绑定事件写法
       btn.addEventListener('click',function(){
             //1. 创建对象
       const xhr = new XMLHttpRequest();
             //2. 初始化 设置请求方法和 url
             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;
                     }else{
 ​
                     }
                 }
             }
 ​
         })
     </script>
 </body>
 </html>
③如何给Ajax请求中设置url参数

原始代码见上面代码块28 29行

 //原始代码
   xhr.open('GET', 'http://127.0.0.1:8000/server');
 //如何传参
 //直接在设置url后面+参数，问号分割，参数名字=值，然后&连接下一个参数和值
  xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
 //如何在Chrome调试查看参数-F12-Network-Headers-Query String Parameters-可以查看参数是否存在

2、AJAX的POST请求案例

页面中一个div框，鼠标放在框内的时候，发送一个POST请求，将响应体在div内部进行呈现

①准备工作：

HTML方面：设置div框 绑定元素 绑定事件

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AJAX POST 请求</title>
     <style>
         #result{
             width:200px;
             height:100px;
             border:solid 1px #903;
         }
     </style>
 </head>
 <body>
     <div id="result"></div>
     <script>
         //获取元素对象
         const result = document.getElementById("result");
         //绑定事件
         result.addEventListener("mouseover", function(){
             //后面写
         });
     </script>
 </body>
 </html>

JS方面：

路由规则 方法改为post（小写）

 app.post('/server', (request, response) => {
     //设置响应头  设置允许跨域
     response.setHeader('Access-Control-Allow-Origin', '*');
     //设置响应体
     response.send('HELLO AJAX POST');
 });
②创建AJAX对象

下面的代码放在上面的function中

  //1. 创建对象
      const xhr = new XMLHttpRequest();
             //2. 初始化 设置类型与 URL
   xhr.open('POST', 'http://127.0.0.1:8000/server');
 //设置请求头，open后面这个方法是设置请求头，接受两个参数，一个是头的名字，第二个是值，后面会讲，跟本小节案例无关
 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
             //3. 发送
             xhr.send();
             //4. 事件绑定
         xhr.onreadystatechange = function(){
                 //判断
            if(xhr.readyState === 4){
      if(xhr.status >= 200 && xhr.status < 300){
                         //处理服务端返回的结果
          result.innerHTML = xhr.response;
                     }
                 }
             }
③POST请求中如何设置参数

在页面文件xhr.send()的send方面中设置参数，见上面代码块的第8行

  xhr.send('a=100&b=200&c=300');
 //请求体的这些参数 可以写任意格式的参数和值，如
 //xhr.send('a:100&b:200');
 //xhr.send('12345')

3、AJAX如何设置请求头信息

见上面代码块5-6行

 //HTML文件中的操作
 //设置自带的头信息属性
 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 ​
 //加入自定义的头信息，比如以下
 xhr.setRequestHeader('name','ycc');
 //上面这行代码在浏览器中运行会报错，浏览器有安全机制，name属性是我们单独加的自定义属性，因此会报错。如果需要解决报错这个问题，需要在后端文件中，设置响应头的地方加上下面这行代码，而在实际开发中，这种事一般是后端人员的工作
 ​
 //JS文件中的操作
 //下面这行代码表示所有类型的头信息浏览器都可以接收
 response.setHeader('Access-Control-Allow-Headers','*')
 //还需要把js文件里的路由规则的app.post改成app.all

4、服务端响应JSON数据

why：在开发中 大部分时候都是返回的JSON格式的数据，因此这块必须掌握，知道结果怎么处理

案例：HTML中有一个div框，键盘按下任意按键，就会对服务器发送请求，将响应数据中的值在div中呈现

HTML部分

 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         #box{
             height: 200px;
             width: 300px;
             border: 1px solid red;
         }
     </style>
 </head>
 <body>
     <div id="box"></div>
     <script>
         const box = document.querySelector('#box');
         window.addEventListener('keydown',()=>{
             //1.创建Ajax实例
             const xhr = new XMLHttpRequest();
             //2.设置响应体数据的类型,接收到的数据类型为json 后面方便直接调用,和下面的方法一不能并存
             xhr.responseType = 'json';
             //3.初始化，发送请求，获取路径
             xhr.open('GET','http://127.0.0.1:8000/json-server');
             //4.发送send请求
             xhr.send();
             //5.事件绑定，当服务器响应结束后应该进行的操作
             xhr.onreadystatechange = function(){
                 //判断是否服务器到第四个阶段
                 if(xhr.readyState === 4){
                     //判断是否状态码为2**，成功状态码
                     if(xhr.status >= 200 & xhr.status <300){
                         //进行json数据操作，得到服务器响应数据
                         //测试是否得到响应体
                         // console.log(xhr.response);
                         // box.innerHTML = xhr.response;
 ​
                         // /*方法一：手动数据转换，xhr.response是一个json格式字符串
                         // 想要获取其中的一个数据就比较麻烦，可以借助下面的方法转换成一个对象*/
                         // let data = JSON.parse(xhr.response);
                         // // console.log(data);
                         // box.innerHTML = data.age;
 ​
                         // 方法二：自动转换数据，23行取消注释，设置接收数据类型为json格式，自动转换成对象
                             box.innerHTML = xhr.response.age;
                     }
                 }
             }
 ​
 ​
         })
     </script>
 </body>
 </html>

易错点：①：25行http://127.0.0.1:8000/json-server中的//不能少 ②23行的代码跟41行的Json.parse不能一起使用

js部分

 ​
 //一、JSON需要的js文件
 //1.引入express
 const express = require('express');
 //2.创建应用
 const app = express();
 //3.创建理由规则-Json响应
 app.all('/json-server',(request,response) => {
     //设置允许跨域的响应头
     response.setHeader('Access-Control-Allow-Origin','*');
     //设置允许自定义响应头
     response.setHeader('Access-Control-Allow-Headers','*');
     //响应一个数据
     const data ={
             age: 26
     };
     //对对象进行字符串转化，因为最后的send方法只能接受字符串类型
     let str = JSON.stringify(data);
     //设置响应体，发送数据
     response.send(str);
 });
 ​
 //监听端口启动服务
 app.listen(8000, ()=>{
     console.log("服务已经启动, 8000 端口监听中....");
 });

5、下载nodemon插件

why：AJAX练习学习，会经常修改服务端代码，nodemon插件可以帮助在服务端代码改变的时候，自动重启

直接在vscode终端进行操作安装：npm install -g nodemon

使用方法：nodemon server.js启动软件

6、IE缓存问题

IE浏览器和AJAX交互的时候，会把交互的结果进行缓存，下一次再触发事件的时候，并不会重新使用Ajax发送请求，而是直接从本地缓存调取数据，因此，需要解决这个问题，一般而言就是在初始化发送请求的URL后面加一个参数

 //原始代码
 xhr.open('Get','http://127.0.0.1:8000/ie')
 //修改之后的代码
 xhr.open('Get','http://127.0.0.1:8000/ie?t='Date.now())

7、请求超时与网络异常响应

主要依靠在js文件中使用 SetTimeOut

主要代码：

1、超时设置，超过多少毫秒就算超时，取消发送请求

xhr.timeout = 2000 ;

2、超时回调，请求超时后执行后面的回调函数

xhr.ontimeout = function(){

//执行操作，比如弹窗提醒 }

3、网络异常回调（如何测试，浏览器F12-Network-Online）

xhr.onerror = function(){}

案例：按钮+div，①点击按钮，如果超时就取消发送请求并执行回调弹窗提醒 ②测试网络异常情况下，弹窗提醒

准备：因为要测试延迟，我们可以以2秒钟算超时，那么需要再服务端js中加一个定时器，比如三秒钟发送响应报文

开干：

HTML：

 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>延时响应测试</title>
     <style>
         #box{
             border: 1px solid red;
             width: 300px;
             height: 200px;
         }
     </style>
 </head>
 <body>
     <button id="btn">点击发送数据</button>
     <div id="box"></div>
     <script>
         //绑定点击事件
         const btn = document.querySelector('#btn');
         const box = document.getElementById('box');
         btn.addEventListener('click',()=>{
             //创建AJAX实例
             const 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){
                     //判断是否返回2**成功状态码
                     if(xhr.status >= 200 & xhr.status < 300){
                         //进行操作响应，根据服务端的响应，延迟三秒后出现
                         box.innerHTML = xhr.response;
 ​
                     }
                 }
             }
         })
     </script>
 </body>
 </html>

JS：

 ​
 ​
 //1.引入express
 const express = require('express');
 //2.创建应用
 const app = express();
 //创建路由规则
 app.get('/delay',(request,response)=>{
     //设置允许跨域的响应头
     response.setHeader('Access-Control-Allow-Origin','*');
     //设置一个延时发送响应,3秒发送一个请求到浏览器
     setTimeout(()=>{
         response.send('延迟了三秒的数据')
     },3000)
 })
 //监听端口启动服务
 app.listen(8000, ()=>{
     console.log("服务已经启动, 8000 端口监听中....");
 });

8、AJAX取消请求

借助方法：xhr.abort

案例：两个按钮，一个按钮发送请求，一个按钮取消请求

 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <button>点击发送</button>
     <button>点击取消</button>
     <script>
         //获取元素 绑定事件
         const btns = document.querySelectorAll('button');
         //给第一个按钮绑定一个发送ajax请求的事件
         let x = null;
         btns[0].onclick = function(){
             //创建ajax实例
             x = new XMLHttpRequest();
             x.open('GET','http://127.0.0.1:8000/delay');
             x.send()
         }
         //给第二个按钮绑定一个ajax取消事件
         btns[1].addEventListener('click',()=>{
             x.abort();
         })
     </script>
 </body>
 </html>

9、性能优化，重复发送请求

案例：当用户多次点击一个事件，发送多次请求的时候，服务器会接收到很多相同请求，不利于性能优化，

需求实现：因此，我们在发送请求的时候，可以检测一下，是否之前发送过相同的请求，如果发送过相同的请求，可以把之前发送的请求取消掉，重新发送一个新的请求

代码分析：需要判断是否有正在发送的ajax请求，如果有的话，那么就取消，然后重新发送。因此需要在外部声明一个标识变量，来存储是否有ajax请求，先传入false的值，表示没有，然后进行元素事件绑定，判断是否标识变量为true，是true的话，执行abort方法，然后创建ajax实例，将变量值改为true，然后发送ajax请求，然后进行服务器事件绑定，在服务器事件绑定内部，当readyState状态为4的时候，即服务器响应完成之后，整个ajax交互完成，修改标识变量为false。详情代码如下：

 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <button>发送请求</button>
     <script>
         const btn = document.querySelector('button');
         //13行代码易错点，因为会反复创建ajax实例，因此不能在下面绑定事件内部const创建
         let xhr =null;
         let isSending = false;
         btn.onclick = function(){
             if(isSending) xhr.abort();
             xhr = new XMLHttpRequest();
             isSending = true;
             xhr.open('GET','http://127.0.0.1:8000/delay');
             xhr.send();
             xhr.onreadystatechange = function(){
                 if(xhr.readyState === 4){
                     isSending = false; 
                 }
             }
             }
         
     </script>
 </body>
 </html>

易错点13行变量

10、重点：在Axios中如何发送ajax请求，这个涉及到Axios，我先更新Axios再更新

catchchen
关注
全网最全的Java项目系统源码+LW
程序猿麦小七
02-05 16万+
临近学期结束，还是毕业设计，你还在做java程序网络编程，期末作业，老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。你有题目我就有项目，包安装运行成功。文档较大，请耐性等待，可用电脑打开，(CTRL+F)精准搜索题目关键词查询。
【SpringBoot系列】Springboot 重点知识点最强整理
我是香菜
11-22 7677
目录 1、springboot controller 单例 2、Springboot 环境变量配置 3、restful 接口 4、@ResponseBody 和 @RequestBody 的区别 5、@Schedule 6、async异步调用 7、request 的获取方式和线程安全 1、springboot controller 单例 Spring中 controller默认是单例的，因为单例所以不是线程安全的。 所以需要注意下面几点 不要在Controller中定义成员变量，可
Ajax知识点总结
07-30
Ajax由html、javascript技术、dhtml和DOM组成这个方法可以将web界面转化成交互性的ajax应用程序
ajax知识点总结
06-18
ajax知识点总结
初学者必看的Ajax总结篇
Lucky_LXG的博客
02-07 624
一、Ajax简介、优劣势、应用场景以及技术 Ajax简介 : Asynchronous Javascript And XML （异步的JavaScript和XML） 它并不是一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所形成的结合体 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这
AJAX知识点整理
JHY97的博客
03-28 1589
一、原生AJAX 1.1 AJAX简介 AJAX，即异步的JS和XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大优势：无刷新获取数据。AJAX是一中将现有的标准组合在一起使用的新方式 在网页中的应用： 搜索栏中输入后有相关关键词提醒 注册或者登录界面下，输入框输入内容后可能出现的下方文字提醒 鼠标移动到某一区域，弹出 上/下方 功能模块 移动到菜单栏，弹出二级或者三级的菜单栏 1.2 XML简介 XML 可扩展标记语言 XML 被设计用来传输和存储数据 XML和HTML类似，
JAVA重要知识点梳理（一）
wzk646795873的博客
05-04 1万+
1、Struts2和SpringMVC的区别（1）设计理念：前者为有状态的Action(均为多例)，Action对象属性字段承载请求、响应，后者一般为无状态的Controller，请求直接封装到方法的参数中；（2）集中访问点不同：都属于前端控制器，用于接收请求、处理请求和生成响应，但集中访问点不同，前者为Filter，后者为Servlet；（3）请求处理粒度不同：前者一个Action对应一个请求上...
Ajax全套增删改查：
weixin_43666859的博客
11-29 4928
Ajax全套增删改查： 下面的代码是写在zhanghao_create.js文件中的，然后在zhanghao_create.jsp页面中使用script标签将该js文件引入即可。 $(function(){ //这是JQuery中的页面加载函数 // 点击下拉菜单，就会进行查询身份下拉菜单 $.ajax({ url:&quot;/Pro_StudentMS/servlet/Accoun...
java框架 零基础从入门到精通的学习路线 附开源项目面经等（超全）
热门推荐
码农研究僧的博客
10-01 3万+
这篇文章主要总结我之前所学过的框架以及学习路线 从实打实的零基础到框架再到项目 之后实习工作 🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF 也在这篇博客中记录我的学习笔记 以及在笔记中遇到的配置安装、代码bug等错误 都从零开始摸索并且记录了下来 后期也会一直实时更新 一键三连防丢失
1.01---Web1 到 Web3 全进化图解：从中心化到可编程资产的互联网革命
最新发布
鄙人kunzhi96，感恩遇见！
07-04 1万+
《Web3开发者的思维与技术跃迁》摘要：本文系统梳理了Web1到Web3的演进历程，揭示Web3作为价值互联网的本质特征——去中心化、用户主权、可编程资产和链上自治。通过对比三代互联网的核心差异，解析Web3的底层架构（钱包层、合约层、执行层等），重点阐述两大范式转变：1）链上身份取代账号密码，签名即授权；2）资产可编程化，智能合约定义经济规则。文章为Web2开发者提供思维转换指南，从平台控制转向协议信任，涵盖技术栈变迁、安全模型重构等关键认知，辅以代码示例帮助理解智能合约的资产编程逻辑。
AJAX总结
...
12-09 193
  简介 AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网...
ajax总结（一）
ing
03-22 4054
Ajax总结l     什么是 Ajax读音：e:j^ks 。AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。l     Ajax技术的产生ü        Ajax被认为是(Asynchrono
Ajax 知识点
qq_39451059的博客
12-18 264
1.Ajax概述 1.优点： 无页面刷新，用户体验好 2.请求与响应 请求：访问服务器端的任何一个程序都可以成为请求 响应：服务器接收请求，并根据请求的内容处理，将处理结果返回给客户端成为响应。 ajax模式在注册用户案例中也有2次请求和响应。 1.请求1和响应1.与传统模式一致 2.在用户名文本框上绑定失焦事件，一但失焦就会触发一次请求，将用户名发送后台程序，响应2：与传统模式一...
Ajax知识点
woai_mihoutao的博客
04-28 666
一、Ajax基础 1. 传统网站中存在的问题 网速慢的情况下,页面加载时间长,用户只能等待 表单提交后,如果一项内容不合格,需要重新填写所有表单内容 页面跳转,重新加载页面,造成资源浪费,增加用户等待时间 2. Ajax概述 Ajax:标准读音['ei,dʒaeks]，中文音译:阿贾克斯 它是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应田的体验。 3. Ajax的应用场景 页面上拉加载更多数据 列表数据无刷新分页（例如当点击某个网页的左边侧边栏时，只有右边的内容发生改
AJAX 教程
奋斗的日子最甜美，在科技的海洋里，永无止境。
01-04 460
AJAX 教程 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器
ajax的知识点
weixin_40214184的博客
12-17 233
1、什么是同步？什么是异步？    同步：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态；    异步：客户端发送请求到服务器端，无论服务器是否放回响应，客户端都可以随意做其他事情，不会被卡死。 2、Ajax的运行原理     页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行操作，直到服务器...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值