Ajax - 基础
Ajax技术,在2005年第一次正式出现, 是web2.0时代的标志,推动web开发技术向纵深发展。
XMLHttpRequest对象
XMLHttpRequest对象是Ajax的基础,在JavaScript中,XMLHttpRequest用于在后台与服务器交换数据,使浏览器可以在不重载整个页面的情况下,进行局部的数据更新。
创建XMLHttpRequest:
var xhr = new XMLHttpRequest();
// 所有的浏览器实现的XMLHttpRequest对象都踢动相同的接口与方法
创建open()方法建立一个HTTP请求:
// method:HTTP 请求方法,必要参数,值包括GET、POST、HEAD,不区分大小写;
// url: 请求的URL字符串,必选参数,大部分浏览器仅支持同源请求;
// async: 指定请求是否为异步方式,默认true,如果设置为FALSE,当状态改变时会立即调用onreadystatechange属性指定的回调函数;
// username: 可选参数,如果服务器需要验证,username指定用户名,如果未指定,当服务器需要验证时,会弹出验证窗口
// password:可选参数,验证信息中的密码,如果username参数为空,password的值会被忽略
xhr.open(method,url,async,username,password);
使用send()方法发送请求:
// 参数body表示将通过该请求发动的数据,如果不传递信息,可以设置为null或者省略不填
xhr.send(body);
发送请求后,使用XMLHttpRequest对象的responseBody、responseStream、responseText、responseXML属性接收相应数据。
GET和POST请求
最常见的客户端传递参数的方式:get请求和post请求。
POST请求是向服务器传送数据,请求传送的数据量较大,一般默认为不受限制;GET请求是从服务器获取数据,请求传送的数据量较小。
发送GET请求
实现方法: 将包含查询字符串的URL传入open方法,设置open方法的第一个参数为GET。
优点:请求简洁、方便,适用于简单字符串。
缺点:不适用于大容量或者加密数据。
GET请求示例:
<input name="submit" type="button" id="submit" value="向服务器发出请求" />
<script>
window.onload = function () { //页面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
// 查询字符串通过“?”作为前缀附加在URL的末尾,可以通过“&”连接多个键值对作为查询参数
var url = "server.php?callback=functionName"; //设置查询字符串
var xhr = createXHR(); //实例化XMLHttpRequest 对象
xhr.open("GET", url, false); //建立连接,要求同步响应
xhr.send(null); //发送请求
console.log(xhr.responseText); //接收数据
}
}
</script>
发送POST请求
优点:请求允许发送任意类型、任意长度的数据,通常用于表单的提交。
方法:使用send()进行传递,不以字符串的方式传递.
// post字符串的格式和get字符串相同
send("userName = Tom & password = 123456");
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); //建立连接,要求同步响应
//设置为表单方式提交,一般使用POST请求必须设置这一项,否者服务器无法识别传递的数据
xhr.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded');
xhr.send("callback=functionName"); //发送请求
console.log(xhr.responseText); //接收数据
}
}
JSON转换为字符串
get和post方法都是以名值对的字符串格式发动数据的,下面提供一个在C语言中文网学到的工具函数,这个函数能将数据转换为串行格式字符串并返回:
//把JSON数据转换为串行字符串
//参数:data表示数组或对象类型的数据
//返回值:串行字符串
function JSONtoString (data) {
var a = []; //临时数组
if (data.constructor == Array) { //处理数组
for (var i = 0; i < data.length; i ++) {
a.push(data[i].name + "=" + encodeURIComponent(data[i].value));
}
} else { //处理对象
for (var i in data) {
a.push(i + "=" + encodeURIComponent(data[i]));
}
}
return a.join("&"); //把数组转换为串行字符串,并返回
}
XMLHttpRequest.readyState跟踪异步请求的状态
当Ajax请求被发送到服务器时,我们需要根据请求响应状态执行一定的操作,XMLHttpRequest对象的状态信息存储在readyState属性中。
异步响应状态
使用readyState属性可以实时跟踪异步响应状态。
每当readyState属性改变时,会触发readystatechange事件,然后将响应的处理代码放在onreadystatechange事件处理函数中。
返回值 | 说明 |
---|---|
0 | 未初始化。表示对象已经建立,尚未初始化,尚未调用open方法 |
1 | 已初始化。表示对象已经建立,已经初始化,尚未调用open方法 |
2 | 发送数据。表示已经调用了send方法,但是当前请求状态以及HTTP头未知 |
3 | 数据传送中。已经接收部分数据,因为响应以及HTTP头不安全,这是通过responseBody和responseText获取部分数据会出现错误 |
4 | 完成。数据接收完毕,这是可以通过responseBody 和 responseText获取完整响应数据 |
如果readState属性值为4,说明响应完毕,可以安全的读取响应数据。
(更安全的方法:监测HTTP状态码,只有HTTP状态码为200时,说明HTTP响应顺利完成。)
中止请求
使用abort()方法中止正在进行中的请求:
xhr.onreadystatechange = function () {}; //清理事件响应函数
xhr.abort(); //中止请求
中止请求的注意事项:
- 调用abort方法前,需要先清除onreadystatechange事件处理函数,因为IE和Mozilla浏览器在中止请求后也会激活这个事件处理函数。
- 如果给onreadystatechange属性设为null,在IE浏览器中会发生异常,所以需要设置为空函数。
Ajax解析返回的数据(多种格式)
XMLHttpRequest对象通过responseBody、responseText、responseStream或者responseXML属性获取响应信息,这些属性都是只读属性。
响应信息 | 说明 |
---|---|
responseBody | 将响应信息正文以 Unsigned Byte 数组形式返回 |
responseText | 以 ADO Stream 对象的形式返回响应信息 |
responseStream | 将响应信息作为字符串返回 |
responseXML | 将响应信息格式化为 XML 文档格式返回 |
纯文本
简短的信息,可以使用纯文本格式进行响应。
缺点:传递过程中易丢失,且无法检测信息的完整性
var xhr = new XMLHttpRequest(); // 实例化XMLHttpRequest对象
xhr.open("GET", "server.txt", true); // 建立连接,要求异步响应
xhr.onreadystatechange = function () { // 绑定响应状态事件监听函数
if(xhr.readyState === 4){ // 监听readyState属性变化
if (xhr.status == 200 || xhr.status == 0) { //监听HTTP状态码
var info = xhr.responseText;
if (info == "true") console.log("文本信息传输完整"); //检测信息是否完整
else console.log("文本信息可能存在丢失");
}
}
}
xhr.send(); // 发送请求
XML格式
XML格式更加通用,如果需要协作开发且项目比较庞杂,可以使用这一格式。
服务器端的XML文档:
<?xml version="1.0" encoding="utf-8"?>
<the>XML 数据</the>
<input name="submit" type="button" id="submit" value="向服务器发出请求" />
<script>
window.onload = function () { //页面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
var xhr = createXHR(); //实例化XMLHttpRequest对象
xhr.open("GET", "server.xml", true); //建立连接,要求异步响应
xhr.onreadystatechange = function () { //绑定响应状态事件监听函数
if (xhr.readyState == 4) { //监听readyState状态
if (xhr.state == 200 || xhr.status == 0) { //监听HTTP状态码
var info = xhr.responseXML;
console.log(info.getElementsByTagName("the")[0].firstChild.data); //返回元信息字符串“XML 数据”
}
}
}
xhr.send(); //发送请求
}
}
</script>
HTML格式
<table border="1" width="100%">
<tr><td>RegExp.exec()</td><td>通用的匹配模式</td></tr>
<tr><td>RegExp.test()</td><td>检测一个字符串是否匹配某个模式</td></tr>
</table>
<input name="submit" type="button" id="submit" value="向服务器发出请求" />
<script>
window.onload = function () { //页面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
var xhr = createXHR(); //实例化XMLHttpRequest对象
xhr.open("GET", "server.xml", true); //建立连接,要求异步响应
xhr.onreadystatechange = function () { //绑定响应状态事件监听函数
if (xhr.readyState == 4) { //监听readyState状态
if (xhr.state == 200 || xhr.status == 0) { //监听HTTP状态码
var o = document.getElementById("grid");
o.innerHTML = xhr.responseText; //直接插入到页面中
}
}
}
xhr.send(); //发送请求
}
}
</script>
JSON格式
使用responseText获取JSON格式的字符串,使用eval()方法解析为本地JavaScript脚本,再从数据对象中读取信息。
{ user : "css8", pass : "123456", email : "css8@123.cn" }
<input name="submit" type="button" id="submit" value="向服务器发出请求" />
<script>
window.onload = function () { //页面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
var xhr = createXHR(); //实例化XMLHttpRequest对象
xhr.open("GET", "server.xml", true); //建立连接,要求异步响应
xhr.onreadystatechange = function () { //绑定响应状态事件监听函数
if (xhr.readyState == 4) { //监听readyState状态
if (xhr.state == 200 || xhr.status == 0) { //监听HTTP状态码
var info = xhr.responseText;
var o = eval("(" + info + ")"); //调用eval()把字符串转换为本地脚本
console.log(info); //显示JSON对象字符串
console.log(o.user); //读取对象属性值,返回字符串“css8”
}
}
}
xhr.send(); //发送请求
}
}
</script>
eval()方法解析JSON字符串存在安全隐患。如果 JSON 字符串中包含恶意代码,在调用回调函数时可能会被执行。
解决方法:先对 JSON 字符串进行过滤,屏蔽掉敏感或恶意代码。
不过,确信所响应的 JSON 字符串是安全的,没有被人恶意攻击,那么可以使用 eval() 方法解析 JSON 字符串。
JavaScript脚本
不建议使用JavaScript作为响应格式
// 示例js脚本
function () {
var d = new Date();
return d.toString();
}
客户端执行下面的请求,通过responseText获取响应信息,并用eval()把字符串转换为脚本
使用eval()方法时,在字符串前后附加两个小括号,一个用来包裹函数体,一个表示调用函数(立即执行函数)
<input name="submit" type="button" id="submit" value="向服务器发出请求" />
<script>
window.onload = function () { //页面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
var xhr = createXHR(); //实例化XMLHttpRequest对象
xhr.open("GET", "server.xml", true); //建立连接,要求异步响应
xhr.onreadystatechange = function () { //绑定响应状态事件监听函数
if (xhr.readyState == 4) { //监听readyState状态
if (xhr.state == 200 || xhr.status == 0) { //监听HTTP状态码
var info = xhr.responseText;
var o = eval("(" + info + ")" + "()"); //用eval()把字符串转换为脚本
console.log(o); //返回客户端当前信息
}
}
}
xhr.send(); //发送请求
}
}
</script>
获取和设置HTTP报头消息
HTTP请求和响应都包含一组头部消息。
- 获取响应头部消息:getAllResponseHeaders();
- 获取指定的HTTP头部消息,参数为获取头部的名称:getResponseHeader(“Header-name”);
var xhr = new XMLHttpRequest();
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);
- 在发送请求中设置各种头部消息:
xhr.setResponseHeader("Header-name", "value");
,Header-name表示头部消息的名称,value表示消息的具体值 - 使用POST方法传递表单数据时,可以设置如下头部消息:
xhr.setResponseHeader("Content-Type", "application/x-www-form-urlencoded");
相关文章
- 学习在.NET Core中使用RabbitMQ之启动和基础(一)
- flask插件系列之SQLAlchemy基础使用
- ajax——dom基础
- 2.Vivado软件基础操作
- 24JavaWeb基础 - AJAX介绍
- Python爬虫技术--基础篇--内建模块hashlib和hmac
- Html5游戏开发开始前的一些数学基础
- SwiftUI基础之form融合textfield、toggle、button制作登录界面
- getSnapshot(in:completion:) 小组件widget基础(SwiftUI 中文文档手册)
- flutter系列之:深入理解布局的基础constraints
- 软考中级计算机硬件基础
- Sangmado之.NET项目公共基础类库
- 【Verilog基础】逻辑综合(3)逻辑综合中如何施加时序约束
- IntellJ IDEA 基础之 一些常用插件plugin 简单整理 (辅助提高编写代码效率)
- Java 基础 之 获取当前一周的所有日期/获取指定任意日期当周一星期的所有日期
- lqb 基础练习 杨辉三角形
- JavaScript基础注意点
- 基础和高级的ACL的基础配置和原理