Ajax 模板大法讲解

1.XHR对象

Ajax 完全依赖 XMLHttpRequest 对象，字面意思就是“XML文件的HTTP请求”对象。一般把 new 出来的变量叫做 xhr。
var xhr = new XMLHttpRequest();
驼峰命名法
IE6不兼容。
new ActiveXObject("Microsoft.XMLHTTP");

2.open方法

open 方法表示让 xhr 对象配置一个请求，open 字面意思是打开，就是打开一个请求。open 之后并没有真正的发送请求，而是要用 send() 方法
open方法有三个参数：
xhr.open(要发送的请求类型,路径,是否使用异步);
第一个参数，要么是"get" 要么是"post"
第二个参数，就是处理这个请求的PHP、java、.net路径
的三个参数，表示是否是异步处理，没有任何理由不用 true，必须写 true

关于同步异步？
异步：不死等耗时较长的事情完成，先同时干别的事情，耗时较长的事情完成了，控制权交给回调函数
同步：就是异步的反面，死等那个耗时较长的事情完成，然后做别的事情
说白了，就是死等不死等的区别。
node.js中单线程、异步的关系?答案是没关系。
多线程可以同步，单线程也可以异步。

4.send()方法

send方法就是发送请求，里面的参数表示 http requset 报头里面携带内容。
get请求报头里面没有内容，post请求有内容。
get请求：
xhr.send(null);
post请求，写的也是类似于get请求的参数字符串：
xhr.send("name=kaola&age=18");

5. encodeURIComponent()

请求尽量不要有中文，如果要传输中文就要防止服务器上错乱，一般要进行 encodeURIComponent 处理。注意是URI你不是URL。
一般来讲，高级后台程序语言，都能够自动处理转译。
语法：
encodeURIComponent("我是一个文本");

中文自动编译
get请求、post请求如果要用中文，一般要将中文转为URI标准字符。
image.png

世界上所有的文字都有URI编码，根据你的HTML页面的字符集不同，URI编码也不同。

6. post请求错误必须 setRequestHeader

POST请求在服务器端比较难处理，需要用服务器写对应“流处理”程序。为什么？POST请求参数的尺寸可以无限大，所以 post 请求也是一段一段上去的。（node.js中将遇见这个datachuck）。
比如 $_POST[] 接收会报错。
但是，如果是表单提交，那么PHP内置了相应处理程序。Ajax 如果需要模拟表单提交，那么需要在send前设置：

    xhr.open("post","do2.php",true);
        //如果用post发送请求，那么必须写一句话，模拟成form表单提交：
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send("xingming="+encodeURIComponent("考拉")+"&age=18");

6. readystatechange事件

xhr 对象一旦开始 open，就有了 readyState 属性，readyState 属性一旦发生改变，就能够触发onreadystatechange 事件
xhr.readystate的0 1 2 3 分别代表：

1. 代表未初始化。 还没有调用 open 方法
2. 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
3. 代表已加载完毕。send 已被调用。请求已经开始
4. 代表交互中。服务器正在发送响应
5. 代表完成。响应发送完毕
   xhr.responseText就表示接收回来的文本。是一个string类型。

7.HTTP状态码

常用状态码（status）及其含义：
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )

HTTP状态码

为了防止文件未访问出现服务器错误。改写连接Ajax代码如下：

xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                        biaoti.innerHTML = xhr.responseText;
                    }else{
                        biaoti.innerHTML = "服务器错误，请稍后再试";
                    }
                }
            }