js实现Ajax的实例代码

来源：互联网 2024-10-11 17:37:20

本文主要和大家分享js实现ajax的实例代码，希望能帮助到大家。

实现Ajax的核心步骤：
1.定义对象；
2.打开链接；
3.发送数据；
4.处理响应状态；

5.进行DOM渲

1.为什么要定义对象？

XMLHttpRequest对象是Ajax的基础，它的作用是：被使用在后台中，实现客户端与服务器之间的数据交换。

所以：

"var xhr;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject(&#39;Micorsoft.XMLHTTP&#39;);                //在IE5和IE6中只有 ActiveXObject(&#39;Micorsoft.XMLHTTP&#39;) 能够实现数据交互}""<body><ul id="showCon"></ul><ｓｃｒｉｐｔ type="text/javascript">var oU = document.getElementById("showCon");//1.创建对象var xhr;//做兼容if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{  //IE5 IE6xhr = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);}//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中}}</ｓｃｒｉｐｔ></body>"