AJAX学习笔记一

XMLHttpRequest核心对象web服务器进行数据的异步交换

运用JavaScript操作DOM，实现动态局部刷新

一个完整的HTTP请求过程，7步：

1.建立TCP连接

2.web浏览器向web服务器发送请求命令

3.web浏览器发送请求头信息

4.web服务器应答

5.web服务器发送应答头信息

6.web服务器向浏览器发送数据

7.web服务器关闭TCP连接

一个HTTP请求一般由四部分组成：

1.HTTP请求的方法或动作，GET或POST请求

2.正在请求的URL，要知道请求的地址

3.请求体，包含一些客户端环境信息，身份验证信息

4.消息体，包含客户提交的查询字符串信息，表单信息等

GET:

一般用于信息获取

使用URL传递参数

对所发送信息的数量也有限制，一般在2000个字符

消息放在URL中，用“？”连接；安全度不高

POST：

一般用于修改服务器上的资源

对所发送信息的数量无限制

消息存放在消息体内，相较于GET而言安全度要高

一个HTTP响应一般由三个部分组成：

1.一个数字和文字组成的状态码，用来显示请求是成功还是失败

2.响应头，响应头也和请求头一样包含许多有用的信息。例如：服务器类型，日期时间，内容类型和长度等

3.响应体，也就是响应正文，如html代码，字符串等

HTTP状态码由3位数构成，其中首位数字定义了状态码的类型：

1XX：信息类，表示收到web浏览器请求，正在进一步的处理中

2XX：成功，表示用户请求被正确接收，理解和处理例如：200 OK

3XX：重定向，表示请求没有成功，客户必须采取进一步的动作

4XX：客户端错误，表示客户端提交的请求有错误，例如：400 NOT Found，意味着请求中所引用的文档不存在

5XX：服务器错误，表示服务器不能完成对请求的处理：如500

open（method，url,async）

method：发送请求的方式为GET或POST，不区分大小写（一般大写）

url：请求的地址

async：异步或同步，true为异步；false为同步。默认一般为异步true

发送时用send(string)

若用GET的方式发送请求（消息在url后面），send里的参数可以不填写或填写null；

若用POST的方式发送请求，send里的参数要填写不然没有意义

例子：

request.open（"POST","create.php",true）;

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

request.send("name=王二狗&sex=男");

注意：

setRequestHeader方法要放在open和send之间，若放在send后面会抛出异常。

获取服务器的响应

responseText：获得字符串形式的响应数据

responseXML：获得XML形式的响应数据

status和statusText：以数字和文本形式返回HTTP状态码

getAllResponseHeader():获得所有的响应报头

getResponseHeader()：查询响应中的某个字段的值（注意：括号内要传进参数）

readyState属性，监听服务器响应变化：

0：请求未初始化，open还没有调用

1：服务器连接已建立，open已经调用了

2：请求已接收，也就是接收到头信息了

3：请求处理中，也就是接收到响应主体了

4：请求已完成，且响应已就绪，也就是响应完成了

例子：

//获得ajax核心对象
var xhr = getXmlHttpRequest();
//打开一个新的请求
xhr.open('get','students.json',true);
//添加一个监听器
xhr.onreadystatechange = function () {
if(xhr.status == 200 && xhr.readyState == 4) {
var data =xhr.responseText;//responseText——服务器返回的文本
var stus = eval(data);//用函数eval()将字符串转化为object——students.json中的内容为字符串
alert(stus[0].name);//显示查询内容
}
}
//发送请求
xhr.send(null)