web框架学习前复习——ajax

ajax
ajax是javascript的一种异步交互技术，简单理解为在页面加载完成后通过某个事件触 触发与服务器的交互而不不用提交页面使整个页面刷新。典型的应用如账户注册验证，用户不用刷新页面就可以进行服务器端验证，还有验证码，无需通过刷新页面就就可以重新获取验证码而不用提交整个页面信息，这样可以更加便捷的展示页面信息，提升客户体验。
ajax的编码步骤

<script type="text/javascript">
window.onload=function(){
//发出异步请求创建xmlhttpRequest对象
var xhr = getXmlhttpRequest();
//还需注册回调函数已对响应的消息做响应的显示
xhr.onreadystatechange=function(){
if(xhr.readystate==4){
if(xhr.status==200){
alert("异步请求案例");
}
}
}
//建立与服务器的连接交互
xhr.open("GET","异步请求指向的地址");
//发出异步请求
xhr.send(null);
}
</script>

xmlhttpRequest的属性详解
readyState：short只读
0：XmlHttpRequest对象被创建了。此时为0
1：建立与服务器的链接，但是请求还没有发出去。此时为1。open(),send()还没有执行。
2：发出了请求，但是服务器没有任何响应。此时为2
3：接收到了服务器的响应，接收到了服务器发出的响应消息头时，此时3.
4：接收到了服务器发送的响应正文，响应结束。此时为4
status：代表着响应状态码
跟http响应状态码一样
statusText：响应码描述
和status是一致的，不同的是status发送的是数字，statusTe
4000
xt发送的是字符串
responseXML：Document。代表着响应正文内容，把他当做一个Document对象
XmlHttpRequest的方法
getAllResponseHeaders():返回的是所有的响应消息头。是一个字符串。
getResponseHeader(var headerName):返回指定响应消息头的值。是一个字符串。
open(var method,var url,boolean isAnsy):建立连接
method，请求方式
url，请求的地址
isAnsy，同步还是异步。默认是true，就是异步。可以不写
send(var data):向服务器发送请求正文。如果是get请求，请求传入null.
如果是post请求：data ="username=abc&password=123"
setRequestHeader(var headerName,var headerValue):向服务器发送请求消息头。
XmlHttpRequest的状态监听器
onreadystatechange，指向是一个函数。回调函数。每次XHR对象的readyState发生变化都会触发。即每一次注册过的异步方法进行交互后都会调用该函数。

//一般写法：
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
//JS之DOM、BOM编程
}
}
}

通过ajax的核心对象不难看出每次异步交互其实就是一场http请求与响应。不同在于页面进行的是全局交互。而ajax进行的是其中一部分交互。可以将一个页面看出由很多小页面组成而ajax就是其中一个小的页面能够再特定的指令下对服务器进行交互获取服务器信息。