ajax详细用法

article/2025/8/18 16:50:08
一、基础知识

1、首先让我们了解ajax----------------
       通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
2、ajax的核心步骤：

  1. 创建XMLHttpRequest对象
    关于XHR：
  • 可以异步和同步发送和接受数据，可以在请求中添加头部信息，并读取响应报文所有头信息，以及响应文本
  • 可以监听readyState,确定响应信息正在传输中
  • 不能从外域请求数据
  • 经GET请求的数据会被缓存起来（需要服务段添加expires头部信息）
  • GET请求参数长度接近和超过2048个字符，才使用POST请求
  1. 发送（异步）请求
  2. 接收相应请求，并且执行回调，响应数据
    在这里插入图片描述
    在这里插入图片描述
    3、具体过程
    (1)创建XMLHttpRequest对象
var xhr = function createXhr(){if(window.ActiveXObject){ //IE5 IE6return new window.ActiveXObject("Microsoft.XMLHttp");}else if(window.XMLHttpRequest){  //IE7 以上 及 其他浏览器return new XMLHttpRequest();}else{alert("您的浏览器不兼容，换一个");return null;}}

一般我们都会用一句话来创建：

var xhr = new XMLHttpRequest();

(2)像服务器发送数据，open(),一般有两种方法：get()、post()

if(xhr!=null){    //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求xhr.open("post", url, true);            /*三个参数：第一个是发送请求的类型，POST 和GET　两种第二个是url的地址，(地址也可以是静态文件，xml文件)第三个，是否是异步，true是 异步。false 是同步*/}

get()和post()两种基本请求方式的区别：
（a)、直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。
（b)、长的说：对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
©、GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
(d)、GET请求在URL中传送的参数是有长度限制的，而POST么有。
(e)、GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
(f)、post会有浏览器提示重新提交表单的问题，get则没有

get():，最常用于向服务器查询某些信息，它适用于当URL完全指定请求资源，当请求对服务器没有任何副作用以及当服务器的响应是可缓存的情况下。

  • 数据发送：使用GET方式发送请求时，数据被追加到open()方法中URL的末尾
    　　数据以问号开始，名和值之间用等号链接，名值对之间用和号(&)分隔。使用GET方式发送的数据常常被称为查询字符串
xhr.open("get","example.php?name1=value1&name2=value2",true)
  • 编码：由于URL无法识别特殊字符，所以如果数据中包含特殊字符(如中文)，则需要使用 encodeURIComponent() 进行编码
var url = 'test.php' +'?name='  + encodeURIComponent("小火柴");
xhr.open('get',url,true);
  • 缓存：在GET请求中，为了避免缓存的影响，可以向URL添加一个随机数或时间戳
xhr.open('get',url+'&'+Number(new Date()),true);
xhr.open('get',url+'&'+Math.random(),true);

post:通常用于服务器发送应该被保存的数据。"POST"方法常用于HTML表单。它在请求主体中包含额外数据且这些数据常存储到服务器上的数据库中。相同URL的重复POST请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求
POST请求应该把数据作为请求的主体提交，而GET请求传统上不是这样。POST请求的主体可以包含非常多的数据，而且格式不限。在open()方法第一个参数的位置传入"post"，就可以初始化一个POST请求

  • 设置请求头：发送POST请求的第二步就是向send()方法中传入某些数据。由于XHR最初的设计主要是为了处理XML，因此可以在此传入XML DOM文档，传入的文档经序列化之后将作为请求主体被提交到服务器。当然，也可以在此传入任何想发送到服务器的字符串
    　　默认情况下，服务器对POST请求和提交Web表单的请求并不会一视同仁。因此，服务器端必须有程序来读取发送过来的原始数据，并从中解析出有用的部分。不过，可以使用XHR来模仿表单提交：首先将Content-Type头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
  • 编码和缓存：由于使用POST方式传递数据时，需要设置请求头"content-type"，这一步骤已经能够自动对特殊字符(如中文)进行编码，所以就不再需要使用encodeURIComponent()方法了
    　　POST请求主要用于数据提交，相同URL的重复POST请求从服务器得到的响应可能不同，所以不应该缓存使用POST方法的请求

(3)回调函数的处理（数据接收的处理）

xhr.onreadystatechange = processResponse; //指定响应函数  
function processResponse(){};//或者直接写在里面也可以
xhr.onreadystatechange = function(){};

这里说一下onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。
下面是该对象的三个重要属性：

  • onreadystatechange:储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
  • readyState: 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成，且响应已就绪
  • status:200: “OK” ； 404: 未找到页面

(4)发送(tips：只有post有效）

xhr.send();

具体的一个例子：（这是封装好的函数，可以在以后用的时候，直接套用，不用在自己写）

function ajax(json){
//浏览器的判断if(window.XMLHttpRequest){var ajax = new XMLHttpRequest();}else{var ajax = new ActiveXObject( "Microsoft.XMLHTTP" );}
//如果发送的方式为getif(json.type=='get'){ajax.open('get',json.url+'?'+JsonToString(json.data),true);ajax.send();}//发送方式为postelse if(json.type=='post'){ajax.open('post',json.url,true);ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");ajax.send(JsonToString(json.data));}//服务到达服务器后作出响应ajax.onreadystatechange = function(){if(ajax.readyState == 4){if(ajax.status>=200 && ajax.status<300 || ajax.status == 304){json.success(ajax.responseText);}else{json.error && json.error();}};};//该函数将json转化为字符串function JsonToString(json){var arr = [];for(var i in json){arr.push(i+'='+json[i]);};//  join():方法用于把数组中的所有元素放入一个字符串。return arr.join('&');}
}

下面是用node写的接收数据的ajax代码，也分为post接收和get接收两种：

var http = require('http');
urlLib = require('url'),
var querystring = require('querystring');
http.createServer(function(req,res){res.setHeader('Access-Control-Allow-Origin','*');//允许跨域//getvar json = urlLib.parse(req.url,true).query;//postvar str = '';req.on('data',function(data){str += data;});req.on('end',function(){var json = querystring.parse(str);res.end();});}).listen(9102);

4、setRequestHeader---------设置数据格式-------------如果为post请求就一定要写在open()和send()中间

json格式数据xhr.setRequestHeader(“Content-type”, “application/json; charset=utf-8”);

表单数据xhr.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded; charset=utf-8”);

纯文本xhr.setRequestHeader(“Content-type”, “text/plain; charset=utf-8”)

html文本xhr.setRequestHeader(“Content-type”, “text/plain; charset=utf-8”)

二、深入了解

1、相应的解码：我们接收到的响应主体类型可以是多种形式的，包括字符串String、ArrayBuffer对象、二进制Blob对象、JSON对象、javascirpt文件及表示XML文档的Document对象等。下面将针对不同的主体类型，进行相应的响应解码。

  1. 【responseText】---------responseText属性返回从服务器接收到的字符串，该属性为只读。如果本次请求没有成功或者数据不完整，该属性就会等于null。
    　　如果服务器返回的数据格式是JSON、字符串、javascript或XML，都可以使用responseText属性
  2. 【response】----------response属性为只读，返回接收到的数据体。它的类型可以是ArrayBuffer、Blob、Document、JSON对象、或者一个字符串，这由XMLHttpRequest.responseType属性的值决定
    　　如果本次请求没有成功或者数据不完整，该属性就会等于null
  3. 【responseType】----------　responseType属性用来指定服务器返回数据(xhr.response)的类型
“”：字符串(默认值)
“arraybuffer”：ArrayBuffer对象
“blob”：Blob对象
“document”：Document对象
“json”：JSON对象
“text”：字符串
  1. 【responseXML】----------　responseXML属性返回从服务器接收到的Document对象，该属性为只读。如果本次请求没有成功，或者数据不完整，或者不能被解析为XML或HTML，该属性等于null

2、请求超时：XHR对象的timeout属性等于一个整数，表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止。该属性默认等于0，表示没有时间限制
　　如果请求超时，将触发ontimeout事件

xhr.open('post','test.php',true);
xhr.ontimeout = function(){console.log('The request timed out.');
}
xhr.timeout = 1000;
xhr.send();

3、优化：使用AJAX接收数据时，由于网络和数据大小的原因，并不是立刻就可以在页面中显示出来。所以，更好的做法是，在接受数据的过程中，显示一个类似loading的小图片，并且禁用按钮；当数据完全接收后，再隐藏该图片，并启用按钮。

三、ajax优缺点
  1. 1.最大的优点就是页面无需刷新，在页面内与服务器通信，非常好的用户体验。
    2.使用异步的方式与服务器通信，不需要中断操作。
    3.可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，可以最大程度减少冗余请求。
    4.基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
  2. 1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
    在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
    2.安全问题技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
四、了解jQuery实现ajax

6、jQuery实现ajax

        $.ajax({url: "http://www.hzhuti.com",    //请求的url地址dataType: "json",   //返回格式为jsonasync: true, //请求是否异步，默认为异步，这也是ajax重要特性data: {"id": "value"},    //参数值type: "GET",   //请求方式beforeSend: function() {//请求前的处理},success: function(req) {//请求成功时处理，一般只用到这一个},complete: function() {//请求完成的处理},error: function() {//请求出错处理}});

http://chatgpt.dhexx.cn/article/ArEkwUnG.shtml

相关文章

ajax的常见几种写法以及用法

ajax的常见几种写法以及用法

一、服务端数据格式 1.自定义po类 package com.hbut.ssm.po;/*** pojo类**/ public class Children {private String name;private Integer age;private String gender;public Children(String name, Integer age, String gender) {super();this.name name;this.age age;thi…
阅读更多...
Ajax的三种写法（最原始的写法+最常用的写法+最简便的写法）

Ajax的三种写法（最原始的写法+最常用的写法+最简便的写法）

AJAX&#xff1a;Asynchronous JavaScript AND XML 定义&#xff1a;浏览器向服务器发送的异步请求&#xff08;不改变页面的情况下&#xff0c;发送的变化&#xff09; 核心&#xff1a;浏览器向服务器发送异步请求&#xff0c;javascript中提供xmlHttpRequest对象&#xf…
阅读更多...
利用油管语音转文字

利用油管语音转文字

https://www.tunestotube.com/ 音频上传油管https://zhuwei.me/y2b/ 获取油管字幕文章转载自 https://www.jianshu.com/p/762ae8461243
阅读更多...
怎样能把文字变成语音

怎样能把文字变成语音

文字转语音目前在人们的生活和工作中发挥着很大的作用&#xff1b;没事的时候人们总是喜欢看看手机新闻或者玩玩电脑游戏&#xff0c;我们在看新闻的内容时&#xff0c;长时间的盯着屏幕看文字&#xff0c;很快会让眼睛变的疲劳&#xff0c;如果想要让眼睛得到休息又能够获取新…
阅读更多...
Java文字转语音功能实现

Java文字转语音功能实现

也许&#xff0c;有些时候&#xff0c;你需要这个需求呢&#xff0c;来上代码 我会写出两种不同方式的文字转语音demo&#xff0c;直接copy走用&#xff0c;节省开发时间 git项目下载地址 1.直接使用jdk的 jacob&#xff0c;效果还不错&#xff0c;特点&#xff1a;免费的 2…
阅读更多...
电脑文字转语音怎么弄？这些方法值得一试

电脑文字转语音怎么弄？这些方法值得一试

有时我们需要在上网搜索一些文献作为参考&#xff0c;但有些资料文字太多&#xff0c;内容枯燥&#xff0c;不是很想阅读。这时我们可以将网页文字转成语音&#xff0c;就不用一直盯着屏幕上的文字&#xff0c;通过“听”的方式&#xff0c;还可以让我们放松下来。那么你知道网…
阅读更多...
视频语音识别文字

视频语音识别文字

广告关闭 9.9元享100G流量包&#xff0c;1年有效&#xff0c;低至1元/天&#xff0c;具备美颜动效视频处理等功能&#xff0c;支持定制开发&#xff0c;最快1天接入。 腾讯云语音识别服务开放实时语音识别、一句话识别和录音文件识别三种服务形式&#xff0c;满足不同类型开发…
阅读更多...
如何将视频的语音变成文字播放出来？

如何将视频的语音变成文字播放出来？

看到回答中很多人分享的是软件&#xff0c;每次使用都需要下载&#xff0c;给大家分享两款在线端语音转文字工具&#xff0c;不用下载安装&#xff0c;在线登录就能使用&#xff0c;非常方便。 1、网易见外 网易见外是网易团队上线的一款转文本工具&#xff0c;上线了视频转写…
阅读更多...
如何才能实现文字转语音播放？只要这三个步骤就能快速搞定！

如何才能实现文字转语音播放？只要这三个步骤就能快速搞定！

大家知道吗&#xff1f;配音已经不再是影视制作的专属工作了&#xff0c;如今随着各种短视频平台的热度上涨&#xff0c;许多普通用户也加入到短视频的制作中&#xff0c;市面上也陆续出现许多专门服务于这类人员的配音工具&#xff0c;依托它们&#xff0c;大家无需进行人工配…
阅读更多...
手把手教你实现——Python文字（汉字）转语音教程，举一反三~

手把手教你实现——Python文字（汉字）转语音教程，举一反三~

前言&#xff1a; 这是一篇简单的Python文字&#xff08;汉字&#xff09;转语音教程&#xff0c;当然对于其他语言工具在实现的方法上也是一样的 。 在自然语言处理上&#xff0c;文字、音频互转是一个很关键的技术点。对于语音转文字&#xff0c;个人实现较为困难&#xff…
阅读更多...
在线文字转成语音怎么转

在线文字转成语音怎么转

很多小伙伴在办公或学习中&#xff0c;经常或需要浏览大量资料。随着时间越来越长&#xff0c;我们的眼睛就会多度疲劳。为了不戴上眼镜&#xff0c;我们只能改变当前的方式&#xff0c;也就是把文字变成语音去听&#xff0c;而不是去看。那么就有小伙伴想问了在线文字转成语音…
阅读更多...
做短视频时如何将文字转为语音？分享三个小方法，教你轻松配音

做短视频时如何将文字转为语音？分享三个小方法，教你轻松配音

做短视频时如何将文字转为语音&#xff1f;分享三个小方法&#xff0c;教你轻松配音 在做短视频的时候&#xff0c;经常会遇到需要将文字转为语音&#xff0c;为短视频配音的情况。那么&#xff0c;我们可以如何为短视频配音呢&#xff1f;文字转为语音的方法又有哪些呢&#…
阅读更多...
小程序实现文字转语音

小程序实现文字转语音

1、在微信公众平台登录小程序&#xff0c;添加插件微信同声翻译 搜索微信同声翻译点击添加&#xff0c;即可进行开发 代码 index.html <view><button class"showCharacter" bindtap"wordYun">跟我读</button> </view>index.js …
阅读更多...
在线文字转语音怎么转

在线文字转语音怎么转

小伙伴们有没有遇到过需要把文字变成语音&#xff0c;要求发声的问题呢&#xff1f;其实在很多领域需要把文字变成语音&#xff0c;比如我们每天接触的短视频领域&#xff0c;尤其是一些影视评论博主使用的评论视频。这给短视频制作人带来了很多便利&#xff0c;节省了配音成本…
阅读更多...
微信公众号 语音转文字api_文字一键转语音，无需安装任何软件

微信公众号 语音转文字api_文字一键转语音，无需安装任何软件

点击蓝字关注我们 截止到今天&#xff0c;整整一个月没有出门了。 人都说&#xff0c;越闲越懒、越吃越馋&#xff0c;这话一点不错&#xff0c;早上睡到八九点&#xff0c;起来洗漱一下&#xff0c;吃点早餐&#xff0c;一整个上午就这么溜走了&#xff0c;以至于老妈给我打视…
阅读更多...
php文字转语音amr,如何将文字转成语音？这几个方法一分钟搞定！

php文字转语音amr,如何将文字转成语音？这几个方法一分钟搞定！

原标题：如何将文字转成语音？这几个方法一分钟搞定！ 文字转语音在我们的生活中已经广泛使用了，早晨起床想要看看新闻，但是又无奈时间不够，这时不必慌张，想要了解新闻事件，我们直接把这些文字转为语音，随时随地有时间就可以播放出来听，一点都不怕耽误做其它的事情。 那…
阅读更多...
Android文字转语音播报

Android文字转语音播报

文章目录 前言一、实现方式1.Android系统自带TTS2.第三方语音框架&#xff1a;云知声离线语音(32位&#xff1a;armeabi-v7a)、... 二、Android系统自带TTS1.集成工具类TextToSpeechUtils2.初始化和调用3.需要的支持中文语音引擎 三、第三方语音框架&#xff08;云知声离线语音…
阅读更多...
C# 文字转语音

C# 文字转语音

不依赖于第三方程序&#xff0c;使用.net自带的System.Speech实现&#xff0c;添加引用至项目即可 实现功能&#xff1a; 将文字转为语音&#xff0c;实现播放、暂停、继续、停止;以及音量和语速调整等功能&#xff0c;并且支持将音频保存到本地 开发环境&#xff1a; 开发工具…
阅读更多...
计算机将文本朗读出来应用语音,还有这种操作？一分钟轻松把文字变成语音，手机电脑都可以！...

计算机将文本朗读出来应用语音,还有这种操作？一分钟轻松把文字变成语音，手机电脑都可以！...

原标题&#xff1a;还有这种操作&#xff1f;一分钟轻松把文字变成语音&#xff0c;手机电脑都可以&#xff01; 有的时候&#xff0c;我们不想看文字的时候&#xff0c;就想用耳朵来听&#xff0c;所以现在很多人更喜欢听电台听故事。可是我们的文件没有声音啊&#xff0c;怎么…
阅读更多...
有什么软件可以把文字变成语音？声音多点更好了

有什么软件可以把文字变成语音？声音多点更好了

文字转语音用到就是AI智能功能&#xff0c;基于深度的学习技术&#xff0c;给用户提供了流畅、自然的发音服务。很多用户在线使用传统的配音工具时&#xff0c;经常遇到发音机械、选择主播有限、广告众多等各种缺点。选择知意配音的优点实在太多了简直不要套多&#xff0c;海量…
阅读更多...
推荐文章

Copyright @ 2022~2023