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 分别代表：
- 代表未初始化。 还没有调用 open 方法
- 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
- 代表已加载完毕。send 已被调用。请求已经开始
- 代表交互中。服务器正在发送响应
- 代表完成。响应发送完毕
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 = "服务器错误，请稍后再试";
}
}
}
网友评论