Javascript Ajax学习笔记

Javascript Ajax学习笔记

1. 什么是ajax?

AJAX: 异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术。(不严格)定义: 客户端向服务器端发送请求,而无需刷新当前页面的技术.

2.http请求

(1)HTTP(HyperText Transfer Protocol)是一种无状态的协议.
无状态是指浏览器和服务器之间不需要建立持久的连接,这意味着当一个客户端向服务器端发出请求,然后服务器返回响应,然后连接就被关闭.
在服务器端不会保留连接的有关信息.
HTTP遵循请求/应答模型.浏览器向服务器发送请求,服务器处理请求并返回适当的应答。所有HTTP连接都被构造成一套请求和应答。

（2）HTTP请求方法：
· GET 通过请求URI得到资源
· POST,用于添加新的内容
· PUT用于修改某个内容
· DELETE,删除某个内容
· CONNECT,用于代理进行传输，如使用SSL
· OPTIONS询问可以执行哪些方法
· PATCH,部分文档更改
· PROPFIND, (wedav)查看属性
· PROPPATCH, (wedav)设置属性
· MKCOL, (wedav)创建集合（文件夹）
· COPY, (wedav)拷贝
· MOVE, (wedav)移动
· LOCK, (wedav)加锁
· UNLOCK (wedav)解锁
· TRACE用于远程诊断服务器
· HEAD类似于GET, 但是不返回body信息，用于检查对象是否存在，以及得到对象的元数据

3.实现Ajax请求步骤

（1）创建Ajax的核心对象
    // 创建Ajax的核心对象(兼容IE6)
    function getXhr(){
        var xhr = null;
        try{
            //其他浏览器
            xhr = new XMLHttpRequest();
            //IE浏览器
            try{
                //IE7+
                xhr = new ActiveXObject("Microsoft.XMLHttp");
            }catch(e){
                //IE6
                xhr = new ActiveXObject("Msxml2.XMLHttp");
            }
        }
        return xhr;
    }   
    var xhr = getXhr();

（2）建立与服务器简历连接
     * 使用的是XMLHttpRequest对象的open()方法.
      xhr.open(type, url, async):
       * type - 请求类型(方式) GET | POST
       * url - 请求地址
       * async - 是否异步(Boolean值)
         * true - 默认值,表示异步
         * false - 不建议使用,表示同步
         * 注意
           * 是XMLHttpRequest对象的第一个版本

（3）向服务器端发送请求数据
    如果为GET请求，xhr.send(null)，请求数据添加在URL后面
    如果为POST请求，调用send()方法前,设置请求头信息。
      xhr.setRequestHeader('Content-Type',  'application/x-www-form-urlencoded')
     然后xhr.send(data | null);

（4）接收数据
    使用的是XMLHttpRequest对象的onreadystatechange事件,用于监听服务器端的通信状态;
    使用的是XMLHttpRequest对象的readyState属性, 判断服务器端当前的通信状态.
   备选值
   * 0 - 未初始化
   * 1 - 正在连接
   * 2 - 正在请求
   * 3 - 正在响应
   * 4 - 响应完毕
   使用的是XMLHttpRequest对象的status属性
     * 作用 - 表示服务器端的状态码
   判断当前的请求是否成功
   * 200 - 表示成功
   * 404 - 网页未找到
   * 500 - 服务器端的内部错误
   * 使用的是XMLHttpRequest对象的responseText属性
     * 是以字符串类型接收服务器端响应的数据内容 

xhr.onreadystatechange = function(){
    var XMLHttpReq = xhr;
    if (XMLHttpReq.readyState == 4 && XMLHttpReq.status == 200) {
        var text = XMLHttpReq.responseText;
        console.log(text);
    }
};