<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
var xhr;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange=function()
{
if (xhr.readyState==4 && xhr.status==200)
{
console.log(typeof xhr.responseText);
var data = JSON.parse(xhr.responseText);
console.log(xhr.statusText)//返回状态字符串（比如 "Not Found" 或者 "OK"）。
// 判断是否是数组
console.log(Array.isArray(data))//true
console.log(data instanceof Array);//ture
console.log(data.constructor === Array);//true
console.log(Object.prototype.toString.call(data) === '[object Array]')//true
var ul = document.createElement('ul');
ul.setAttribute('id','ulList')
data.forEach((item,index) => {
console.log(item.goodsId);
myDiv.appendChild(ul);
for (var i = 0; i < myDiv.childNodes.length;i++) {
ulList.innerHTML += `<li>${item.goodsId}${item.goodsName}</li>`;
}
})
var ulc = ulList.getElementsByTagName('li');
for (x in ulc) {
ulc[x].style.color = '#fd7722';
}
}
}
xhr.open("get","http://xx",true);
xhr.send();
alert(xhr.getAllResponseHeaders())
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
GET请求具有以下的几个特点：
GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据
POST请求的特点如下：
POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 请求不能被收藏为书签
POST 请求对数据长度没有要求
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。
提示：XHR.readyState状态的变化如下：
0：请求未初始化，还没有调用 open()。
1：请求已经建立，但是还没有发送，还没有调用 send()。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
4：响应已完成；您可以获取并使用服务器的响应了。
后端设置跨域几种方法
header('content-type:application:json;charset=utf8');
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
封装一下:
{
function publicAjax(opt) {
opt = opt || {};
opt.method = opt.method || 'GET';
opt.url = opt.url || '';
opt.async = opt.async || true;
opt.data = opt.data || null;
opt.dataType = opt.dataType || 'JSON'
opt.success = opt.success || function () {};
var xmlHttp = null;
XMLHttpRequest ? xmlHttp = new XMLHttpRequest() : xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
var params = [];
for (var key in opt.data)params.push(key + '=' + opt.data[key]);
var postData = params.join('&');
if (opt.dataType === 'JSONP') {
creatScript(opt.url, postData);
} else {
if (opt.method.toUpperCase() === 'POST') {
xmlHttp.open(opt.method, opt.url, opt.async);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(postData);
}
else if (opt.method.toUpperCase() === 'GET') {
xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
if (opt.dataType === 'JSON') {
//JSON.parse(xmlHttp.response)
opt.success(xmlHttp.response);
}
}
};
}
}
// 跨域启用创建script
function creatScript(url, data) {
var oScript = document.createElement('script');
oScript.src = url + '?' + data + '&callback=getEn';
document.body.appendChild(oScript);
}
}
用法： publicAjax({
url: URL + 'articles/index?',
data: {
},
success: function (val) {}
})
</script>
</html>
