实现ajax的核心步骤：
1.定义对象；
2.打开链接；
3.发送数据；
4.处理响应状态；
5.进行dom渲
1.为什么要定义对象？
xmlhttprequest对象是ajax的基础，它的作用是：被使用在后台中，实现客户端与服务器之间的数据交换。
所以：
" 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> "
相关推荐：
javascript实现ajax异步请求实例详解
原生javascript实现ajax异步请求
jquery实现ajax 验证用户名唯一性
以上就是js实现ajax的实例代码的详细内容。