ajax基础学习
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--<script src="jquery.js"></script>-->
<script>
//$(function(){}) //阻塞 -> 同步
//非阻塞 - 异步
/*setTimeout(function() {
alert(1);
}, 2000);
alert(2);*/
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
//打开浏览器
/*
1.创建一个ajax对象
ie6以下new ActiveXObject('Microsoft.XMLHTTP')
*/
var xhr = null;
/*if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}*/
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//alert( xhr.readyState );
//在地址栏输入地址
/*
open方法
参数
1.打开方式
2.地址,可以是文件也可以是服务器地址
3.是否异步
异步:非阻塞 前面的代码不会影响后面代码的执行
同步:阻塞 前面的代码会影响后面代码的执行
*/
xhr.open('get','1.txt',true);
//提交 发送请求
//alert(1);
xhr.send();
//alert( xhr.readyState );
//alert(1)
//alert( xhr.responseText );
//等待服务器返回内容
/*
readyState : ajax工作状态
responseText : ajax请求返回的内容就被存放到这个属性下面
on readystate change : 当readyState改变的时候触发
status : 服务器状态，http状态码
*/
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
alert( xhr.responseText );
} else {
alert('出错了,Err：' + xhr.status);
}
}
}
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn" />
</body>
</html>
1.通过txt,xml,json获取ajax数据
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajaxa-javascript写法</title> </head> <body> 显示通过ajax获取内容<div id="div1"></div> <button onclick="get()">点击获取文本格式的ajax</button> <button onclick="getXml()">点击获取xml格式的ajax</button> <button onclick="getJSON()">点击获取JSON格式的ajax</button> <script> //获取ajax文本内容方法 function get(){ var xml=new XMLHttpRequest(); //获取服务器地址的数据 xml.open("GET","http://192.168.2.106:8080/jquery/servlet/OneServlet",true); //xml.open("get","../lesson1.txt",true); xml.onreadystatechange=function(){ console.log("判断是否连接到服务器"+xml.status); console.log("判断是否处理到请求"+xml.readyState); if(xml.status==200&&xml.readyState==4){ var is=xml.responseText; document.getElementById("div1").innerHTML=is; } } xml.send(); } //通过xml获取 function getXml(){ var xml=new XMLHttpRequest(); //获取xml的数据 xml.open("get","1.xml",true); xml.onreadystatechange=function(){ console.log("判断是否连接到服务器"+xml.status); console.log("判断是否处理到请求"+xml.readyState); if(xml.status==200&&xml.readyState==4){ var is=xml.responseXML; for(var i=0;i<is.documentElement.getElementsByTagName("node").length;i++){ var name=is.documentElement.getElementsByTagName("input")[i].childNodes[0].nodeValue; var name1=is.documentElement.getElementsByTagName("select")[i].childNodes[0].nodeValue; //得到input id属性的值 var id=is.documentElement.getElementsByTagName("input")[0].getAttributeNode("id").value; document.getElementById("div1").innerHTML+="序号"+name+" 名字 "+name1+"<br>"; console.log(id); } } } xml.send(); } //获取json的ajax function getJSON(){ var xml=new XMLHttpRequest(); //获取xml的数据 xml.open("get","1.json",true); xml.onreadystatechange=function(){ console.log("判断是否连接到服务器"+xml.status); console.log("判断是否处理到请求"+xml.readyState); if(xml.status==200&&xml.readyState==4){ var json=xml.response; var is=eval(json); for(var i=0;i<is.length;i++){ var str; str="姓名:"+is[i].name+"<br>年龄:"+is[i].age+"<br>生日:"+is[i].birthday+"<br>工作:"+is[i].job document.getElementById("div1").innerHTML+=str; } } } xml.send(); } </script> </body> </html>
