js实现Ajax的实例代码

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

实现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') 能够实现数据交互}""

登录后复制var oU = document.getElementById(“showCon”);//1.创建对象var xhr;//做兼容if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{ //IE5 IE6xhr = 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 创建的每一个li元素oU.appendChild(oLi);}//注意点://1.字符串===>json//2.获取每一个对象里的className的值//|–第一步:想到利用for循环得到data1中的每一个元素//|–第二步:因为ul中,没有li元素,所以需要进行DOM元素创建;(其实这里可以直接想到:既然创建,必定要进行”添加”)//|–第三步:把转换之后的 对象[i].className ====> 对应创建的li//|–第四步:把赋过值得li追加到ul中}}”

相关推荐:

JavaScript实现Ajax异步请求实例详解

原生JavaScript实现Ajax异步请求

jQuery实现Ajax 验证用户名唯一性

以上就是js实现Ajax的实例代码的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2785395.html

(0)
上一篇 2025年3月8日 17:25:30
下一篇 2025年3月8日 17:25:41

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论