原生js-Ajax jq-Ajax集结

Ajax这玩意，无坚不摧，唯快不破！

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
var xhr;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixhr=new XMLHttpRequest();}
else{// code for IE6, IE5xhr=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))//trueconsole.log(data instanceof Array);//tureconsole.log(data.constructor === Array);//trueconsole.log(Object.prototype.toString.call(data) === '[object Array]')//truevar 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://jspang.com/DemoApi/oftenGoods.php",true);
xhr.send();
alert(xhr.getAllResponseHeaders())for (let i = 0; i < 4;i++) {document.body.appendChild(document.createElement('P'))
}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：响应已完成；您可以获取并使用服务器的响应了。
</script>
</head>
<body><div id="myDiv"></div>
</body>
</html>复制代码

原生js-Ajax jq-Ajax集结相关推荐

Ajax和JSON-学习笔记01【原生JS方式实现Ajax】
Java后端学习路线笔记汇总表[黑马程序员] Ajax和JSON-学习笔记01[原生JS方式实现Ajax] Ajax和JSON-学习笔记02[JQuery方式实现Ajax] Ajax和JSON-学 ...
php上js实现ajax请求,原生JS如何实现Ajax通过POST方式与PHP进行交互的方法
原生JS如何实现Ajax通过POST方式与PHP进行交互的方法发布时间:2021-04-20 11:28:22 来源:亿速云阅读:52 作者:小新这篇文章将为大家详细讲解有关原生JS如何实现Aj ...
原生JS中的Ajax
所谓Ajax,就是在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式.而我们常说的原生JS中的Ajax就是围绕XMLHttpRequest对象进行发送请求. 1.XMLHttp ...
原生js获取html元素属性,JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）...
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性二.设置元素的属性三.删除元素的属性一.获取元素的属性 1-原生JS 获取属性 .ge ...
animate用法 js原生_原生js实现jq的animate效果.js
原生js实现jq的animate效果(有一定bug未修复,有时间补上) //原生js实现jq的animate效果 /** *@param obj 执行动画的元素 *@param css JSON数值对 ...
使用原生JS封装一个Ajax
原生的Ajax写起来比较麻烦,而且每次使用的时候都得从头开始写,导致了很多不必要的工作量,产生了大量的冗余代码.这里就可以封装一个Ajax,以供以后的开发中进行使用. 首先,要想封装一个Ajax,就得 ...
JQuary（从原生js到jq，就发现jq好简单）
1.jQuery介绍 jQuery是一个优秀的JavaScript库,以最少的代码实现更多的功能特点: 1.强大的选择器的功能 $("selector") 2.语法简介 $(&q ...
原生js、jq移入移出事件
在原生js上移入移出共有两种一种是冒泡的鼠标移入或移出被选元素及其所有子元素就会触发 element.onmouseover = function(){alert("移入"); ...
原生JS和JQ实现div的展开与收齐动画
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>展开 ...
原生 js 拦截所有ajax请求可用于油猴子
需要把所有ajax请求中的header取出来所以写了如下代码 chrome测试通过 <!DOCTYPE html> <html lang="en"> &l ...

原生js-Ajax jq-Ajax集结

原生js-Ajax jq-Ajax集结相关推荐

最新文章

热门文章