AJAX入门
发布时间:2020-12-15 22:07:11 所属栏目:百科 来源:网络整理
导读:!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"html head titleajax.html/title meta http-equiv="keywords" content="keyword1,keyword2,keyword3" meta http-equiv="description" content="this is my page" meta http-equiv="content-ty
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>ajax.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type = "text/javascript"> //Ajax中的一个重要对象时XMLHttpRequst. //声明一个空对象以接受XMLHttpRequest对象 var xmlHttpRequest = null; function ajaxSubmit () { //alert (window.ActiveXObject); if (window.ActiveXObject) {//如果是IE浏览器 xmlHttpRequest = new ActiveXObject ("Microsoft.XMLHTTP");//生成对象 }else if(window.XMLHttpRequest) {//除IE外的其他浏览器实现 xmlHttpRequest = new XMLHttpRequest (); } //alert (xmlHttpRequest); if (null != xmlHttpRequest) { //1:请求的方式2:请求的资源路径. xmlHttpRequest.open ("GET","AjaxServlet",true);//准备发送请求(但是没有真实发送请求) //关联好ajax的回调函数 xmlHttpRequest.onreadystatechange = ajaxCallBack; //真正的向服务器发送数据 xmlHttpRequest.send (); } } //回调函数 function ajaxCallBack () { if (xmlHttpRequest.readyState == 4) { if (xmlHttpRequest.status == 200) { var responseText = xmlHttpRequest.responseText; document.getElementById ("content").innerHTML = responseText; } } } </script> </head> <body> Ajax(Asynchronous Javascript and XML).异步的Javascript与XML Ajax中的一个重要的对象时XMLHttpRequest <input type = "button" value = "get content from servlet" onclick = "ajaxSubmit();"/> <div id = "content"> </div> </body> </html> ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>ajax.html</title> <meta http-equiv="keywords" content="keyword1,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type = "text/javascript"> //Ajax中的一个重要对象时XMLHttpRequst. //主要是微软ie6要处理兼容,6以后包括其他浏览器直接的new就可以 //声明一个空对象以接受XMLHttpRequest对象 var xmlHttpRequest = null; function ajaxSubmit () { //alert (window.ActiveXObject); if (window.ActiveXObject) {//如果是IE浏览器 xmlHttpRequest = new ActiveXObject ("Microsoft.XMLHTTP");//生成对象 }else if(window.XMLHttpRequest) {//除IE外的其他浏览器实现 xmlHttpRequest = new XMLHttpRequest (); } //alert (xmlHttpRequest); if (null != xmlHttpRequest) { var v1 = document.getElementById ("value1"); var v2 = document.getElementById ("value2"); var param = v1.name+"="+v1.value+"&"+v2.name+"="+v2.value; //1:请求的方式2:请求的资源路径. //xmlHttpRequest.open ("GET","AjaxServlet"++"?"+param,true);//准备发送请求(但是没有真实发送请求) //post 用post提交的时候必须加上xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlHttpRequest.open ("POST",true); xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //关联好ajax的回调函数 xmlHttpRequest.onreadystatechange = ajaxCallBack; //真正的向服务器发送数据 //GET方式xmlHttpRequest.send (null); xmlHttpRequest.send (param); } } //回调函数 function ajaxCallBack () { if (xmlHttpRequest.readyState == 4) { if (xmlHttpRequest.status == 200) { var responseText = xmlHttpRequest.responseText; document.getElementById ("content").innerHTML = document.getElementById ("content").innerHTML + responseText; } } } </script> </head> <body> Ajax(Asynchronous Javascript and XML).异步的Javascript与XML Ajax中的一个重要的对象时XMLHttpRequest <input type = "button" value = "get content from servlet" onclick = "ajaxSubmit();"/> <input id = "value1" type = "text" name = "value1"/><input id = "value2" type = "text" name = "value2"/> <div id = "content"> </div> <input type = "button" value = "hello"/> <a href = "www.baidu.com">fdf</a> <form enctype="application/x-www-form-urlencoded"></form> </body> </html> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |