Ajax学习总结+案例

一、AJAX简介

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

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

二、同步和异步(理解)

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

Ajax学习总结+案例

四、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

Ajax学习总结+案例

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编程

}

}

}