php js ajax实例,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 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中

}

}

"

相关推荐：