原生js实现Ajax---get
2017-07-29 本文已影响0人
fronter
实现Ajax的核心步骤：
1.定义对象；
2.打开链接；
3.发送数据；
4.处理响应状态；
5.进行DOM渲染。
1.为什么要定义对象？
XMLHttpRequest对象是Ajax的基础，它的作用是：被使用在后台中，实现客户端与服务器之间的数据交换。
2.为什么要做IE5和IE6的兼容？
因为在IE5和IE6中，不存在XMLHttpRequest对象。
所以：
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Micorsoft.XMLHTTP');
//在IE5和IE6中只有 ActiveXObject('Micorsoft.XMLHTTP') 能够实现数据交互
}
<body>
<ul id="showCon">
</ul>
<script type="text/javascript">
var oU = document.getElementById("showCon");
//1.创建对象
var xhr;
//做兼容
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{ //IE5 IE6
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
// console.log(xhr.readyState);//0
//2.打开连接
xhr.open("GET","http://datainfo.duapp.com/shopdata/getclass.php");
// console.log(xhr.readyState);//1
//3.发送请求（数据）
xhr.send();
//4.获取到数据，渲染页面
xhr.onreadystatechange = function(){
// console.log(xhr.readyState);
if(xhr.readyState == 4 && xhr.status == 200){
// console.log(xhr.responseText);
var t = xhr.responseText; //get方法获取的是:字符串.我们需要将其转换成JSON数据进行操作
var data1 = JSON.parse(t); //字符串====>json数据!!!!!!!!!!
//json====>字符串 JSON.stringify(data1)
for(var i = 0;i < data1.length;i++){ //因为这里获得的是一个数组，所以首选的是for循环
var oLi = document.createElement("li");
oLi.textContent = data1[i].className;
//每一个对象下面的className值====>创建的每一个li元素
oU.appendChild(oLi);
}
// 注意点:
// 1.字符串===>json
// 2.获取每一个对象里的className的值
// |--第一步:想到利用for循环得到data1中的每一个元素
// |--第二步:因为ul中,没有li元素,所以需要进行DOM元素创建;(其实这里可以直接想到:既然创建,必定要进行"添加")
// |--第三步:把转换之后的 对象[i].className ====> 对应创建的li
// |--第四步:把赋过值得li追加到ul中
}
}
</script>
</body>
