ajax（一）——基础知识

发布时间：2020-12-16 01:32:53 所属栏目：百科来源：网络整理

导读：!DOCTYPE htmlhtml head titleajax.html/title meta name="keywords" content="keyword1,keyword2,keyword3" meta name="description" content="this is my page" meta name="content-type" content="text/html; charset=UTF-8" !--link rel="stylesheet" ty

<!DOCTYPE html>
<html>
  <head>
    <title>ajax.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
	
		window.onload=init;
		function init() {
			var btn=document.getElementById("getData");
			btn.onclick=getData;
		}
		//总的思路就是这样 页面一些事件比如点击等来触发ajax ajax去后台请求数据 这时前台没有任何变化好刷新 然后返回结果 通过dom节点绘制页面 只是局部刷新
		function getData() {
			//1.创建XMLHttpRequest对象
			//2.检测XMLHttpRequest对象的状态，在合适的时候处理
			//3.发送请求
			var xhr=createXmlHttpRequest();	//不同浏览器有兼容问题
			xhr.open("GET","ajax",true);
			xhr.onreadystatechange=function(){
				alert(xhr.readyState);
				if(xhr.readyState==4&&xhr.status==200){
					//xhr.responseText获取文本 包括HTML
					//xhr.responseXML获取xml对象 传过来的是xml字符串 前台可以解析
					alert(xhr.responseText);
					document.getElementById("serverData").innerHTML=xhr.responseText;
					//可以通过xml来传递数据 但是很浪费 现在常用json在前后台传递数据
				}
			};
			//可以传入参数，post请求时有效， get请求的参数直接在请求地址中传入
			xhr.send();
			//json就是js的对象格式 如果传回来的是字符串可以用eval来解析
			
			var json=[
				{id:21},{id:12}
			];
			alert(json);
			json="[{id:21},{id:12}]";
			alert(json);
			json=eval(json);
			alert(json);
			
		}
		function createXmlHttpRequest() {
			if(window.ActiveXObject){
				//针对IE5和IE6
				return new ActiveXObject("Microsoft.XMLHTTP");
			}else if(window.XMLHttpRequest){
				//针对其他主流浏览器
				return new XMLHttpRequest();
			}else{
				alert("使用的浏览器不支持ajax");
				return null;
			}
			
		}
	</script>
  </head>
  
  <body>
    <input type="button" value="getData" id="getData" />
    <div id="serverData"></div>
  </body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!