了解XMLHttpRequest对象的属性和方法
方法
- open()(String method,String url,boolean asynch,String username,String password)
- send(content)
- setRequestHeader(String header,String value)
- getAllResponseHeaders()
- getResponseHeader(String header)
- abort()
常用的方法就是黑色粗体的前三个
- open()：该方法创建http请求
- 第一个参数是指定提交方式(post、get)
- 第二个参数是指定要提交的地址是哪
- 第三个参数是指定是异步还是同步(true表示异步，false表示同步)
- 第四和第五参数在http认证的时候会用到。是可选的
- setRequestHeader(String header,String value)：设置消息头（使用post方式才会使用到，get方法并不需要调用该方法）
- xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
- send(content)：发送请求给服务器
- 如果是get方式，并不需要填写参数，或填写null
- 如果是post方式，把要提交的参数写上去
属性
- onreadystatechange：请求状态改变的事件触发器（readyState变化时会调用此方法），一般用于指定回调函数
- readyState：请求状态readyState一改变，回调函数被调用，它有5个状态
- 0：未初始化
- 1：open方法成功调用以后
- 2：服务器已经应答客户端的请求
- 3：交互中。Http头信息已经接收，响应数据尚未接收。
- 4：完成。数据接收完成
- responseText：服务器返回的文本内容
- responseXML：服务器返回的兼容DOM的XML内容
- status：服务器返回的状态码
- statusText：服务器返回状态码的文本信息
上面有两个地方都提及了回调函数，回调函数是什么？？
回调函数就是接收服务器返回的内容！
编写第一个Ajax程序
检测用户输入的用户名是否为"zhongfucheng"，只要不是zhongfucheng，就可以使用！
html代码
- 创建的div只要用于显示服务器返回的数据
- 当用户点击按钮的时候，就触发事件。
<inputtype="text"id="username">
<inputtype="button"onclick="checkUsername()"value="检测用户名是否合法">
<divid="result">
</div>
JavaScript代码
- 创建XMLHttpRequest对象
- 创建http请求
- 把文本框的数据发送给http请求的目标
- 指定回调函数
- 编写回调函数
- 发送http请求
- 回调函数得到http返回的内容，把内容写在div上
<scripttype="text/javascript">
varhttpRequest;
functioncheckUsername(){
if(window.XMLHttpRequest){
//在IE6以上的版本以及其他内核的浏览器(Mozilla)等
httpRequest=newXMLHttpRequest();
}elseif(window.ActiveXObject){
//在IE6以下的版本
httpRequest=newActiveXObject();
}
//创建http请求
httpRequest.open("POST","Servlet1",true);
//因为我使用的是post方式，所以需要设置消息头
httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//指定回调函数
httpRequest.onreadystatechange=response22;
//得到文本框的数据
varname=document.getElementById("username").value;
//发送http请求，把要检测的用户名传递进去
httpRequest.send("username="+name);
}
functionresponse22(){
//判断请求状态码是否是4【数据接收完成】
if(httpRequest.readyState==4){
//再判断状态码是否为200【200是成功的】
if(httpRequest.status==200){
//得到服务端返回的文本数据
vartext=httpRequest.responseText;
//把服务端返回的数据写在div上
vardiv=document.getElementById("result");
div.innerText=text;
}
}
}
</script>
效果
实现了局部更新，不需要刷新整一个页面
