同步交互与异步交互
同步交互是什么
所谓同步交互,就是指客户端向服务器发送请求,必须等待返回结果,才能发送下一个请求。同步交互相当于排队,轮到下一个轻快会因为前一个有所不同。
异步交互是什么
所谓异步交互,就是指客户端发送一个请求,不需要等待返回结果,随时可以发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果,而异步交互不需要等待。
异步交互的优势
- 用户操作无须像同步交互必须等待结果
- 异步交互只需要与服务端交换必要的数据内容,而不是将所有的数据全部更新
- 异步交互对带宽造成的压力比同步交互更小
- 通过Ajax实现异步交互不需要任何第三方插件,只要浏览器支持JavaScript语言即可
异步交互的劣势
- 异步交互破坏了浏览器原有的前进和后退机制
- 如果后面逻辑的执行依靠前面逻辑执行的结果的话,异步交互可能会造成问题
- Ajax实现异步交互对搜索引擎支持较弱
- Ajax实现异步交互可能会引起一些Web安全问题,例如SQL注入供给、跨站点脚本攻击等等
Ajax
Asynchronous JavaScript + XML(异步JavaScript和XML), 其本身不是一种新技术,而是一个在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,当使用结合了这些技术的AJAX模型以后, 网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作。
尽管X在Ajax中代表XML, 但由于JSON]的许多优势,比如更加轻量以及作为Javascript的一部分,目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。
Ajax涉及到的技术
Ajax只是为了实现异步交互的手段,不是一种技术,而是多种技术的整合,其中包括:
- HTML页面
- Cascading Style Sheets ( CSS )
- JavaScript脚本语言
- Document Object Model ( DOM)
- XML
- XMLHttpRequest对象(实现Ajax异步交互的核心)
Ajax工作原理
Ajax的核心对象
核心就是XMLHttpRequest对象
,该对象为客户端提供了在客户端和服务器之间传输数据的功能。
XMLHttpRequest对象提供了一个通过URL来获取数据的简单方式,并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。
XMLHttpRequest对象最初由微软设计,随后被Mozilla、Apple和Google采纳。如今,该对象已经被W3C组织标准化。通过该对象,可以很容易地得到一个URL上的资源数据。尽管名字里有XML,但XMLHttpRequest对象可以得到所有类型的数据资源,并不局限于XML格式的数据。
实现Ajax的执行步骤
- 创建Ajax的核心对象
XMLHttpRequest对象
- 通过XMLHttpRequest对象的open(方法与服务器端建立连接
- 构建请求所需的数据内容,并通过XML HttpRequ Jest对象的send()方法发送给服务器端
- 通过XMLHttpRequest对象提供的onreadystatechange事件监听服务器端的通信状态
- 接收并处理服务器端向客户端响应的数据结果
- 将处理结果更新到HTML页面中
创建Ajax的核心对象
function createXMLHttpRequest(){
var httpReguest;
if (window.XMLHttpRequest) {//适用于Chrome, Firefox, Safari, ..
httpRequest = new XMLHttpRequest();
} else if(window.ActiveXObject) {//适用于IE浏览器
try {
httpRequest = new ActiveXObiect("Msxml2.XMLHTTP");//IE 7+
} catch(e){
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");// IE 6-
} catch(e){}
}
}
return httpRequest;
}
建立Ajax异步请求连接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实现Ajax的步骤</title>
</head>
<body>
<button id="btn">按钮</button>
</body>
<script src="./createXMLHttpRequest.js"></script>
<script>
var btn = document.getElementById('btn') //获取按钮
btn.addEventListener('click', function () { //给按钮绑定点击事件
//实现Ajax的异步交互
//1.创建XMLHttpRequest对象
var xhr = createXMLHttpRequest();
//2.调用XMLHttpRequest对象的open()方法与服务器建立连接
xhr.open('get', '测试url')
//3.调用XMLHttpRequest对象的send()方法,将客户端页面的数据发送给服务器端
xhr.send(null)
//4.利用XMLHttpRequest对象的onreadystatechange事件,监听服务器端的通信状态
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
console.log(xhr.responseText);
}
}
//5.将接受的结果更新到html中
})
</script>
</html>
-
XMLHttpRequest对象的
open(method,url)
方法- method -表示当前的请求方式
- 常见的请求方式为
GET
和POST
- 常见的请求方式为
- url -表示当前请求的服务器端地址链接
- method -表示当前的请求方式
-
XMLHttpRequest对象的send()方法
- 作用:将客户端页面的数据发送给服务器端
- send()方法如果不传递任何数据内容时,则参数为null,不可以不写参数
-
XMLHttpRequest对象的onreadystatechange事件
- 作用:用于监听服务器通信状态
- XMLHttpRequest对象的readyState属性
readyState
属性(表示服务器端的通信状态)值 状态 描述 0(未初始化) UNSEND 代理对象已经被创建,但尚未调用open()方法 1(载入) OPENED open()方法已经调用,建立与服务端口特定的链接 2(载入完成) HEADERS_RECEIVED send()方法已经被调用,并获得了状态行和响应头 3(交互) LOADING 响应体下载中,可能已经下载部分数据了 4(完成) DONE 响应体下载完成,可以直接使用responseText xhr.onreadystatechange = function () { // 监听服务器端的通信状态 if(xhr.readyState === 4){ console.log(xhr.responseText); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>readyState属性</title> </head> <body> <button id="btn">按钮</button> </body> <script src="./createXMLHttpRequest.js"></script> <script> var btn = document.getElementById('btn') btn.addEventListener('click', function () { var xhr = createXMLHttpRequest(); xhr.onreadystatechange = function () { console.log(xhr.readyState) if (xhr.readyState === 4) { //此时不光要监听到响应完成,还要保证当前的异步请求一定是正确的 /* XMLHttpRequest的status 作用:得到当前请求的响应状态码 常见: 200 成功 304 请求资源未变化(转向来获取本地缓存) 404 服务器端地址为找到 */ console.log(xhr.status) if (xhr.readyState === 4 && xhr.status === 200) { /* 接收服务器端响应的结果 responseText属性- 专门接收字符串 类型的结果内容 responseXML属性 - 专门接收XML数据格式的结果内容 */ console.log(xhr.responseText); } } } xhr.open('get', '测试url') xhr.send(null) }) </script> </html>
通过Ajax异步请求数据
调用XMLHttpRequest对象的send()方法向服务器端发送请求数据
- send(data)方法: data表示要向服务器端发送的请求数据
- 请求方式:不写method的话,默认为get
- 如果当前的请求方式为GET的话 send()方法中只能传递null值
- 将请求数据添加请求链接地址中 例如:
xhr.open('get','地址?user=zhangwuji&pwd=123456');
- 两种情况
- 发送数据 : user=zhangwuji&pwd=123456
- 请求数据的格式
- 如果具有多个请求数据的话,之间使用"&"进行分隔
- 每个数据格式: name=value
- 请求数据的格式
- 不发送数据 :send()方法中必须传递null值,而不能为空
- 发送数据 : user=zhangwuji&pwd=123456
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>send()方法</title>
</head>
<body>
<!-- 提交表单时,向服务器端发送数据
不写method的话,默认为get
请求数据被添加请求链接地址中 ?user = 小明&password=123123
请求数据格式:
1.如果具有多个请求数据的话,之间用&进行分割
2.每个数据格式为 name=value
-->
<form action="#">
<input type="text" id="user" name="user">
<input type="text" id="pwd" name="pwd">
<input type="submit">
</form>
<button id="btn">按钮</button>
</body>
<script src="./createXMLHttpRequest.js"></script>
<script>
var btn = document.getElementById('btn')
btn.addEventListener('click', function () {
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function () {
console.log(xhr.readyState)
if (xhr.readyState === 4) {
console.log(xhr.status)
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
}
xhr.open('get', '测试url')
//向服务器端发送请求数据
/*
send(data)方法:
data:表示要向服务器端发送的请求数据
两种情况:
发送数据:请求数据格式:
1.如果具有多个请求数据的话,之间用&进行分割
2.每个数据格式为 name=value
不发送数据:send()参数必须要写,不发送数据就写null
*/
//人为的方式获取当前的格式,构建成指定的数据格式
xhr.send(null)
})
</script>
</html>
GET与POST请求方式
GET请求方法
Ajax异步交互中使用GET请求方式的话,需要注意以下几个问题:
1.将构建的请求数据添加到open()方法中的url地址中
xhr.open('get', '测试url?name=小明&password=123456',true)
上述代码中,name=小明&password=123456
表示请求数据
2.将发送请求数据的send()方法中的参数设置为null
xhr.send(null)
POST请求方法
Ajax异步交互中使用POST请求方式的话,需要注意以下几个问题:
1.调用send()方法之前,需要通过XMLHttpRequest对象的setRequestHeader()方法设置请求头信息。
xhr.setRequestHeader(header,value)
- header:将要被赋值的请求头名称
- value:给指定的请求头赋值
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
2.通过XMLHttpRequest对象的send()方法请求数据