AJAX

最新推荐文章于 2024-09-11 15:33:18 发布
最新推荐文章于 2024-09-11 15:33:18 发布
阅读量199 收藏
点赞数
文章标签： ajax javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li_chun_can/article/details/120188095
版权

AJAX的定义

AJAX是异步的JavaScript和XML;
AJAX是一种用于创建更好更快以及交互性更强的Web应用程序的技术;
AJAX是一种独立于Web服务器软件的浏览器技术;
AJAX不是一种新的编程语言，而是一种技术;
AJAX 使用 JavaScript 在web 浏览器与 web 服务器之间来发送和接收数据（前端后端交互）;
AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求）。
在这里插入图片描述

XMLHttpRequest

XMLHttpRequest使用方法

步骤：
1.创建XMLHTTPRequest对象
2.使用open()方法设置和服务器的交互信息
3.设置requestHeader()
4.设置发送的数据，开始和服务器端交互
5.取得响应，注册事件
6.如果请求完成，并且响完成，可以获取到响应数据
7.响应解码

实例

<!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>
</head>
<body>
    <button onclick="getData()">获取数据</button>
    <script>
        function getData(){
            // 发送请求
            // 1.使用XMLHttpRequest创建一个实例
            var request=new XMLHttpRequest();
            // 2.使用open方法设置和服务器的交互信息
            request.open('get','https://api.muxiaoguo.cn/api/lishijr');
            // 3.设置requestHeader() 如果默认可不设置requestHeader
            // request.setRequestHeader()
            // 4.send()发送请求
            request.send()
            // 5.获取响应 如果请求完成，并且响应完成，获取到响应数据
            request.onreadystatechange=function(){
                // status===200 readyState===4
                if(request.readyState===4&&request.status===200){
                    console.log(request.responseText);
                    var res=JSON.parse(request.responseText)
                    console.log(res);
                    // 根据数据添加对应的节点
                    for(var arrIndex in res.data){
                        // 创建一个节点
                        var p=document.createElement('p');
                        p.innerHTML=res.data[arrIndex].title;
                        document.body.appendChild(p);
                    }
                }
            }
        }
    </script>
</body>
</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>
    <!-- 引入序列化工具 -->
    <script src="./qs.js"></script>
</head>
<body>
     <button onclick="getParams()">获取有参get请求</button>
     <button onclick="postNo()">post无参</button>
     <button onclick="toLogin()">登录</button>
     <script>
   		// 使用get发送有参请求
         function getParams(){
             var request=new XMLHttpRequest();
            // 第一种方式 拼接字符串
            //request.open('get','https://api.muxiaoguo.cn/api/tianqi?' + 'city=' + '苏州' + '&' + 'type=' + '1');         
            // 第二种方式 传递序列化后的参数
            var params={
                city:'苏州',
                type:1
            }
            // 参数序列化 要先引入QS序列化工具
            var qs=Qs;
            request.open('get','https://api.muxiaoguo.cn/api/tianqi?'+qs.stringify(params));
            request.send();
            console.log(qs.stringify(params));
            request.onreadystatechange=function(){
                if(request.readyState===4&&request.status===200){
                    console.log(request.responseText);
                }
            }
        }
				
		// 使用post发送无参请求
		 function postNo() {
		    var request = new XMLHttpRequest()
		    request.open('post','https://api.muxiaoguo.cn/api/Gushici');
		    request.send();
		    request.onreadystatechange = function () {
		      if (request.readyState === 4 && request.status === 200) {
		        console.log(request);
		      }
		    }
		  }
				  
		// 使用post发送有参请求
		function toLogin(){
            var user={
                password:'123321',
                username:'admin1'
            }
            // 1.创建XHR实例
            var request=new XMLHttpRequest();
            // 2.设置open()
            request.open('post','http://139.196.88.7:8888/user/login');
            // 3. 设置请求头
            request.setRequestHeader('Content-type','application/json');
            // 4.发送请求
            request.send(JSON.stringify(user));
            // 5.获取响应
            request.onreadystatechange=function(){
                if(request.readyState===4 && request.status===200){
                    // console.log(request.responseText);
                    var res = JSON.parse(request.responseText)
                    console.log(res.data.token);
                }
            }
        }
     </script>
</body>
</html>

AJAX的封装

//针对行学天下系统 在引入util.js之前 要引入qs
var qs = Qs;
// 替换成自己的swagger地址
var baseURL = 'http://139.196.172.209:8888';
//1.提供登录方法，提供获取token方法
// user = {username:'',password:''}
function login(user) {
  var httpRequest = new XMLHttpRequest();
  httpRequest.open('post', baseURL + '/user/login');
  // 设置请求头部
  httpRequest.setRequestHeader('Content-Type', 'application/json');
  // 最终传递的数据
  httpRequest.send(JSON.stringify(user));
  //接受响应
  httpRequest.onreadystatechange = function () {
    if (httpRequest.readyState === 4 && httpRequest.status === 200) {
      //处理响应数据
      var res = httpRequest.responseText;
      var token = JSON.parse(res).data.token;
      //保存到sessionStorage中
      sessionStorage.setItem('token', token);
    }
    if (httpRequest.readyState === 4 && httpRequest.status === 500) {
      console.log('错误：', httpRequest.responseText);
    }
  }
}
//2.myAjax对象，对象里有get方法，postForm方法，postJSON方法
var myAjax = {
  get: function (url, params, success, error) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('get', baseURL + url + "?" + qs.stringify(params));
    // httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //认证
    httpRequest.setRequestHeader("Authorization", sessionStorage.getItem('token'));
    //发送请求
    httpRequest.send();
    httpRequest.onreadystatechange = function () {
      if (httpRequest.readyState === 4 && httpRequest.status === 200) {
        success(JSON.parse(httpRequest.responseText));
      }
      if (httpRequest.readyState === 4 && httpRequest.status === 500) {
        error(JSON.parse(httpRequest.responseText));
      }
    }
  },
  postForm: function (url, params, success, error) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('post', baseURL + url);
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //认证
    httpRequest.setRequestHeader(" Authorization", sessionStorage.getItem('token'));
    //发送数据
    httpRequest.send(qs.stringify(params));
    httpRequest.onreadystatechange = function () {
      if (httpRequest.readyState === 4 && httpRequest.status === 200) {
        success(JSON.parse(httpRequest.responseText));
      }
      if (httpRequest.readyState === 4 && httpRequest.status === 500) {
        error(JSON.parse(httpRequest.responseText));
      }
    }
  },
  postJSON: function (url, params, success, error) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('post', baseURL + url);
    httpRequest.setRequestHeader('Content-Type', 'application/json');
    //认证
    httpRequest.setRequestHeader(" Authorization", sessionStorage.getItem('token'));
    //发送数据
    httpRequest.send(JSON.stringify(params));
    httpRequest.onreadystatechange = function () {
      if (httpRequest.readyState === 4 && httpRequest.status === 200) {
        success(JSON.parse(httpRequest.responseText));
      }
      if (httpRequest.readyState === 4 && httpRequest.status === 500) {
        error(JSON.parse(httpRequest.responseText));
      }
    }
  }
};
_chun_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
谷歌浏览器插件—— Ajax Interceptor
03-16
**Ajax Interceptor：深入理解与应用** Ajax Interceptor 是一款专为谷歌浏览器（Chrome）设计的插件，它允许开发者在Ajax请求发送后和响应返回前进行干预，从而实现对AJAX请求数据的修改。这款插件对于前端开发、...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
Ajax的使用
星海IT学习之路
07-28 349
1.简介 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。 在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest能够自动帮你完成搜索单词。 Google Suggest 使用
关于ajax
diesi4323的博客
06-13 165
首先AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML） 英文全称 AsynchronousJavascriptAndXML Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。 使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTT...
AJAX技术解读
undoner
10-05 1357
读音：e:j^ks 。AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。 AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。   使用
ajax技术学习
yingfeng612的专栏
11-12 717
Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。            使用javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。           在一般的 Web 应用程序中，用户填写表单字段并单击 Submit
Ajax请求的使用
weixin_45274554的博客
09-14 215
AJAX介绍 AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。 1.XMLHttpReques
Ajax从入门到精通.pdf
05-09
Ajax从入门到精通.pdf 本书籍旨在深入浅出地介绍 Ajax 技术，从基础知识到高级应用，全面覆盖 Ajax 的核心概念、技术原理、实现方法和实践应用。书籍的主要内容包括： 1. Ajax 概述：本书首先介绍了 Ajax 的概念、...
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
C# 如何使用ajax请求
08-18
C# 如何使用ajax请求 C# 使用ajax请求是指在C# 项目中使用ajax技术来实现异步更新网页的内容。ajax即“Asynchronous Javascript And XML”（异步JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页...
AJAX详解
wk_txy的博客
03-21 377
AJAX 是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新 1.1 XMLHttp对象的使用，各个状态值的意思 XMLHTTP.readyState 五种状态 HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。（参照1-4） 1.2 使用后端服务层调用 客..
ajax的几种实现方式
黑马程序员广州中心的专栏
05-08 194
一、什么是 Ajax Ajax：Asynchronous javascript and xml，实现了客户端与服务器进行数据交流过程同时是异步发送请求。Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。 使用技术的好处是：不用页面刷新，并且在等待页面传输数据的同时可以进行其他操作。 二、原生 JS 实现 Ajax 这里有一个实现的套路，思路大致是这样的：...
Ajax-笔记
yemuyouhan的博客
04-25 262
Ajax 1、Ajax简介 Ajax (Asynchronous JavaScript and XML)：异步的 JavaScript 和 XML。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。 在 2005 年，Google 通过其 Google Sugge...
AJAX的应用优势
09-26 2415
AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。 　　通过 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 JavaSc
2021-03-06
Jeryy--的博客
03-06 169
一 Ajax技术与原理 1.1 Ajax简介 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 1.2 Ajax所包含的技术 大家都知道ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。 1.使用CSS和XHTML来表示。 2.使用DOM模型来交互和动态显示.
xhr、ajax、axois、fetch的区别
yiguoxiaohai的博客
09-04 1693
XMLHttpRequest (XHR)、AJAX、Axios 和 Fetch API 都是用于在不重新加载整个页面的情况下与服务器进行通信的技术和库。它们在处理超时、终止请求、进度反馈等机制上有一些显著的差异。以下是它们的详细比较：
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2021
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 464
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
Module “console“ has been externalized for browser compatibility.
Alvin的博客
09-07 271
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值