Ajax
Ajax介绍
AJAX是异步的JavaScript和XML(Asynchronous JavaScript And XML)。简单点说,就是使用 XMLHttpRequest
对象与服务器通信。 它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性,也就是说它可以在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。
可以使用AJAX最主要的两个特性做下列事:
- 在不重新加载页面的情况下发送请求给服务器。
- 接受并使用从服务器发来的数据。
0x01 怎样发起http请求
//创建一个XHR对象
var httpRequest = new XMLHttpRequest();
发送一个请求后,你会收到响应。你要告诉XMLHttp请求对象是由哪一个js函数处理响应,在设置了对象的 onreadystatechange
属性后给他命名,当请求状态改变时调用函数。
httpRequest.onreadystatechange = nameOfTheFunction;
要注意的是,函数名后没有参数,因为把一个引用赋值给了函数,而不是真正的调用了它。 此外,如果不使用函数名的方式,你还可以用JavaScript的匿名函数响应处理的动作,就像下面这样:
httpRequest.onreadystatechange = function(){
// Process the server response here.
};
接下来,声明当你接到响应后要做什么,要发送一个实际的请求,通过调用HTTP请求对象的 open()
和 send()
方法,像下面这样:
httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();
data = "something....";
httpRequest.open('POST', 'http://www.example.org/some.file', true);
httpRequest.send(data);
open()
的第一个参数是HTTP请求方法 - 有GET,POST,HEAD以及服务器支持的其他方法。 保证这些方法一定要是大写字母,否则其他一些浏览器(比如FireFox)可能无法处理这个请求。- 第二个参数是你要发送的URL。由于安全原因,默认不能调用第三方URL域名。 确保你在页面中使用的是正确的域名,否则在调用
open()
方法是会有 “permission denied” 错误提示。一个容易犯的错误是企图通过domain.tld
访问网站, 而不是使用www.domain.tld
。 - 第三个参数是可选的,用于设置请求是否是异步的。如果设为
true
(默认值),即开启异步,JavaScript就不会在此语句阻塞,使得用户能在服务器还没有响应的情况下与页面进行交互。
send()
方法的参数可以是任何你想发送给服务器的内容,如果是 POST
请求的话。发送表单数据时应该用服务器可以解析的格式,像查询语句:
"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
或者其他格式, 类似 multipart/form-data
,JSON,XML等。
如果你使用 POST 数据,那就需要设置请求的MIME类型。比如,在调用 send()
方法获取表单数据前要有下面这个:
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
0x02 处理服务器响应
在发送请求时,提供的JavaScript函数名负责处理响应:
httpRequest.onreadystatechange = nameOfTheFunction;
这个函数应该做什么?首先,函数要检查请求的状态。可以通过检查返回的状态码 200 OK
来判断AJAX是否成功
if (httpRequest.status === 200) {
// Perfect!
} else {
// There was a problem with the request.
// For example, the response may have a 404 (Not Found)
// or 500 (Internal Server Error) response code.
}
在检查完请求状态和HTTP响应码后, 就可以用服务器返回的数据做任何你想做的了。你有两个方法去访问这些数据:
httpRequest.responseText
– 服务器以文本字符的形式返回httpRequest.responseXML
– 以 XMLDocument 对象方式返回,之后就可以使用JavaScript来处理
注意上面这一步只在发起异步请求时有效(即 open()
的第三个参数未特别指定或设为 true
)。如果发起的是同步请求则不必使用函数,但是非常不推荐这样子做,它的体验很糟糕。
0x03 简单的列子
前端使用Ajax发送用户名和密码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax and node study</title>
</head>
<body>
<h3>你好,欢迎访问</h3>
<p>请输入您的用户名和密码</p>
<form name="myForm">
<input name="username" id="username" type="text" style="display: flex;">
<input name="passwd" id="passwd" type="password">
<input id="submit" type="button" value="login" style="display: flex;">
</form>
<script>
document.getElementById('submit').onclick = sendMsg;
function sendMsg() {
var username = document.getElementById('username').value;
var passwd = document.getElementById('passwd').value;
//创建一个xhr对象
var xhr = new XMLHttpRequest();
//开启访问 这里使用POST方法
xhr.open('POST', 'http://localhost:8000');
//发送数据
xhr.send(`username: ${username} passwd: ${passwd}`);
alert('已发送');
}
</script>
</body>
</html>
后端代码
const http = require('http');
const fs = require('fs');
recv = ''
const server = http.createServer((req, res) => {
//设置CORS头部允许从http://127.0.0.1:5500跨域请求http://localhost:8000
res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');
req.on('data', (data) => {
recv += data;
});
res.end(recv);
});
server.listen(8000);
console.log('访问 http://localhost:8000');
运行结果
使用Ajax在浏览器中是默认不允许进行跨域访问的(若服务端未设置Access-Control-Allow-Orign
头部),但值得注意的是,事实上服务端还是收到了来自客户端的数据了的,只是浏览器返回给用户一个CORS错误。
这里向服务器跨域发送,发现在浏览器会报错
但服务器依旧是收到了来自客户端的数据
0x04 小结
Ajax在异步处理中占据着举足轻重的地位,向在XSS中可向自己的服务器发送相关的数据等等。当然,有关XMLHttpRequest的更多用法这里还未提及,需要自己去探索