AJAX

来源：互联网发布：天堂伞淘宝编辑：程序博客网时间：2024/06/02 06:38

一、

AJAX三步曲：

1、创建XMLHttpRequest对象：

var xmlhttp;if(window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

2、回调函数，准备下一步（发送请求）过程中的事件监听：

xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4 && xmlhttp.status==200){//发送成功 }}

3、发送请求：

xmlhttp.open("GET","stu.json",true);xmlhttp.send();

二、简单应用：

现在通过ajax获取stu.json文件中的数据并显示在表格中。

这里需要注意的是尽管是.json文件，在互联网传输的时候都是通过字符串传输的，所以传过来都是字符串。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><table id="ta"></table><script>//第一步，创建对象var xmlhttp;if(window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}//第二步，回调函数xmlhttp.onreadystatechange = function() {if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { //发送成功var jon = xmlhttp.responseText;var j = JSON.parse(jon);var str = "";for(var i = 0; i < j.length; i++) {var stu = j[i];str += "<tr>";str += "<td>" + stu.id + "</td>";str += "<td>" + stu.name + "</td>";str += "<td>" + stu.age + "</td>";str += "</tr>";}// alert(str);var ta = document.getElementById("ta");ta.innerHTML = str;}}//第三步，发送请求xmlhttp.open("GET", "stu.json", true);xmlhttp.send();</script></body></html>

运行：

阅读全文

0 0