1.ajax的基本概念

ajax的原理：通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后通过JavaScript操作数据，从而达到更新页面的效果

<script>var xhr = new XMLHttpRequest();xhr.open('get', './test.txt');xhr.send();xhr.onreadystatechange = function() {console.log(this.readyState);if(this.readyState != 4) {return;}console.log(this.responseText);document.getElementsByTagName('body')[0].innerHTML = this.responseText;}
</script>

2.readyState的状态变化

<script>var xhr = new XMLHttpRequest();console.log(xhr.readyState);xhr.open("get", "./01.ajax的基本概念.html");console.log(xhr.readyState);xhr.send();xhr.addEventListener("readystatechange", function() {console.log(xhr.readyState);switch(xhr.readyState) {case 2:console.log(this.getAllResponseHeaders());console.log(this.getReaspinseHeader("date"));console.log(this.responseText);break;case 3:console.log(this.responseText);break;case 4:console.log(this.responseText);}})
</script>

3.遵循http协议

<script>var xhr = new XMLHttpRequest();xhr.open("post", "./test.txt");xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xhr.send("username=Cherry&password=123456");xhr.addEventListener("readystatechange", function() {if(this.readyState == 4 && this.status == 200) {console.log(this.responseText);}}) 
</script>

4.请求后台的数据渲染到dom中来

<ul id="uu"></ul>
<script>var ulObj = document.getElementById("uu");var xhr = new XMLHttpRequest();xhr.open("get", "./contacts.json");xhr.send();xhr.addEventListener("readystatechange", function() {if(this.readyState != 4) {return;}console.log(this.responseText);var data = this.responseText;data = JSON.parse(data);for(var i = 0; i < data.length; i++) {var li = document.createElement("li");li.innerHTML = data[i].name;ulObj.appendChild(li);}})
</script>

5.post发送请求

<div>添加品牌数据：<input type="text" id="product"><br><button id="btn">确定</button>
</div>
<script>var  inp = document.getElementById("product");var btn = document.getElementById("btn");btn.onclick = function() {var addName = inp.value;var xhr = new XMLHttpRequest();xhr.open("post", "http://www.liulongbin.top:3005/api/addproduct");xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xhr.send("name=" + addName);xhr.addEventListener("readystatechange", function() {if(this.readyState != 4) {return;}console.log(this.responseText);})}
</script>