JavaScript使用Ajax

Ajax(Asynchronous JavaScript and XML)是使用JavaScript脚本,借助XMLHttpRequest插件,在客户端与服务器端之间实现异步通信的一种方法。2005年2月,Ajax第一次正式出现,从此以后Ajax成为JavaScript发起HTTP异步请求的代名词。2006年,W3C发布了Ajax标准,Ajax技术开始快速普及。

代码测试环境:Windows(运行系统)+Apache(服务器)+PHP(脚本)。

1、XMLHttpRequest基础

XMLHttpRequest是客户端的一个API,它为浏览器与服务器通信提供了一个便捷通道。现代浏览器都支持XMLHttpRequest API,如IE7+、Firefox、Chrome、Safari和Opera等。30.1.1 定义XMLHttpRequest对象

1.1、定义XMLHttpRequest对象

使用XMLHttpRequest插件的第一步:创建XMLHttpRequest对象,具体方法如下:

    var xhr = new XMLHttpRequest();

提示:IE 5.0版本开始以ActiveX组件形式支持XMLHttpRequest,IE 7.0版本开始支持标准化XMLHttpRequest。不过,所有浏览器实现的XMLHttpRequest对象都提供相同的接口和用法。

【示例】使用工厂模式对定义的XMLHttpRequest对象进行封装,这样只要调用createXHR()方法就可以返回一个XMLHttpRequest对象:
在这里插入图片描述
在上面示例中,首先定义一个数组,收集各种创建XMLHttpRequest对象的函数。第一个函数是标准用法,其他函数主要针对IE浏览器的不同版本尝试创建ActiveX对象。其次设置变量xhr为null,表示为空对象。最后遍历工厂内所有函数并尝试执行它们。为了避免发生异常,把所有调用函数放在try中执行,如果发生错误,则在catch中捕获异常,并执行continue命令,返回继续执行,避免抛出异常。如果创建成功,则中止循环,返回XMLHttpRequest对象。

1.2、建立HTTP连接

使用XMLHttpRequest对象的open()方法可以建立一个HTTP请求,用法如下所示:

    xhr.open(method, url, async, username, password);

其中xhr表示XMLHttpRequest对象,open()方法包含5个参数,简单说明如下:

  • method:HTTP请求方法,必设参数,值包括POST、GET和HEAD,大小写不敏感。
  • url:请求的URL字符串,必设参数,大部分浏览器仅支持同源请求。
  • async:指定请求是否为异步方式,默认为true。如果为false,当状态改变时会立即调用onreadystatechange。属性指定的回调函数。
  • username:可选参数,如果服务器需要验证,该参数指定用户名;如果未指定,当服务器需要验证时,会弹出验证窗口。
  • password:可选参数,验证信息中的密码部分,如果用户名为空,则该值将被忽略。

建立连接后,可以使用send()方法发送请求,用法如下:

    xhr.send(body);

参数body表示将通过该请求发送的数据,如果不传递信息,可以设置为null或者省略。

发送请求后,可以使用XMLHttpRequest对象的responseBody、responseStream、responseText或responseXML属性等待接收响应数据。

【示例】简单演示实现异步通信的方法:

    var xhr = createXHR();                       //实例化XMLHttpRequest对象xhr.open("GET","server.txt", false);         //建立连接,要求同步响应xhr.send(null);                              //发送请求console.log(xhr.responseText);               //接收数据

在服务器端文件(server.txt )中输入下面的字符串:

    Hello World                              //服务器端脚本

在浏览器控制台会显示“Hello World”的提示信息,该字符串是从服务器端响应的字符串。

1.3、发送GET请求

发送GET请求简单、方便,适用于简单字符串,不适用于大容量或加密数据。实现方法:将包含查询字符串的URL传入XMLHttpRequest对象的open()方法,设置第一个参数值为GET即可。服务器能够通过查询字符串接收用户信息。

【示例】以GET方式向服务器传递一条信息callback=functionName:

    <input name="submit" type="button" id="submit" value="向服务器发出请求" /><script>window.onload = function(){                           //页面初始化var b = document.getElementsByTagName("input")[0];b.onclick = function(){var url = "server.php?callback=functionName"  //设置查询字符串var xhr = createXHR();                        //实例化XMLHttpRequest对象xhr.open("GET",url, false);                   //建立连接,要求同步响应xhr.send(null);                               //发送请求console.log(xhr.responseText);                //接收数据}}</script>

在服务器端文件(server.php)中输入下面的代码,获取查询字符串中callback的参数值,并把该值响应给客户端:

    <?phpecho $_GET["callback"];?>

在浏览器中预览页面,当单击“提交”按钮时,在控制台显示传递的参数值。

提示:查询字符串通过问号(?)作为前缀附加在URL的末尾,发送数据是以连字符(&)连接的一个或多个名/值对。

1.4、发送POST请求

POST请求允许发送任意类型、长度的数据,多用于表单提交,以send()方法进行传递,而不以查询字符串的方式进行传递。POST字符串与GET字符串的格式相同,格式如下:

    send("name1=value1&name2=value2…");

【示例】使用POST方法向服务器传递数据:

    window.onload = function(){                           //页面初始化var b = document.getElementsByTagName("input")[0];b.onclick = function(){var url = "server.php"                        //设置请求的地址var xhr = createXHR();                        //实例化XMLHttpRequest对象xhr.open("POST",url, false);                  //建立连接,要求同步响应xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');//设置为表单方式提交xhr.send("callback=functionName");            //发送请求console.log(xhr.responseText);                //接收数据}}

在open()方法中,设置第一个参数为POST,然后使用setRequestHeader()方法设置请求消息的内容类型为“application/x-www-form-urlencoded”,它表示传递的是表单值,一般使用POST发送请求时都必须设置该选项,否则服务器无法识别传递过来的数据。

在服务器端设计接收POST方式传递的数据,并进行响应:

    <?phpecho $_POST["callback"];?>

1.5、串行格式化

GET和POST方法都是以串行格式化的字符串发送数据,主要形式有以下两种:

1.对象格式

例如,定义一个包含3个名/值对的对象数据:

{ user:"ccs8", pass: "123456", email: "css8@mysite.cn" }

转换为串行格式化的字符串表示为:

    'user="ccs8"&pass="123456"&email="css8@mysite.cn"'

2.数组格式

例如,定义一组信息,包含多个对象类型的元素:

    [{ name:"user", value:"css8" }, { name:"pass", value:"123456" },{ name:"email", value:"css8@mysite.cn" } ]

转换为串行格式化的字符串表示为:

    'user="ccs8"& pass="123456"& email="css8@mysite.cn"'

【示例】为了方便开发,下面演示如何定义一个工具函数,把JavaScript对象或数组对象转换为串行格式化字符串并返回,这样就不需要手动转换了:
在这里插入图片描述

1.6、跟踪响应状态

使用XMLHttpRequest对象的readyState属性可以实时跟踪响应状态。当该属性值发生变化时,会触发readystatechange事件,调用绑定的回调函数。readyState属性值说明如下表所示:
在这里插入图片描述
如果readyState属性值为4,说明响应完毕,那么就可以安全读取响应的数据。注意,考虑到各种特殊情况,更安全的方法是,同时监测HTTP状态码,只有当HTTP状态码为200时,才说明HTTP响应顺利完成。

【示例】修改请求为异步响应请求,然后通过status属性获取当前的HTTP状态码。如果readyState属性值为4,且status(状态码)属性值为200,则说明HTTP请求和响应过程顺利完成,这时可以安全、异步地读取数据:
在这里插入图片描述

1.7、中止请求

使用XMLHttpRequest对象的abort()方法可以中止正在进行的请求,用法如下:

    xhr.onreadystatechange = function(){};          //清理事件响应函数xhr.abort();                                    //中止请求

提示:在调用abort()方法前,应先清除onreadystatechange事件处理函数,因为IE和Mozilla在请求中止后也会激活事件处理函数。因为将onreadystatechange属性设置为null,IE会发生异常,所以可以为它设置一个空函数。

1.8、获取XML数据

XMLHttpRequest对象通过responseText、responseBody、responseStream或responseXML属性XMLHttpRequest对象获取响应信息,它们都是只读属性,说明如下表所示:
在这里插入图片描述
在实际应用中,一般将格式设置为XML、HTML、JSON或其他纯文本格式。具体使用哪种响应格式,可以参考下面几条原则。

  • 如果向页面中添加大块数据,选择HTML格式会比较方便。
  • 如果需要协作开发且项目庞杂,选择XML格式会更通用。
  • 如果要检索复杂的数据且结构复杂,选择JSON格式轻便。

【示例1】在服务器端创建一个简单的XML文档:

    <?xml version="1.0" encoding="utf-8"?><the>XML数据</the >

然后,在客户端进行如下请求:
在这里插入图片描述
在上面代码中,使用XML DOM的getElementsByTagName()方法获取the节点,然后再定位第一个the节点的子节点内容。此时如果继续使用responseText属性读取数据,则会返回XML源代码字符串。

【示例2】可以使用服务器端脚本生成XML结构数据:

    <?phpheader('Content-Type: text/xml;');echo '<?xml version="1.0" encoding="utf-8"?><the>XML数据</the >'; //输出XML?>

1.9、获取HTML字符串

设计响应信息为HTML字符串,然后使用DOM的innerHTML属性把获取的字符串插入网页中。

【示例】在服务器端设计响应信息为HTML结构代码:

    <table border="1" width="100%"><tr><td>RegExp.exec()</td><td>通用的匹配模式</td></tr><tr><td>RegExp.test()</td><td>检测一个字符串是否匹配某个模式</td></tr></table>

在客户端接收响应信息:
在这里插入图片描述
注意:在某些情况下,HTML字符串可能为客户端解析响应信息节省一些JavaScript脚本,但是也带来一些问题。

  • 响应信息中包含大量无用的字符,响应数据会变得很臃肿。因为HTML标记不含有信息,完全可以把它们放置在客户端由JavaScript脚本负责生成。
  • 响应信息中包含的HTML结构无法被有效地利用,对于JavaScript脚本来说,它们仅仅是一堆字符串。同时结构和信息混合在一起,也不符合标准化设计原则。

1.10、获取JavaScript脚本

设计响应信息为JavaScript代码,与JSON数据不同,它是可执行的命令或脚本。

【示例】在服务器端请求文件中包含下面一个函数:

    function(){var d = new Date()return d.toString();}

在客户端执行下面的请求:
在这里插入图片描述
注意:使用eval()方法时,在字符串前后附加两个小括号:一个是包含函数结构体的,一个是表示调用函数的。不建议直接使用JavaScript代码作为响应格式,因为它不能够传递更丰富的信息,同时JavaScript脚本极易引发安全隐患。

1.11、获取JSON数据

使用responseText可以获取JSON格式的字符串,然后使用eval()方法将其解析为本地JavaScript脚本,再从该数据对象中读取信息。

【示例】在服务器端请求文件中包含下面JSON数据:

    {user:"ccs8",pass: "123456",email:"css8@mysite.cn"}

然后在客户端执行下面的请求。把返回JSON字符串转换为对象,然后读取属性值:
在这里插入图片描述
注意:eval()方法在解析JSON字符串时存在安全隐患。如果JSON字符串中包含恶意代码,在调用回调函数时可能会被执行。解决方法:先对JSON字符串进行过滤,屏蔽敏感或恶意代码。也可以访问http://www.json.org/json2.js下载JavaScript版本解析程序。如果确信所响应的JSON字符串是安全的,没有被人恶意攻击,那么可以使用eval()方法解析JSON字符串。

1.12、获取纯文本

对于简短的信息,可以使用纯文本格式进行响应。但是纯文本信息在传输过程中容易丢失,且没有办法检测信息的完整性。

【示例】服务器端响应信息为字符串“true”,则可以在客户端这样设计:
在这里插入图片描述

1.13、获取和设置头部消息

HTTP请求和响应都包含一组头部消息,获取和设置头部消息可以使用XMLHttpRequest对象的下面两个方法:

  • getAllResponseHeaders():获取响应的HTTP头部消息。
  • getResponseHeader(“Header-name”):获取指定的HTTP头部消息。

【示例】下面将获取HTTP响应的所有头部消息:

    var xhr = createXHR();var url = "server.txt";xhr.open("GET", url, true);xhr.onreadystatechange = function (){if ( xhr.readyState == 4 && xhr.status == 200 ) {console.log(xhr.getAllResponseHeaders());          //获取头部消息}}xhr.send(null);

如果要获取指定的某个首部消息,可以使用getResponseHeader()方法,参数为获取首部的名称。例如,获取Content-Type首部的值,则可以按以下方式设计:

    console.log(xhr.getResponseHeader("Content-Type"));

除了可以获取这些头部消息外,还可以使用setRequestHeader()方法在发送请求中设置各种头部消息。用法如下:

    xhr.setRequestHeader("Header-name", "value")

其中Header-name表示头部消息的名称,value表示消息的具体值。例如,使用POST方法传递表单数据,可以设置如下头部消息:

    xhr.setRequestHeader("Content-type ", " application/x-www-form-urlencoded ")

1.14、认识XMLHttpRequest 2.0

XMLHttpRequest 1.0 API存在如下缺陷:

  • 只支持文本数据的传送,无法用来读取和上传二进制文件。
  • 传送和接收数据时,没有进度信息,只能提示有没有完成。
  • 受到同域限制,只能向同一域名的服务器请求数据。

2014年11月W3C正式发布XMLHttpRequest Level 2(http://www.w3.org/TR/XMLHttpRequest2/)标准规范,新增了很多实用功能,推动异步交互在JavaScript中的应用。简单说明如下:

  • 可以设置HTTP请求的时限。
  • 可以使用FormData对象管理表单数据。
  • 可以上传文件。
  • 可以请求不同域名下的数据(跨域请求)。
  • 可以获取服务器端的二进制数据。
  • 可以获得数据传输的进度信息。

1.5、请求时限

XMLHttpRequest 2为XMLHttpRequest对象新增timeout属性,使用该属性可以设置HTTP请求时限:

    xhr.timeout = 3000;

上面语句将异步请求的最长等待时间设为3000 ms。超过时限,就自动停止HTTP请求。与之配套的有一个timeout事件,用来指定回调函数:

    xhr.ontimeout = function(event){console.log('请求超时!');}

1.16、FormData数据对象

XMLHttpRequest 2新增FormData对象,使用它可以处理表单数据。使用方法如下。
第1步,新建FormData对象:

    var formData = new FormData();

第2步,为FormData对象添加表单项:

    formData.append('user', '张三');formData.append('pass', 123456);

第4步,FormData对象可以直接获取网页表单的值:

    var form = document.getElementById('myform');var formData = new FormData(form);formData.append('grade', '2');             //添加一个表单项xhr.open('POST', form.action);xhr.send(formData);

1.17、上传文件

新版XMLHttpRequest对象不仅可以发送文本信息,还可以上传文件。使用send()方法可以发送字符串、Document对象、表单数据、Blob对象、文件和ArrayBuffer对象。

【示例】设计一个“选择文件”的表单元素(input[type=“file”]),将它装入FormData对象:

    var formData = new FormData();for (var i = 0; i < files.length;i++) {formData.append('files[]', files[i]);}

发送FormData对象给服务器:

    xhr.send(formData);

1.18、跨域访问

XMLHttpRequest 2版本允许向不同域名的服务器发出HTTP请求。使用跨域资源共享的前提是:浏览器必须支持这个功能,且服务器端必须同意这种跨域。如果能够满足这两个条件,则代码的写法与不跨域的请求完全一样。例如:

    var xhr = createXHR();var url = 'http://other.server/and/path/to/script';           //请求的跨域文件xhr.open('GET', url, true);xhr.onreadystatechange = function (){if ( xhr.readyState == 4 && xhr.status == 200 ){console.log(xhr.responseText);}}xhr.send();

1.19、响应不同类型的数据

新版本的XMLHttpRequest对象新增了responseType和response属性。

  • responseType:用于指定服务器端返回数据的数据类型,可用值为text、arraybuffer、blob、json或document。如果将属性值指定为空字符串值或不使用该属性,则该属性值默认为text。
  • response:如果向服务器端提交请求成功,则返回响应的数据。
  • 如果reaponseType为text,则reaponse返回值为一串字符串。
  • 如果reaponseType为arraybuffer,则reaponse返回值为一个ArrayBuffer对象。
  • 如果reaponseType为blob,则reaponse返回值为一个Blob对象。
  • 如果reaponseType为json,则reaponse返回值为一个JSON对象。
  • 如果reaponseType为document,则reaponse返回值为一个Document对象。

1.20、接收二进制数据

XMLHttpRequest 1.0版本只能从服务器接收文本数据,新版则可以接收二进制数据。使用新增的responseType属性,可以从服务器接收二进制数据。

把responseType设为blob,表示服务器传回的是二进制对象:

    var xhr = new XMLHttpRequest();xhr.open('GET', '/path/to/image.png');xhr.responseType = 'blob';

在接收数据的时候,用浏览器自带的Blob对象即可:

    var blob = new Blob([xhr.response], {type: 'image/png'});

注意:是读取xhr.response,而不是读取xhr.responseText。

将responseType设为arraybuffer,把二进制数据装在一个数组里:

    var xhr = new XMLHttpRequest();xhr.open('GET', '/path/to/image.png');xhr.responseType = "arraybuffer";

在接收数据的时候,需要遍历这个数组:

    var arrayBuffer = xhr.response;if (arrayBuffer) {var byteArray = new Uint8Array(arrayBuffer);for (var i = 0; i < byteArray.byteLength; i++) {//执行代码}}

1.21、监测数据传输进度

新版本的XMLHttpRequest对象新增了一个progress事件,用来返回进度信息,它分成上传和下载两种情况。下载的progress事件属于XMLHttpRequest对象,上传的progress事件属于XMLHttpRequest.upload对象。

第1步,先定义progress事件的回调函数:

    xhr.onprogress = updateProgress;xhr.upload.onprogress = updateProgress;

第2步,在回调函数里面,使用这个事件的一些属性:

    function updateProgress(event) {if (event.lengthComputable) {var percentComplete = event.loaded / event.total;}}

在上面的代码中,event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0。

与progress事件相关的还有其他5个事件,可以分别指定回调函数:

  • load:传输成功完成。
  • abort:传输被用户取消。
  • error:传输中出现错误。
  • loadstart:传输开始。
  • loadEnd:传输结束,但是不知道是成功还是失败。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/168305.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

初探SVG

SVG&#xff0c;可缩放矢量图形&#xff08;Scalable Vector Graphics&#xff09;。使用XML格式定义图像。SVG有以下优点&#xff1a;1&#xff09;可被非常多的工具读取和修改&#xff1b;2&#xff09;比JPEG和GIF尺寸更小&#xff0c;可压缩性更强&#xff1b;3&#xff09…

C++——基础

初学C的时候&#xff0c;有没有想过&#xff0c;为什么C支持重载&#xff0c;而C不支持重载呢&#xff1f;&#xff1f; 其实&#xff0c;一个程序运行起来都要经过四步骤 预处理编译汇编链接 预处理阶段会经过去注释&#xff0c;宏替换&#xff0c;头文件展开&#xff0c;条…

Java Web——HTTP协议

目录 1. HTTP协议概述 1.1. HTTP数据传输格式 1.2. HTTP协议特点 2. HTTP 1.0和HTTP 1.1 3. HTTP请求协议 3.1. GET方式请求协议 3.2. POST方式请求协议 3.3. GET请求和POST请求的区别 4. HTTP相应协议 4.1. 响应状态码 如果两个国家进行会晤需要遵守一定的礼节。所以…

使用ffmpeg调用电脑自带的摄像头和扬声器录制音视频

1、打开cmd&#xff0c;执行chcp 65001,修改cmd的编码格式为utf8&#xff0c;避免乱码 2、执行指令ffmpeg -list_devices true -f dshow -i dummy,查看当前window的音频和视频名称 3、打开windows系统的"打开声音设置"–“麦克风隐私设置”–"允许应用访问你…

arduino 简易智能花盆

编辑器&#xff1a;arduino IDE 主板&#xff1a;arduino uno 传感器&#xff1a; 0.96寸的OLED屏&#xff08;四脚&#xff09; 声音模块 土壤温湿度模块 DS18B20温度模块&#xff08;这里用到防水的&#xff09; 光敏电阻模块&#xff08;买成三脚的了只能显示高低&#x…

金字塔原理小节

目录 第1章 为什么要用金字塔结构 一、归类分组&#xff0c;将思想组织成金字塔 二、奇妙的数字“7” 三、归类分组搭建金字塔 四、找出逻辑关系&#xff0c;抽象概括 五、自上而下表达&#xff0c;结论先行 第1章 为什么要用金字塔结构 如果受众希望通过阅读你的文章、听…

自动计算零售数据分析指标?BI软件表示可行

随着BI技术的飞速发展&#xff0c;借助系统来计算分析指标也不是什么难事&#xff0c;即便是面对组合多变的零售数据分析指标&#xff0c;奥威BI软件也依旧可以又快又精准地完成指标计算。 BI软件可以自动计算零售数据分析指标&#xff0c;如销售额、库存量、订单量等。在计算…

超简单的Linux FTP服务搭建教程

目录 前言1、检查vsftp是否已安装2、安装vsftpd3、启动ftp服务4、测试ftp服务5、上传文件配置总结 前言 本文记录了在Kylin Linux Desktop V10(SP1)系统上搭建FTP服务的过程。FTP是File Transfer Protocol的缩写&#xff0c;译为文件传输协议&#xff0c;是用于在网络上进行文…

Postman的环境变量和全局变量

近期在复习Postman的基础知识&#xff0c;在小破站上跟着百里老师系统复习了一遍&#xff0c;也做了一些笔记&#xff0c;希望可以给大家一点点启发。 多种环境&#xff1a;开发环境、测试环境、预发布环境、生产环境&#xff0c;可以用环境变量来解决。 今天的分享就到这里&a…

【Azure 架构师学习笔记】-Azure Storage Account(5)- Data Lake layers

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Storage Account】系列。 接上文 【Azure 架构师学习笔记】-Azure Storage Account&#xff08;4&#xff09;- ADF 读取Queue Storage 前言 不管在云还是非云环境中&#xff0c; 存储是IT 系统的其中一个核心组件。在…

Python和BeautifulSoup库的魔力:解析TikTok视频页面

概述 短视频平台如TikTok已成为信息传播和电商推广的重要渠道。用户通过短视频分享生活、创作内容&#xff0c;吸引了数以亿计的观众&#xff0c;为企业和创作者提供了广阔的市场和宣传机会。然而&#xff0c;要深入了解TikTok上的视频内容以及用户互动情况&#xff0c;需要借…

Win11专业版安装Docker Desktop,并支持映射主机的gpu

一、Windows环境下安装 Docker 必须满足: 1. 64位Windows 11 Pro(专业版和企业版都可以) 2. Microsoft Hyper-V,Hyper-V是微软的虚拟机,在win11上是自带的,我们只需要启动就可以了 二、下载Docker Desktop安装包 方式一:进入官网下载 https://docs.docker.com/desktop…