0%

AJAX简述

AJAX全称是”Asynchronous Javascript And XML”,即“异步JavaScript和XML”。

AJAX不是一种新的编程语言,而是一种使用现有标准的新方法。

概述

通过XMLHttpRequest,与后台交互数据,实现局部刷新。

同步

提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

异步

请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕

概念

AJAX应用
  1. 使用HTML和CSS完成页面
  2. 通过XMLHttpRequest和web服务器进行数据交换
  3. JavaScript DOM操作,完成动态局部刷新
创建XMLHttpRequest对象

要使用Ajax,第一步就是实例化XMLHttpRequest对象。

1
var request = new XMLHttpReques();

现代浏览器基本上都支持XMLHttpReques对象,但如果要兼容IE6、IE5的上古浏览器可以这样写:

1
2
3
4
5
6
var request;
if(windows.XMLHttpReques){
request = new XMLHttpReques();
} else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}

HTTP

HTTP是一种计算机与计算机网络通信的规则,是无状态的协议,它既不建立持续的连接,也不保留“记忆”。

HTTP请求的过程:

  1. 建立TCP连接
  2. 浏览器发送请求命令
  3. 浏览器发送请求头信息
  4. web服务器应答
  5. web服务器发送应答头信息
  6. web服务器发送应答数据主体
  7. 关闭TCP连接
请求
组成

请求由方法(动作)、URL、请求头、请求体组成。请求头和请求体以空行分隔。

GET和POST

GET:多用于信息获取,用URL传递参数,在发送信息的时候字符有限制,一般在2000个字符左右。
也很很多人说GET是幂等的,幂等其实就是执行多次与执行一次并无差别

POST:一般用于修改服务器上的资源。对信息的数量无限制,较之GET更安全。

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

响应
组成
  1. 数字和文字组成的状态码
  2. 响应头
  3. 响应体
状态码

通常状态码的首位数字,表示状态码的类型。
1 信息,服务器收到请求,需要请求者继续执行操作
2
成功,操作被成功接收并处理
3 重定向,需要进一步的操作以完成请求
4
客户端错误,请求包含语法错误或无法完成请求
5** 服务器错误,服务器在处理请求的过程中发生了错误

XMLHttpRequest发送请求

方法和属性
  1. 规定请求的类型、URL 以及是否异步处理请求。

    1
    open(method,url,async)
    • method: 请求的类型,GET或POST
    • URL:请求的地址
    • async: true为异步,false为同步,默认为true,可省略
  2. 将请求发送到服务器。

    1
    send(string)
    • 仅用于POST
  3. 向请求添加HTTP头。

    1
    setRequestHeader(header,value)
    • header: 规定头的名称
    • value: 规定头的值

5.XMLHttpRequest取得响应

5.1 方法和属性
  1. XMLRequest对象的两个属性
    获得字符串形式的响应数据

    1
    responseText

    获得XML形式的响应数据

    1
    responseXML
  2. 以数字或文本返回HTTP状态码

    1
    status,statusText
  3. 获取所有响应报头

    1
    getAllResponseHeader()
  4. 查询响应中的某个字段的值

    1
    getResponseHeader()
  5. 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数

    1
    onreadystatechange
  6. readyState属性

    readyState属性代表了服务器的变化。

    0:请求未初始化,open未调用

    1:服务器连接已建立,open已经调用

    2:请求已接受,即已接收头信息

    3:请求处理中,即已收到响应主体

    4:请求已完成,且响应就绪,即响应完成