AJAX 复习-CSDN博客

本文链接：https://blog.csdn.net/xueyunji1989/article/details/6591552

今天晚上重写了以前的AJAX基础，还做了一些笔记，可是其中还是出了一些错误，还有一些让我无法理解，并且相当气愤的事情。。

先了解一些AJAX的基础状态，与方法。

XMLHttpRequestProperties

readyState

-0 =UNINITIALIZED;open not yet called

-1 =LOADING; send for request not yetcalled

-2 =LOADED;send called,headers and statusare available

-3 =INTERACTIVE; downloadingresponse,responseText only partially set

-4 =COMPLETED;finished downloading response

responseText

- Response as text;null if erroroccurs or ready state <3

responseXML

- Response as DOM Documentobject;null if error occurs or ready state <3

Status – integer status code

statusText – String status

XMLHttpRequestMethods

(partiallist)

Basic methods

- open(method,url[,async]) –initializes a new Http request

method can be “GET” “POST” “PUT” “DELETE”

url must be an HTTP URL(start with “http://”)

async is a Boolean indicating whether request should besent asynchronously –defaults to true

- abort() – called after send()to cancel requet

Header methods

-void setRequestHeader(name,valule)

-String getResponseHeader(name)

-String getAllResponseHeaders()

n returns a string where “header: value” pairs are delimited bycarriage returns

页面的代码

<script type="text/javascript">
		var req
		function validate(){			
			var idField = document.getElementById("userid");
			//escape = response incode url 差不了 idField.value 作为url参数
			var url = "validate.jsp?id=" + escape(idField.value);
			//关键是XMLHttpRequest能够发起httprequest
			if(window.XMLHttpRequest){
				//网景
				req = new XMLHttpRequest();						
			}else if(window.ActiveXObject){
				//windows 
				req = new ActiveXObject("Miicrosoft.XMLHTTP");
			}
			//true 表示使用异步模式.准备去访问这个页面了，send的方法时，真正发送
			req.open("GET",url,true);
			//状态改变时，0/1/2/3/4不同的状态。callback方法
			req.onreadystatechange = callback;
			//真正请求发送
			req.send(null);		
		}		
		function callback(){			
			if(req.readyState == 4)
				if(req.status == 200)
				{					
					var msg = req.responseXML.getElementsByTagName("msg")[0];				
					setMsg(msg.childNodes[0].nodeValue);					
				}			
		}	
		function setMsg(msg){			
			mdiv = document.getElementById("usermsg");			
			if(msg == "invalid"){				
				mdiv.innerHTML = "<font color='red'>username exists</font>";			
			}else{				
				mdiv.innerHTML = "<font color='green'>OK</font>";
			}		
		}		
	</script>
	</head>
	<body>
		<form id="" action="">
			username:<input type="text" id="userid" name="username" οnblur="validate()" />
			password:<span id="usermsg"></span>
			<br />
			<input type="text" name="" value="" οnblur="" />
			<span></span>
			<br />
		</form>
	</body>
</html>

还有一个validate.jsp页面的代码

<%
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-store");//HTTP1.1
response.setHeader("Pragma","no-cache");//HTTP1.0
response.setDateHeader("Expireo", 0);//prevents catching at proxy server
response.getWriter().write("<msg>valid</msg>");
%>

这是一个成功的示例，可以扩展成验证注册用户名是否已经，在蓝色段调用导入JSP脚本代码即可

谁设计的getElement 到底有没有 S 呀. f...你妹妹的。嘻嘻。