Ajax学习总结+案例

一、AJAX简介

1、Asynchronous JavaScript And XML指异步 JavaScript 及 XML

2、老技术新用法。是基于JavaScript、XML、HTML、CSS新用法

二、同步和异步（理解）

三、第一个异步请求案例（熟悉编码步骤）

四、XmlHttpRequest（JS）对象详解（重点）

1、创建XmlHttpRequest对象

不同浏览器，设置相同浏览器的版本，创建该对象的方式是不同的。

解决办法：

a、从w3cshool的文档中拷贝。

b、将来：用jQuery等框架

2、XmlHttpRequest对象的属性

a、readyState：short只读

标识着当前的请求状态

0：XmlHttpRequest对象被创建了。此时为0

1：建立与服务器的链接，但是请求还没有发出去。此时为1。open(),send()还没有执行。

2：发出了请求，但是服务器没有任何响应。此时为2

3：接收到了服务器的响应，接收到了服务器发出的响应消息头时，此时3.

4：接收到了服务器发送的响应正文，响应结束。此时为4

b、status：代表着响应状态码

c、statusText：响应码描述

d、responseText：字符串类型。代表着响应正文内容，把他当做文本对待

e、responseXML：Document。代表着响应正文内容，把他当做一个Document对象。（DOM）

 

3、XmlHttpRequest的方法

a、getAllResponseHeaders():返回的是所有的响应消息头。是一个字符串。

b、getResponseHeader(var headerName):返回指定响应消息头的值。是一个字符串。

c、open(var method,var url,boolean isAnsy):建立连接。

method，请求方式

url，请求的地址

isAnsy，同步还是异步。默认是true，就是异步。

d、send(var data):向服务器发送请求正文。如果是get请求，请求传入null.

如果是post请求：data="username=abc&password=123"

e、setRequestHeader(var headerName,var headerValue):向服务器发送请求消息头。

 

 

4、XmlHttpRequest的状态监听器

onreadystatechange，指向是一个函数。回调函数。

何时触发执行，每次XHR对象的readyState发生变化都会触发。

 

一般写法：

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

if(xhr.status==200){

//JS之DOM、BOM编程

}

}

}