Ajax学习小结

1 同步和异步的基础：XHR

2 XHR对象创建

        var request;

        if(window.XMLHttpRequest) {

            request = new XMLHttpRequest();

        } else {

            request = new ActiveXObjext("Microsoft.XMLHttp"); // IE5&6

        }

3 HTTP请求（无状态协议）

7个步骤：

    1 建立TCP连接

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

    3 Web浏览器发送请求头信息

    4 Web服务器应答

     5 Web服务器发送应答头信息

    6 Web服务器向浏览器发送数据

    7 Web服务器关闭TCP连接

HTTP请求：  

    Get：信息获取

    Post：修改服务器上资源（提交数据）

HTTP响应：

    1 一个数字和文字组成的状态码（表示请求成功或失败）

    2 响应头

    3 响应体

响应状态码：

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

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

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

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

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

4 XHR请求

open(method, url, async)
send(string)
request.open("GET", "get.php", true);
request.send();

request.open("POST", "post.php", true);
request.send();

request.open("POST", "create.php", true);
request.setRequestHeader("Content-type", "appliction/x-www-form-urlencoded");
request.send("name=XXX&sex=男");

5 XHR取得响应

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

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

    status和statusText：返回HTTP请求的数字状态和文本内容

    getAllResponseHeader()：获得所有的响应头

    getResponseHeader()：查询响应中某个字段的值

6 readyState属性

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

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

    2：请求已接收（接收到头信息）

    3：请求处理中（接收到响应体）

    4：请求已完成（响应就绪，即响应完成）

7 如何监听readyState

var request = new XMLHttpRequest();
request.open("GET", "get.php", true);
request.send();
request.onreadystatechange = function() {
    // 请求完成，响应成功
    if(request.readyState === 4 && request.status === 200) {
        // 其他 request.responseText;
    }
}

8 运行PHP

    XAMPP软件包：https://www.apachefriends.org/download.html

    DW中配置Web服务器用于本地测试

注意点：

    7.1 安装XAMMP时可能需要关闭UAC（用户账户控制）：运行、msconfig、工具、更改UAC设置（启动）滑到最底下

    7.2 端口80被ISS占用，进入控制面板-管理工具-服务，将World Wide Web Publishing Service停止即可，或者在Xampp Apache的设置中将配置文件httpd.conf的端口改为8088或其他

    7.3 如果以前安装过，配置路径被老版本给占用没有修改为新版本路径，那么需要在进入注册表修改环境变量path：win+r打开运行对话框--->输入regedit回车，进入注册表--->点击HKEY_LOCAL_MACHINE---->SYSTEM---->currentControlSet---->Services---->找到Apache2.4，你就会在右边看到ImagePath看看那个路径是不是以前那个版本的路径，修改为新版本路径即可---->重启xampp（MySQL、FileZilla、Mercury、Tomcat如有同样的问题解决方法相同）

附：Fiddler的使用

get：

    Composer-添加url-Execute-双机左边列表栏的地址

post：

    添加Content-Type:application/x-www-form-urlencoded

    RequestBody中添加：提交参数