文章目录
同步交互与异步交互
交互是什么
同步交互是什么
所谓同步交互,就是指发送一个请求,需要等待返回,然后才能够发送下一个请求。同步交互相当于排队,轮到下一个的情况会因为前一个而有所不同。
说明:就是上一行代码没加载完,下一行不能加载
异步交互是什么
所谓异步交互,就是指指发送一个请求,不需要等待返回,随时可以再发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果,而异步交互不需要等待。
说明:有请求就响应
异步交互的优势
异步交互相比同步交互的优势主要具有以下几点:
- 用户操作无须像同步交互必须等待结果。
- 异步交互只需与服务器端交换必要的数据内容,而不是将所有数据全部更新。
- 异步交互对带宽造成的压力相比同步交互更小。
- 通过Ajax实现异步交互不需要任何第三方插件,只要浏览器支持JavaScript语言即可实现。
异步交互的劣势
异步交互相比同步交互并不是优势,它也存在一些问题:
- 异步交互破坏了浏览器原有的前进和后退机制。
- 如果后面逻辑的执行依靠前面逻辑执行的结果的话,异步交互可能会造成问题。
- Ajax实现异步交互对搜索引擎支持较弱。
- Ajax实现异步交互会引起一些Web安全问题,例如SQL注入攻击、跨站点脚本攻击等问题。
Ajax是什么
Ajax是Asynchronous JavaScriptXML的缩写,被译为异步JavaScript和XML。Ajax本身并不是一个新技水,而是一个在2005年被Jesse James Garrett提出的新术语,用来描述一种现有技术集合的“新”方法。
当使用Ajax模型,HTML页面能够快速地将数据逐步更新显示在用户界面上,不需要重载(刷新)整个页面。这使得HTML页面能成更快速地对用户的操作进行反馈。
尽管Ajax中的“X”代表XML,但由于JSON的许多优势,目前JSON的使用比XML更加普遍。
尽管Ajax中的“X”代表XML,但由于JSON的许多优势,目前JSON的使用比XML更加普遍。
Ajax涉及的技术
Ajax只是为实现异步交互的手段,不是一种技术,而是多种技术的整合。其中包括以下几种技术:
- HTML页面
- Cascading Style Sheets (CSS)
- JavaScript脚本语言
- Document Object Model (DOM)
- XML
- XMLHttpRequest对象
上述技术中,XMlLHttpRequest对象是实现Ajax异步交互的核心。
Ajax工作原理
说明:Ajax异步交互的整体执行流程过程中,HTML页面是不被更新的。只是更新部分数据内容。
Ajax的核心对象
实现Ajax异步交互的核心就是XMLHttpRequest对象,该对象为客户端提供了在客户端和服务器之间传输数据的功能。
XMLHtpRequest对象提供了一个通过URL来获取数据的简单方式,并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。
XMLHttpRequest对象最初由微软设计,随后被Mozilla、Apple和Google采纳。如今,该对象已经被W3C组织标准化。通过该对象,可以很容易地得到一个URL上的资源数据。尽管名字里有XML,但XMLHttpRequest对象可以得到所有类型的数据资源,并不局限于XML格式的数据。
实现Ajax异步交互
实现Ajax的执行步骤
实现Ajax异步交互需要服务器端逻辑进行配合,而作为客户端的HTML页面需要完成以下步骤:
- 创建Ajax的核心对象XMlLHttpRequest对象
- 通过XMlLHttpRequest对象的
open()
方法与服务器端建立连接 - 构建请求所需的数据内容,并通过XMLHttpRequest对象的
send()
方法发送给服务器端 - 通过XMLH.ttpRequest对象提供的
onreadystatechange
事件监听服务器端的通信状态 - 接收并处理服务器端向客户端响应的数据结果
- 将处理结果更新到HTML页面中
创建Ajax的核心对象
虽然XMLHttDReauest对象目前由W3C组织进行标准化,但在不同测览器中,创建的方式略有不同。
function crateXMLHttpRequest() {
var httpReuest;
if (window.XMLHttpRequest) { // 适用于Chrome, Firefox, Safari, ...
httpReuest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // 适用于IE浏览器
try {
httpReuest = new ActiveXObject('Msxml2.XMLHTTP'); // IE 7+
} catch (e) {
try {
httpReuest = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6-
} catch (e) {}
}
}
return httpReuest;
}
Ajax异步请求数据
通过Ajax异步请求数据是通过XMLHttpRequest对象的send()方法实现,语法结构如下:
httpRequest(data);
data
:表示请求的数据内容。
httpRequest(null);
httpRequest('name=zhangwuji&password=123456');
如果该请求是异步模式(默认),该方法会立刻返回。相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回。
XMLHTTPRequst对象
创建XMLHTTPRequst对象
var xhr = crateXMLHttpRequest();
对象方法
-
open()
方法xhr.open(method,url)
参数:
method
:表示当前的方式
常见的请求方式为GET
和POST
url
:表示当前请求的服务器湍地址链接
作用:与服务器建立连接
-
send(date)
方法xhr.send(data)
- 参数:
data
:表示要向服务器端发送的请求数据 - 作用:将客户端满页面的数据发送给服务器端
- 请求方式
- 如果当前的请求方式为GET的话- send()方法中只能传递null值
- 将请求数据添加到请求地址链接中
- 如果当前的请求方式为GET的话- send()方法中只能传递null值
- 两种情况
- 发送数据
?user=zhangwuji&pwd=123456
4- 请求数据的格式
- 如果具有多个请求数据的话,之间使用"&"进行分隔
- 每个数据格式
name=value
- 不发送数据
send()
方法中必须传递null值,而不能为空
- 发送数据
- 参数:
对象事件
onreadystatechange
事件:
- 作用:用于监听服务器端的通信状态
- 服务器端的通信状态中存在着处理完毕(信号)
- 接收服务器端返回的处理结果
对象属性
readyState
属性- 作用:表示服务器端的通信状态
- 返回的值:
- 0:未初始化
- 1:
open()
方法被调用 - 2:
send()
方法被调用 - 3:正在响应
- 4:响应已完毕
status
属性
得到当前请求之后的响应状态码responseText
属性
接收服务器端返回的处理结果XMLHttpRequest
对象的responseText
属性- 作用:内容专门接收字符串类型的结果
responseXML
属性
专门接收XML数据格式的结果内容
GET与POST请求方式
GET请求方式
Ajax异步交互中使用GET请求方式的话,需要注意以下几个问题:
-
将构建的请求数据添加到open()方法中的url地址中,如下示例代码所示:
httpRequest.open('GET','http://www.baidu.org/some.file?name=zhangwuji&password=123456', true);
上迹示例代码中,
“name=zhangwuji&password=123456”
表示请求数据 -
将发送请求数据的send()方法中参数设置为null值,如下示例代码所示:
httpRequest.send(null);
POST请求方式
Ajax异步交互中使用POST请求方式的话,需要注意以下几个问题:
-
调用send()方法之前,需要通过XMLHHtpRequest对象的setRequestHeader()方法设置请求头信息。
httpRequest.setRequestHeader(header, value);
header
:将要被赋值的请求头名称。value
:给指定的请求头赋的值。
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');