Ajax
1 简介
作用:获取服务器数据,对页面进行局部异步刷新
Asynchronous Javascript And XML,使用JS代码获取服务器数据
2 GET & POST
2.1 get 和 post 的区别
GET | POST | |
---|---|---|
后退按钮/刷新 | 无害 | 数据会被重新提交(浏览器应该告知用户数据会被重新提交)。 |
书签 | 可收藏为书签 | 不可收藏为书签 |
缓存 | 能被缓存 | 不能缓存 |
编码类型 | application/x-www-form-urlencoded | application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。 |
历史 | 参数保留在浏览器历史中 | 参数不会保存在浏览器历史中。 |
对数据长度的限制 | 当发送数据时,GET 方法向 URL 添加数据;URL 的长度是受限制的(URL 的最大长度是 2048 个字符)。 | 无限制。 |
对数据类型的限制 | 只允许 ASCII 字符。 | 没有限制。也允许二进制数据。 |
安全性 | 与 POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ! | POST 比 GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中。 |
可见性 | 数据在 URL 中对所有人都是可见的。 | 数据不会显示在 URL 中。 |
2.2 get请求
将查询的字符串参数放到 URL 末尾发送
// 1. 创建XMLHttpRequest对象
var xhr = null; //兼容IE6及以下
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {//IE6浏览器
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
// 2. 使用XHR对象,第三个参数为true时,异步操作
xhr.open("get", "example.php ? name1 = value1 & name2 = value2", true);
// 3. 发送参数
xhr.send(null);
// 4. 设置回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var result = xhr.responseText / xhr.responseXML; //得到数据
// 执行的操作
...
}
}
};
2.3 post请求
将查询的字符串参数放在请求体中
// 1. 创建XMLHttpRequest对象
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
//IE6浏览器
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
// 2. 使用XHR对象,第三个参数为true时,异步操作
xhr.open("post", "example.php", true);
// 3. 发送参数
//对于post请求来说的话,我们的参数应该放到请求体中
//设置xhr的请求头信息,这个步骤仅仅是针对于post请求才有的
var param = "name1=" + value;
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(param);
// 4. 设置回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var result = xhr.responseText / xhr.responseXML; //得到数据
// 执行的操作
...
}
}
};
2.4 readyState状态值:
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
2.5 setRequestHeader( content-type,属性值 )
常用属性值 | 传输的类型 | 用途 |
---|---|---|
text/plain | 纯文本 | 用不着 |
application/x-www-form-urlencoded | url编码方式&& | 简单数据 |
multipart/form-data | 定界符分割各个数据(文件上传) | 上传文件 |
3 Ajax封装
/*
* ajax封装
*
* 封装思路
* 1. 将get & post方法写一起
* 2. 把需要的变化的数据作为参数
* 3. 对比两者不同之处,进行条件判断
* 4. 增强健壮性
* 1)encodeURIComponent
*/
function ajax(options) {
// 文件地址,数据(json),post/get,成功回调,失败回调
// url, data, type, success, err
options = options || {}
options.data = options.data || {};
options.type = options.type || 'get';
options.dataType = options.dataType || 'text';
let xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObeject('Microsoft.XMLHttp');
}
// data数据拼成字符串
let dataArr = [];
for (let name in options.data) {
dataArr.push(`${encodeURIComponent(name)}=${encodeURIComponent(options.data[name])}`);
}
let dataStr = dataArr.join('&');
// get
if (options.type == 'get' || options.type == 'GET') {
xhr.open(options.type, options.url + '?' + dataStr, true);
xhr.send(null);
} else {
// post
xhr.open(options.type, options.url, true);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(dataStr);
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
let data = xhr.responseText;
// 成功
switch (options.dataType) {
case 'json':
if (window.JSON && JSON.parse) {
data = JSON.parse(data);
} else {
data = eval('(' + str + ')');
}
break;
case 'xml':
data = xhr.responseXML;
break;
}
options.success && options.success(data);
} else {
// 错误
options.error && options.error();
}
}
};
}
使用
ajax({
url: '',
type: GET,
data: {
name1: value1;
},
dataType: "", //json text xml
success(result) {
...
},
error(err) {
...
}
});
4 跨域
4.1 概念
跨域是为了获取别人服务器的数据,Ajax只能访问自己服务器的数据(同源的数据)
浏览器有一个安全机制为同源策略
同源的三个相同:协议相同、域名相同、端口相同
跨域的本质就是服务器返回了个方法调用,这个方法是我们自己先定义好的,只要获取方法调用里的参数
4.2 方式
-
jsonp -
ajax cors
-
WebSocket
-
formData