2021-10-20

Ajax异步传输

一、Ajax技术与原理

1.1 Ajax简介

Ajax = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

AJAX 不是新的编程语言，而是一种使用现有标准的新方法(技术)。

AJAX 是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下。简而言之就是实现页面的局部刷新.

1.2 Ajax所包含的语言

ajax并非一种新的技术，而是几种原有语言的结合体。由以下技术组合而成：

1. 使用CSS和HTML来表示。

2. 使用DOM模型来交互和动态显示。

3. 使用XMLHttpRequest来和服务器进行异步通信。

4. 使用javascript来绑定和调用。

Ajax的核心是XMLHttpRequest对象。

不同的浏览器创建XML HttpRequest 对象的方法是由差异的。

IE浏览器使用ActiveXObject，而其他的浏览器使用名为XML HttpRequest的JavaScript内置对象

1.3 Ajax的工作原理

​ Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-72Tzvq3U-1634731389620)(D:\20级3班\JavaScript\day17-211019\Ajax异步传输.assets\image-20211017204422770.png)]

1.4 XMLHttpRequest对象的三个常用属性

1. onreadystatechange属性

onreadystatechange属性存有处理服务器响应的函数。

下面的代码定义一个空的函数，课同时对onreadystatechange属性进行设置：

// xmlHttp  是自定义的变量
xmlHttp.onreadystatechange = function(){
// 处理服务器响应  
}

2. readyState属性

readyState属性存有服务器响应的状态信息。每当readyState改变时，onreadystatechange函数就会被执行。

redayState属性可能的值：

状态	描述
0	请求未初始化(在调用open()之前)
1	请求已退出(调用send()之前)
2	请求已发送(这里通常可以从响应得到内容头部)
3	请求处理中(响应中通常有部分数据可用，但是服务器还没有完成响应)
4	请求已完成(可以访问服务器响应并使用它)

我们要向这个onreadystatechange函数添加一条if语句，来测试我们的响应是否已完成(意味着可获得数据)：

xmlHttp.onreadystatechange = function(){
	if(xmlHttp.readyState == 4){
		// 从服务器的response获得数据
}
}

3. responseText属性

可以通过responseText属性来取回由服务器返回的数据。

在我们的代码中，我们将把时间文本框的值设置位等于reponseText;

xmlHttp.onreadystatechange = function(){
	if(xmlHttp.readyState == 4){
	document.myForm.time.value = xmlHttp.responseText;
}
}

其他属性如下：

属性	描述
onreadystatechange	状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个javaScript函数
readyState	请求状态，有5个可取值: 0 = 未初始化，1 = 正在加载，2= 已加载 ，3 = 交互中，4 = 完成
responseText	服务器的响应数据，返回的数据是文本
responseXML	服务器的响应数据，返回数据的兼容DOM的XML文档对象，这个对象可以解析位一个DOM对象
responseBody	服务器返回的主体(非文本格式)
responseStream	服务器返回的数据流
status	服务器的HTTP状态码(如：404 = ‘文件未找到’、200 = ‘成功0’,等等)
statusText	服务器返回的状态文本信息，HTTP状态码的响应文本(OK或Not Found(未找到)等等)

1.5 xmlHttprequest的方法

1. open()方法

open()有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。

xmlHttp.open('GET',"test.php",true);	

2. send()方法

send()方法将请求送往服务器，如果我们假设HTML文件和PHP文件位于相同的目录，那么代码是这样的：

xmlHttp.send(null);

其他方法如下:

方法	描述
abort()	停止挡墙请求
getAllResponseHeaders()	把Http请求的虽有响应首部作为键/值对返回
getAllResponseHeader(“header”)	返回指定首部的串值
open(”method“,‘URL’，[‘asyncFlag’],["username”],[“password”])	建立对服务器的调用，method 可以是 GET、POST、或PUT,url参数可以是相对url或绝对url，这个方法还包括3个可选参数，是否异步，用户名、密码
send(“content”)	向服务器发送请求
setRequestHeader(“header”,“value”)	把指定首部设置为所提供的值，在设置任何首部之前必须先调用open(),设置header并和请求一起发送('post’方法一定要)